@bemaestro/views 0.0.2

package/src/renderers/DetailView.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import type { ListParams, MaestroClient, RuntimeView } from '@bemaestro/sdk/runtime'
+import type { JSONContent } from '@tiptap/core'
+import { useViewData, type DataRecord } from '../composables/use-view-data.js'
+import { formatValue, humanizeKey } from '../lib/format.js'
+import Card from '../primitives/Card.vue'
+import StateMessage from '../primitives/StateMessage.vue'
+import RichTextField from '../primitives/RichTextField.vue'
+
+const props = defineProps<{
+  view: RuntimeView
+  client: MaestroClient
+  /** Optional target record; when absent the first record is shown (ABAC-scoped
+   * client surfaces resolve to the caller's own single record). */
+  recordId?: string
+}>()
+
+interface FieldGroup {
+  label?: string
+  fields: string[]
+}
+
+const collectionKey = toRef(() => props.view.collectionKey)
+const params = computed<ListParams>(() =>
+  props.recordId ? { filter: { id: props.recordId }, limit: 1 } : { limit: 1 },
+)
+const { rows, loading, error } = useViewData(props.client, { collectionKey, params })
+const record = computed<DataRecord | undefined>(() => rows.value[0])
+
+const groups = computed<FieldGroup[]>(() => {
+  const configured = (props.view.config as { fieldGroups?: FieldGroup[] })?.fieldGroups
+  if (configured?.length) return configured
+  const rec = record.value
+  if (!rec) return []
+  return [{ fields: Object.keys(rec).filter((k) => k !== 'id') }]
+})
+
+/** Structural check for a Tiptap doc (spec 19 US-19.2) — DetailView has no
+ * schema fetch of its own, so it recognizes the shape rather than the
+ * `ui.widget` flag FormView reads from `schema.getCollection`. */
+function isRichTextDoc(value: unknown): value is JSONContent {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as JSONContent).type === 'doc' &&
+    Array.isArray((value as JSONContent).content)
+  )
+}
+</script>
+
+<template>
+  <StateMessage v-if="error" variant="error" title="Failed to load" :description="error.message" />
+  <StateMessage v-else-if="loading && !record" variant="loading" title="Loading…" />
+  <StateMessage v-else-if="!record" variant="empty" title="No record" />
+
+  <div v-else class="flex flex-col gap-4">
+    <Card v-for="(group, gi) in groups" :key="gi" class="p-5">
+      <h3 v-if="group.label" class="mb-3 text-sm font-semibold">{{ group.label }}</h3>
+      <dl class="grid grid-cols-1 gap-x-8 gap-y-3 sm:grid-cols-2">
+        <div
+          v-for="field in group.fields"
+          :key="field"
+          class="flex flex-col gap-0.5"
+          :class="isRichTextDoc(record[field]) && 'sm:col-span-2'"
+        >
+          <dt class="text-xs text-muted-foreground">{{ humanizeKey(field) }}</dt>
+          <RichTextField
+            v-if="isRichTextDoc(record[field])"
+            :model-value="record[field] as JSONContent"
+            :client="client"
+            :editable="false"
+          />
+          <dd v-else class="text-sm">{{ formatValue(record[field]) }}</dd>
+        </div>
+      </dl>
+    </Card>
+  </div>
+</template>

package/src/renderers/FormView.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watchEffect } from 'vue'
+import type { MaestroClient, RuntimeView } from '@bemaestro/sdk/runtime'
+import type { JSONContent } from '@tiptap/core'
+import { humanizeKey } from '../lib/format.js'
+import Card from '../primitives/Card.vue'
+import StateMessage from '../primitives/StateMessage.vue'
+import RichTextField from '../primitives/RichTextField.vue'
+
+const props = defineProps<{ view: RuntimeView; client: MaestroClient }>()
+const emit = defineEmits<{ submitted: [record: Record<string, unknown>] }>()
+
+interface FormField {
+  key: string
+  type: string
+  required: boolean
+  options?: string[]
+  /** UI hints passed through the meta-model unchanged (spec 19 US-19.1/19.2):
+   * `widget: 'richtext'` renders a Tiptap doc+blocks editor instead of the
+   * generic input. */
+  ui?: Record<string, unknown>
+}
+
+function isRichText(field: FormField): boolean {
+  return field.ui?.widget === 'richtext'
+}
+
+function richTextValue(key: string): JSONContent | null {
+  const value = model[key]
+  return value && typeof value === 'object' ? (value as JSONContent) : null
+}
+
+function setRichTextValue(key: string, doc: JSONContent): void {
+  model[key] = doc
+}
+
+const fields = ref<FormField[]>([])
+const loadError = ref<string | null>(null)
+const submitting = ref(false)
+const submitError = ref<string | null>(null)
+const done = ref(false)
+const model = reactive<Record<string, unknown>>({})
+
+const submitAction = computed(
+  () => (props.view.config as { submitAction?: string })?.submitAction ?? 'create',
+)
+
+// Derive fields from config.fieldGroups when present, else from the collection
+// schema (spec 17: form binds collection fields).
+watchEffect(async () => {
+  const key = props.view.collectionKey
+  if (!key) {
+    loadError.value = 'form view is not bound to a collection'
+    return
+  }
+  const groups = (props.view.config as { fieldGroups?: { fields: string[] }[] })?.fieldGroups
+  try {
+    const detail = await props.client.schema.getCollection(key)
+    const byKey = new Map(detail.fields.map((f) => [f.key, f]))
+    const chosen = groups?.length ? groups.flatMap((g) => g.fields) : detail.fields.map((f) => f.key)
+    fields.value = chosen
+      .map((k) => byKey.get(k))
+      .filter((f): f is NonNullable<typeof f> => Boolean(f))
+      .filter((f) => !['id', 'created_at', 'updated_at', 'deleted_at'].includes(f.key))
+      .map((f) => ({
+        key: f.key,
+        type: f.type,
+        required: Boolean(f.required),
+        options: f.options,
+        ui: f.ui,
+      }))
+    loadError.value = null
+  } catch (err) {
+    loadError.value = err instanceof Error ? err.message : String(err)
+  }
+})
+
+function inputType(type: string): string {
+  if (type === 'integer' || type === 'decimal') return 'number'
+  if (type === 'date') return 'date'
+  if (type === 'datetime') return 'datetime-local'
+  if (type === 'boolean') return 'checkbox'
+  return 'text'
+}
+
+async function submit() {
+  const key = props.view.collectionKey
+  if (!key) return
+  submitting.value = true
+  submitError.value = null
+  try {
+    const created = await props.client.collection(key).create(model)
+    done.value = true
+    emit('submitted', created as Record<string, unknown>)
+  } catch (err) {
+    submitError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <StateMessage v-if="loadError" variant="error" title="Misconfigured form" :description="loadError" />
+  <Card v-else class="p-5">
+    <form class="flex flex-col gap-4" @submit.prevent="submit">
+      <div v-for="field in fields" :key="field.key" class="flex flex-col gap-1">
+        <label :for="field.key" class="text-xs font-medium text-muted-foreground">
+          {{ humanizeKey(field.key) }}<span v-if="field.required" class="text-destructive"> *</span>
+        </label>
+
+        <select
+          v-if="field.options?.length"
+          :id="field.key"
+          v-model="model[field.key]"
+          class="h-9 rounded-md border bg-background px-3 text-sm"
+          :required="field.required"
+        >
+          <option value="" disabled>Select…</option>
+          <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+        </select>
+
+        <input
+          v-else-if="field.type === 'boolean'"
+          :id="field.key"
+          v-model="model[field.key]"
+          type="checkbox"
+          class="size-4"
+        />
+
+        <RichTextField
+          v-else-if="isRichText(field)"
+          :model-value="richTextValue(field.key)"
+          :client="client"
+          @update:model-value="setRichTextValue(field.key, $event)"
+        />
+
+        <input
+          v-else
+          :id="field.key"
+          v-model="model[field.key]"
+          :type="inputType(field.type)"
+          :required="field.required"
+          class="h-9 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+        />
+      </div>
+
+      <p v-if="submitError" class="text-xs text-destructive">{{ submitError }}</p>
+      <p v-if="done" class="text-xs text-green-600">Saved.</p>
+
+      <button
+        type="submit"
+        class="inline-flex h-9 items-center justify-center self-start rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground disabled:opacity-50"
+        :disabled="submitting || fields.length === 0"
+      >
+        {{ submitAction === 'update' ? 'Save' : 'Create' }}
+      </button>
+    </form>
+  </Card>
+</template>

package/src/renderers/GalleryView.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue'
+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 { formatValue } from '../lib/format.js'
+import StateMessage from '../primitives/StateMessage.vue'
+
+const props = defineProps<{ view: RuntimeView; client: MaestroClient }>()
+
+const binding = computed(() => checkViewBinding(props.view))
+const imageField = computed(() => configString(props.view, 'imageField'))
+const titleField = computed(() => configString(props.view, 'titleField'))
+const subtitleField = computed(() => configString(props.view, 'subtitleField'))
+
+const offset = ref(0)
+const collectionKey = toRef(() => props.view.collectionKey)
+const params = computed<ListParams>(() => ({ limit: 24, offset: offset.value, withTotal: 1 }))
+const { rows, loading, error } = useViewData(props.client, { collectionKey, params })
+
+function imageUrl(row: DataRecord): string | null {
+  const raw = imageField.value ? row[imageField.value] : null
+  if (!raw) return null
+  if (typeof raw === 'string') return raw
+  // File fields may serialize as { url } or { id, url }.
+  if (typeof raw === 'object' && 'url' in raw && typeof (raw as { url: unknown }).url === 'string') {
+    return (raw as { url: string }).url
+  }
+  return null
+}
+</script>
+
+<template>
+  <StateMessage
+    v-if="!binding.ok"
+    variant="error"
+    title="Misconfigured gallery"
+    :description="binding.reason"
+  />
+  <StateMessage v-else-if="error" variant="error" title="Failed to load" :description="error.message" />
+  <StateMessage v-else-if="loading && rows.length === 0" variant="loading" title="Loading…" />
+  <StateMessage v-else-if="rows.length === 0" variant="empty" title="No items" />
+
+  <div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+    <figure
+      v-for="row in rows"
+      :key="String(row.id)"
+      class="overflow-hidden rounded-lg border bg-card"
+    >
+      <div class="aspect-square w-full bg-muted">
+        <img
+          v-if="imageUrl(row)"
+          :src="imageUrl(row)!"
+          :alt="titleField ? formatValue(row[titleField]) : ''"
+          class="size-full object-cover"
+          loading="lazy"
+        />
+        <div v-else class="flex size-full items-center justify-center text-xs text-muted-foreground">
+          No image
+        </div>
+      </div>
+      <figcaption class="p-3">
+        <p class="truncate text-sm font-medium">
+          {{ titleField ? formatValue(row[titleField]) : '—' }}
+        </p>
+        <p v-if="subtitleField" class="truncate text-xs text-muted-foreground">
+          {{ formatValue(row[subtitleField]) }}
+        </p>
+      </figcaption>
+    </figure>
+  </div>
+</template>

package/src/renderers/KanbanView.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, ref, toRef, watchEffect } from 'vue'
+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 { formatValue, humanizeKey, 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 groupField = computed(() => configString(props.view, 'groupField'))
+const titleField = computed(() => configString(props.view, 'titleField'))
+const cardFields = computed<string[]>(
+  () => (props.view.config as { cardFields?: string[] })?.cardFields ?? [],
+)
+
+const collectionKey = toRef(() => props.view.collectionKey)
+// A board page: bounded window, not the whole collection (spec 17 NFR).
+const params = computed<ListParams>(() => ({ limit: 200, withTotal: 1 }))
+const { rows, loading, error } = useViewData(props.client, { collectionKey, params })
+
+// Fixed columns from the enum's options (so empty stages still show); fall back
+// to the distinct values found in the data.
+const enumOptions = ref<string[] | null>(null)
+watchEffect(async () => {
+  const key = props.view.collectionKey
+  const field = groupField.value
+  if (!key || !field) return
+  try {
+    const detail = await props.client.schema.getCollection(key)
+    enumOptions.value = detail.fields.find((f) => f.key === field)?.options ?? null
+  } catch {
+    enumOptions.value = null
+  }
+})
+
+const columns = computed<string[]>(() => {
+  if (enumOptions.value?.length) return enumOptions.value
+  const field = groupField.value
+  if (!field) return []
+  return [...new Set(rows.value.map((r) => String(r[field] ?? '—')))]
+})
+
+function cardsFor(column: string): DataRecord[] {
+  const field = groupField.value
+  if (!field) return []
+  return rows.value.filter((r) => String(r[field] ?? '—') === column)
+}
+</script>
+
+<template>
+  <StateMessage
+    v-if="!binding.ok"
+    variant="error"
+    title="Misconfigured board"
+    :description="binding.reason"
+  />
+  <StateMessage v-else-if="error" variant="error" title="Failed to load" :description="error.message" />
+  <StateMessage v-else-if="loading && rows.length === 0" variant="loading" title="Loading…" />
+
+  <div v-else class="flex gap-4 overflow-x-auto pb-2">
+    <div v-for="column in columns" :key="column" class="flex w-72 shrink-0 flex-col gap-2">
+      <div class="flex items-center justify-between px-1">
+        <Badge :color="column">{{ humanizeKey(column) }}</Badge>
+        <span class="text-xs text-muted-foreground">{{ cardsFor(column).length }}</span>
+      </div>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="card in cardsFor(column)"
+          :key="String(card.id)"
+          class="rounded-lg border bg-card p-3 shadow-sm"
+        >
+          <p class="text-sm font-medium">{{ recordLabel(card, titleField) }}</p>
+          <dl v-if="cardFields.length" class="mt-1 space-y-0.5">
+            <div v-for="f in cardFields" :key="f" class="flex justify-between gap-2 text-xs">
+              <dt class="text-muted-foreground">{{ humanizeKey(f) }}</dt>
+              <dd class="truncate">{{ formatValue(card[f]) }}</dd>
+            </div>
+          </dl>
+        </div>
+        <p v-if="cardsFor(column).length === 0" class="px-1 text-xs text-muted-foreground">Empty</p>
+      </div>
+    </div>
+  </div>
+</template>

package/src/renderers/TableView.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue'
+import type { ListParams, MaestroClient, RuntimeView } from '@bemaestro/sdk/runtime'
+import { useViewData, type DataRecord } from '../composables/use-view-data.js'
+import { formatValue, humanizeKey } from '../lib/format.js'
+import StateMessage from '../primitives/StateMessage.vue'
+
+const props = defineProps<{ view: RuntimeView; client: MaestroClient }>()
+
+const PAGE_SIZE = 25
+const offset = ref(0)
+const search = ref('')
+
+const collectionKey = toRef(() => props.view.collectionKey)
+const params = computed<ListParams>(() => {
+  const configured = (props.view.config as { columns?: string[]; sort?: string; filter?: string }) ?? {}
+  return {
+    limit: PAGE_SIZE,
+    offset: offset.value,
+    withTotal: 1,
+    sort: configured.sort,
+    filter: configured.filter,
+    fields: configured.columns?.length ? configured.columns.join(',') : undefined,
+    search: search.value || undefined,
+  }
+})
+
+const { rows, total, loading, error } = useViewData(props.client, { collectionKey, params })
+
+// Explicit columns from config, else inferred from the first row's keys.
+const columns = computed<string[]>(() => {
+  const configured = (props.view.config as { columns?: string[] })?.columns
+  if (configured?.length) return configured
+  const first = rows.value[0]
+  return first ? Object.keys(first).filter((k) => k !== 'id') : []
+})
+
+const pageCount = computed(() =>
+  total.value != null ? Math.max(1, Math.ceil(total.value / PAGE_SIZE)) : 1,
+)
+const page = computed(() => Math.floor(offset.value / PAGE_SIZE) + 1)
+
+function cell(row: DataRecord, key: string) {
+  return formatValue(row[key])
+}
+function next() {
+  if (page.value < pageCount.value) offset.value += PAGE_SIZE
+}
+function prev() {
+  if (offset.value > 0) offset.value -= PAGE_SIZE
+}
+function onSearch(e: Event) {
+  offset.value = 0
+  search.value = (e.target as HTMLInputElement).value
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <input
+      class="h-9 w-full max-w-xs rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+      type="search"
+      placeholder="Search…"
+      :value="search"
+      @input="onSearch"
+    />
+
+    <StateMessage v-if="error" variant="error" title="Failed to load" :description="error.message" />
+    <StateMessage v-else-if="loading && rows.length === 0" variant="loading" title="Loading…" />
+    <StateMessage
+      v-else-if="rows.length === 0"
+      variant="empty"
+      title="No records"
+      description="Nothing to show here yet."
+    />
+
+    <div v-else class="overflow-x-auto rounded-lg border">
+      <table class="w-full text-sm">
+        <thead class="border-b bg-muted/50 text-left text-muted-foreground">
+          <tr>
+            <th v-for="col in columns" :key="col" class="px-3 py-2 font-medium whitespace-nowrap">
+              {{ humanizeKey(col) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="String(row.id)" class="border-b last:border-0 hover:bg-muted/30">
+            <td v-for="col in columns" :key="col" class="px-3 py-2 whitespace-nowrap">
+              {{ cell(row, col) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="total != null" class="flex items-center justify-between text-xs text-muted-foreground">
+      <span>{{ total }} total</span>
+      <div class="flex items-center gap-2">
+        <button
+          class="rounded-md border px-2 py-1 disabled:opacity-40"
+          :disabled="offset === 0"
+          @click="prev"
+        >
+          Prev
+        </button>
+        <span>Page {{ page }} / {{ pageCount }}</span>
+        <button
+          class="rounded-md border px-2 py-1 disabled:opacity-40"
+          :disabled="page >= pageCount"
+          @click="next"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/styles.css

@@ -0,0 +1,5 @@
+/*
+ * Consumers must expose this package's classes to their Tailwind build, e.g. in
+ * the app's main CSS: `@source '../../../packages/views/src';`
+ * This file is a placeholder for any package-owned, non-utility CSS.
+ */