@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcListToolbar.vue

@@ -0,0 +1,44 @@
+<!-- File: packages/vue/src/components/OcListToolbar.vue | Map: toolbar row -> search slot -> count -> spacer -> view radios (built-in icons) -> actions slot -->
+<script setup lang="ts">
+/**
+ * Toolbar above a list. v-model:view picks the view ("cards", "table" or "list"); render the matching view yourself.
+ * Slots: search, actions, view-icon (scoped { view } to replace the built-in icons).
+ * Classes: .oc-list-toolbar(--sticky/--bordered), -search, -count, -spacer, -views, -view, -actions
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    count?: string
+    views?: Array<{ value: string; label: string }>
+    viewsLabel?: string
+    sticky?: boolean
+    bordered?: boolean
+  }>(),
+  { views: () => [], viewsLabel: 'View' },
+)
+const view = defineModel<string>('view', { default: 'cards' })
+const name = useUid('oc-list-view')
+</script>
+
+<template>
+  <div :class="['oc-list-toolbar', sticky && 'oc-list-toolbar--sticky', bordered && 'oc-list-toolbar--bordered']" role="toolbar">
+    <div v-if="$slots.search" class="oc-list-toolbar-search"><slot name="search" /></div>
+    <span v-if="count" class="oc-list-toolbar-count">{{ count }}</span>
+    <span class="oc-list-toolbar-spacer"></span>
+    <div v-if="views.length" class="oc-list-toolbar-views" role="radiogroup" :aria-label="viewsLabel">
+      <label v-for="v in views" :key="v.value" class="oc-list-toolbar-view" :title="v.label">
+        <input v-model="view" type="radio" :name="name" :value="v.value" :aria-label="v.label" />
+        <slot name="view-icon" :view="v">
+          <!-- Built-in icons for the three common views. -->
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <template v-if="v.value === 'cards'"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></template>
+            <path v-else-if="v.value === 'table'" d="M3 5h18M3 12h18M3 19h18" />
+            <path v-else d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
+          </svg>
+        </slot>
+      </label>
+    </div>
+    <div v-if="$slots.actions" class="oc-list-toolbar-actions"><slot name="actions" /></div>
+  </div>
+</template>

package/src/components/OcMarquee.vue

@@ -0,0 +1,36 @@
+<!-- File: packages/vue/src/components/OcMarquee.vue | Map: props -> .oc-marquee -> track (items + aria-hidden copy) -->
+<script setup lang="ts">
+/**
+ * Endless strip; pauses on hover / focus, stands still with reduced motion. The items are rendered twice
+ * (the copy is aria-hidden). Classes: .oc-marquee (--reverse, --slow, --fast, --plain, --no-fade), __track, __item
+ */
+withDefaults(
+  defineProps<{
+    items: string[]
+    label?: string
+    reverse?: boolean
+    speed?: 'default' | 'slow' | 'fast'
+    plain?: boolean
+    noFade?: boolean
+  }>(),
+  { speed: 'default' },
+)
+</script>
+
+<template>
+  <div
+    :class="[
+      'oc-marquee',
+      reverse && 'oc-marquee--reverse',
+      speed !== 'default' && `oc-marquee--${speed}`,
+      plain && 'oc-marquee--plain',
+      noFade && 'oc-marquee--no-fade',
+    ]"
+    :aria-label="label"
+  >
+    <div class="oc-marquee__track">
+      <span v-for="(item, i) in items" :key="i" class="oc-marquee__item">{{ item }}</span>
+      <span v-for="(item, i) in items" :key="'copy-' + i" class="oc-marquee__item" aria-hidden="true">{{ item }}</span>
+    </div>
+  </div>
+</template>

package/src/components/OcMediaCard.vue

@@ -0,0 +1,28 @@
+<!-- File: packages/vue/src/components/OcMediaCard.vue | Map: props -> article -> OcMediaThumb -> body (avatar, title + meta, menu) -> popover menu -->
+<script setup lang="ts">
+/**
+ * Video feed card (same markup as snippets/media-card.html). Props: title, href (title link covers the card), meta,
+ * avatar (initials), thumb (props for OcMediaThumb), compact. Slots: avatar (replaces initials), meta, menu (dropdown items;
+ * shows the ⋮ button). Classes: .oc-media-card(--compact), __body, __avatar, __text, __title, __meta, __menu
+ */
+import OcMediaThumb from './OcMediaThumb.vue'
+import { useUid } from '../composables/useUid'
+
+defineProps<{ title: string; href: string; meta?: string; avatar?: string; thumb?: Record<string, unknown>; compact?: boolean }>()
+const menuId = useUid('oc-media-card-menu')
+</script>
+
+<template>
+  <article :class="['oc-media-card', compact && 'oc-media-card--compact']">
+    <OcMediaThumb v-bind="thumb" />
+    <div class="oc-media-card__body">
+      <span v-if="avatar || $slots.avatar" class="oc-media-card__avatar" aria-hidden="true"><slot name="avatar">{{ avatar }}</slot></span>
+      <div class="oc-media-card__text">
+        <h3 class="oc-media-card__title"><a :href="href">{{ title }}</a></h3>
+        <p v-if="meta || $slots.meta" class="oc-media-card__meta"><slot name="meta">{{ meta }}</slot></p>
+      </div>
+      <button v-if="$slots.menu" type="button" class="oc-media-card__menu" :popovertarget="menuId" aria-label="More actions">&#8942;</button>
+    </div>
+    <div v-if="$slots.menu" :id="menuId" class="oc-dropdown-menu" popover><slot name="menu" /></div>
+  </article>
+</template>

package/src/components/OcMediaRow.vue

@@ -0,0 +1,28 @@
+<!-- File: packages/vue/src/components/OcMediaRow.vue | Map: props -> li row -> OcMediaThumb -> title link + meta -> menu button + popover -->
+<script setup lang="ts">
+/**
+ * Compact media row (same markup as snippets/media-row.html). Put rows in
+ * <ul class="oc-media-row-list"> or <ol class="oc-media-row-list oc-media-row-list--numbered"> (numbered playlist).
+ * Props: title, href (link covers the row), meta, thumb (props for OcMediaThumb), current (aria-current).
+ * Slots: meta, menu (dropdown items; shows the ⋮ button). Classes: .oc-media-row, __text, __title, __meta, __menu
+ */
+import OcMediaThumb from './OcMediaThumb.vue'
+import { useUid } from '../composables/useUid'
+
+defineProps<{ title: string; href: string; meta?: string; thumb?: Record<string, unknown>; current?: boolean }>()
+const menuId = useUid('oc-media-row-menu')
+</script>
+
+<template>
+  <li class="oc-media-row" :aria-current="current ? 'true' : undefined">
+    <OcMediaThumb v-bind="thumb" />
+    <div class="oc-media-row__text">
+      <h3 class="oc-media-row__title"><a :href="href">{{ title }}</a></h3>
+      <p v-if="meta || $slots.meta" class="oc-media-row__meta"><slot name="meta">{{ meta }}</slot></p>
+    </div>
+    <template v-if="$slots.menu">
+      <button type="button" class="oc-media-row__menu" :popovertarget="menuId" aria-label="More actions">&#8942;</button>
+      <div :id="menuId" class="oc-dropdown-menu" popover><slot name="menu" /></div>
+    </template>
+  </li>
+</template>

package/src/components/OcMediaThumb.vue

@@ -0,0 +1,38 @@
+<!-- File: packages/vue/src/components/OcMediaThumb.vue | Map: props -> <a>/<div> -> picture -> badge -> duration -> progress -->
+<script setup lang="ts">
+/**
+ * 16:9 video thumbnail (same markup as snippets/media-thumb.html). href renders an <a>.
+ * Props: src, alt, art (placeholder variant 1-6), duration, badge, live, progress (0-100), watched, ratio (video|square|portrait).
+ * Default slot: extra overlay content. Classes: .oc-media-thumb(--square/--portrait, .is-watched), __badge(--live), __duration, __progress
+ */
+withDefaults(
+  defineProps<{
+    src?: string
+    alt?: string
+    art?: number
+    href?: string
+    duration?: string
+    badge?: string
+    live?: boolean
+    progress?: number
+    watched?: boolean
+    ratio?: 'video' | 'square' | 'portrait'
+  }>(),
+  { alt: '', ratio: 'video' },
+)
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'div'"
+    :href="href"
+    :class="['oc-media-thumb', ratio !== 'video' && `oc-media-thumb--${ratio}`, watched && 'is-watched']"
+  >
+    <img v-if="src" :src="src" :alt="alt" />
+    <div v-else :class="['oc-media-art', art && art > 1 && `oc-media-art--${art}`]" />
+    <span v-if="badge" :class="['oc-media-thumb__badge', live && 'oc-media-thumb__badge--live']">{{ badge }}</span>
+    <span v-if="duration" class="oc-media-thumb__duration">{{ duration }}</span>
+    <progress v-if="progress != null" class="oc-media-thumb__progress" :value="progress" max="100" :aria-label="`Watched ${progress}%`">{{ progress }}%</progress>
+    <slot />
+  </component>
+</template>

package/src/components/OcMessage.vue

@@ -0,0 +1,91 @@
+<!-- File: packages/vue/src/components/OcMessage.vue | Map: types + icons -> props -> article (avatar, bubble: sender, quote, text, attachments, meta; actions) -->
+<script lang="ts">
+import type { AttachmentFile } from './OcAttachment.vue'
+
+/** File chip (default), image preview or square thumbnail inside a message. */
+export type MessageAttachment =
+  | (AttachmentFile & { kind?: 'file' })
+  | { kind: 'image'; href?: string; src?: string; alt: string; art?: number; caption?: string }
+  | { kind: 'thumb'; src?: string; alt: string; art?: number }
+export interface MessageAction { name: string; label: string; icon?: 'reply' | 'delete'; destructive?: boolean }
+export interface MessageData {
+  direction?: 'in' | 'out'
+  sender?: string
+  avatar?: string
+  time?: string
+  datetime?: string
+  status?: 'sent' | 'read' | 'failed'
+  statusLabel?: string
+  statusIcon?: boolean
+  continued?: boolean
+  quote?: { href?: string; sender: string; text: string }
+  /** Plain text: one paragraph. */
+  text?: string
+  /** Trusted markup (p, ul, ol, a, strong, code); escape user text on the server. */
+  html?: string
+  attachments?: MessageAttachment[]
+  actions?: MessageAction[]
+  label?: string
+  id?: string
+}
+export const MESSAGE_ICONS: Record<string, string> = {
+  reply: 'M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4',
+  delete: 'M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6',
+}
+</script>
+
+<script setup lang="ts">
+/**
+ * Chat bubble (same markup as snippets/message.html): incoming / outgoing, sender, avatar, time, read receipt, reply quote,
+ * attachments and hover actions. Slot default = extra text content. Emits: action(name).
+ * Classes: .oc-message(--out/--continued) __avatar __bubble __sender __quote __text __attachments __meta __status(--read/--failed) __actions __action
+ */
+import { computed } from 'vue'
+import OcAttachment from './OcAttachment.vue'
+import OcAttachmentImage from './OcAttachmentImage.vue'
+import OcAttachmentThumb from './OcAttachmentThumb.vue'
+
+const props = withDefaults(defineProps<MessageData>(), { direction: 'in' })
+const emit = defineEmits<{ action: [name: string] }>()
+const STATUS = { sent: 'Sent', read: 'Read', failed: 'Failed' }
+const thumbsOnly = computed(() => !!props.attachments?.length && props.attachments.every((a) => a.kind === 'thumb'))
+// Props of one attachment without its `kind`.
+type ImageAttachment = Extract<MessageAttachment, { kind: 'image' }>
+type ThumbAttachment = Extract<MessageAttachment, { kind: 'thumb' }>
+const strip = (a: MessageAttachment) => {
+  const { kind: _k, ...p } = a
+  return p
+}
+const image = (a: MessageAttachment) => strip(a) as Omit<ImageAttachment, 'kind'>
+const thumb = (a: MessageAttachment) => strip(a) as Omit<ThumbAttachment, 'kind'>
+const file = (a: MessageAttachment) => strip(a) as AttachmentFile
+</script>
+
+<template>
+  <article :id="id" :class="['oc-message', direction === 'out' && 'oc-message--out', continued && 'oc-message--continued']" :aria-label="label">
+    <span class="oc-avatar oc-message__avatar">{{ avatar }}</span>
+    <div class="oc-message__bubble">
+      <p v-if="sender && !continued" class="oc-message__sender">{{ sender }}</p>
+      <a v-if="quote" class="oc-message__quote" :href="quote.href"><strong>{{ quote.sender }}</strong><span>{{ quote.text }}</span></a>
+      <div v-if="html" class="oc-message__text" v-html="html"></div>
+      <div v-else-if="text || $slots.default" class="oc-message__text"><p v-if="text">{{ text }}</p><slot /></div>
+      <div v-if="attachments?.length" class="oc-message__attachments">
+        <div v-if="thumbsOnly" class="oc-attachment-list"><OcAttachmentThumb v-for="(a, i) in attachments" :key="i" v-bind="thumb(a)" as="span" /></div>
+        <template v-for="(a, i) in attachments" v-else :key="i">
+          <OcAttachmentImage v-if="a.kind === 'image'" v-bind="image(a)" />
+          <OcAttachmentThumb v-else-if="a.kind === 'thumb'" v-bind="thumb(a)" as="span" />
+          <OcAttachment v-else v-bind="file(a)" />
+        </template>
+      </div>
+      <p v-if="time || status" class="oc-message__meta">
+        <time v-if="time" :datetime="datetime">{{ time }}</time>
+        <span v-if="status" :class="['oc-message__status', status !== 'sent' && `oc-message__status--${status}`]"><svg v-if="statusIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9" /></svg>{{ statusLabel ?? STATUS[status] }}</span>
+      </p>
+    </div>
+    <div v-if="actions?.length" class="oc-message__actions">
+      <button v-for="a in actions" :key="a.name" type="button" :class="['oc-message__action', a.destructive && 'oc-message__action--destructive']" :aria-label="a.label" @click="emit('action', a.name)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="MESSAGE_ICONS[a.icon ?? a.name] ?? MESSAGE_ICONS.reply" /></svg>
+      </button>
+    </div>
+  </article>
+</template>

package/src/components/OcMessageList.vue

@@ -0,0 +1,43 @@
+<!-- File: packages/vue/src/components/OcMessageList.vue | Map: props + demo conversation -> .oc-message-list -> dividers and OcMessage rows -->
+<script setup lang="ts">
+/**
+ * Column of messages and dividers (snippets/message.html). items: (MessageData | { divider, system? })[]; demo conversation
+ * when empty; slot default replaces them. log = role="log" (default true). Emits: action(name, message, index).
+ * Classes: .oc-message-list, .oc-message-divider(--system)
+ */
+import OcMessage, { type MessageData } from './OcMessage.vue'
+
+export type MessageListItem = MessageData | { divider: string; system?: boolean }
+withDefaults(defineProps<{ items?: MessageListItem[]; log?: boolean; label?: string }>(), {
+  log: true,
+  label: 'Conversation with Lisa Verbeke',
+  items: () => [
+    { divider: 'Tuesday 14 October' },
+    { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:12', datetime: '2026-10-14T09:12', label: 'Lisa Verbeke, 09:12', text: 'Morning Tom! The worktop supplier sent two samples for Villa Dewitte.' },
+    {
+      sender: 'Lisa Verbeke', avatar: 'LV', time: '09:13', datetime: '2026-10-14T09:13', label: 'Lisa Verbeke, 09:13', continued: true, id: 'oc-message-demo-question',
+      html: '<p>Which finish should we order?</p><ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul><p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>',
+    },
+    {
+      direction: 'out', avatar: 'TP', time: '09:20', datetime: '2026-10-14T09:20', label: 'You, 09:20', status: 'read', statusIcon: true,
+      quote: { href: '#oc-message-demo-question', sender: 'Lisa Verbeke', text: 'Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm' },
+      text: 'Calacatta matt. The client wants the lighter look next to the oak fronts.',
+      actions: [{ name: 'reply', label: 'Reply to this message' }, { name: 'delete', label: 'Delete this message', destructive: true }],
+    },
+    { divider: 'Lisa Verbeke marked this question as answered', system: true },
+  ],
+})
+const emit = defineEmits<{ action: [name: string, message: MessageData, index: number] }>()
+const isDivider = (item: MessageListItem): item is { divider: string; system?: boolean } => 'divider' in item
+</script>
+
+<template>
+  <div class="oc-message-list" :role="log ? 'log' : undefined" :aria-label="log ? label : undefined">
+    <slot>
+      <template v-for="(item, i) in items" :key="i">
+        <div v-if="isDivider(item)" :class="['oc-message-divider', item.system && 'oc-message-divider--system']" :role="item.system ? 'note' : undefined"><span>{{ item.divider }}</span></div>
+        <OcMessage v-else v-bind="item" @action="(name: string) => emit('action', name, item as MessageData, i)" />
+      </template>
+    </slot>
+  </div>
+</template>

package/src/components/OcMessageThread.vue

@@ -0,0 +1,155 @@
+<!-- File: packages/vue/src/components/OcMessageThread.vue | Map: props + demo -> state (messages, sending) -> header (back slot, heading, people, badge, menu)
+     -> scroll (OcMessageList) -> footer (composer slot / form / note) -> busy overlay -->
+<script setup lang="ts">
+/**
+ * Scrolling conversation (same markup as snippets/message-thread.html). Like the snippet script, a sent text is appended as an
+ * outgoing bubble after the @send handler (prop onSend, may return a Promise) resolves; aria-busy shows the overlay meanwhile.
+ * Ctrl/Cmd + Enter sends. `manual` = you append messages yourself. Emits: menu(name), tool(name).
+ * Slots: back (start of the header), composer (replaces the form). Classes: .oc-message-thread(--plain) __header __heading __title
+ * __meta __people __actions __icon-btn __scroll __footer __note __busy
+ */
+import { ref, watch } from 'vue'
+import OcMessageList, { type MessageListItem } from './OcMessageList.vue'
+import type { MessageData } from './OcMessage.vue'
+import { useUid } from '../composables/useUid'
+
+export interface ThreadParticipant { initials: string; name?: string }
+export type ThreadMenuItem = { name: string; label: string; destructive?: boolean } | { separator: true }
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    project?: string
+    meta?: string
+    participants?: ThreadParticipant[]
+    status?: { label: string; variant?: string } | null
+    menu?: ThreadMenuItem[] | null
+    messages?: MessageListItem[]
+    scrollLabel?: string
+    live?: boolean
+    busy?: boolean
+    /** Overlay title; empty string leaves the overlay out. */
+    busyTitle?: string
+    busyText?: string
+    note?: string
+    placeholder?: string
+    composerLabel?: string
+    inline?: boolean
+    tools?: Array<'attach' | 'emoji'>
+    hint?: string
+    manual?: boolean
+    me?: string
+    plain?: boolean
+    id?: string
+    onSend?: (text: string) => void | Promise<void>
+  }>(),
+  {
+    title: 'Kitchen worktop: which finish?',
+    project: 'Villa Dewitte',
+    meta: 'Lisa Verbeke → Tom Peeters · 14 Oct 2026',
+    participants: () => [{ initials: 'LV', name: 'Lisa Verbeke' }, { initials: 'TP', name: 'Tom Peeters' }],
+    status: () => ({ label: 'Urgent', variant: 'destructive' }),
+    menu: () => [{ name: 'unread', label: 'Mark as unread' }, { name: 'archive', label: 'Move to archive' }, { separator: true }, { name: 'delete', label: 'Delete conversation', destructive: true }],
+    messages: () => [
+      { divider: 'Tuesday 14 October' },
+      { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:12', datetime: '2026-10-14T09:12', text: 'The supplier dropped off two worktop samples at the workshop. Photo attached.',
+        attachments: [{ kind: 'image', href: '#samples.jpg', alt: 'Two worktop samples on the workbench', art: 6, caption: 'samples.jpg · 2.1 MB' }] },
+      { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:13', datetime: '2026-10-14T09:13', continued: true,
+        html: '<p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p>' },
+      { direction: 'out', avatar: 'TP', time: '09:20', datetime: '2026-10-14T09:20', status: 'read', text: 'Calacatta matt, 20 mm. I\'ll send the updated quote to the client today.',
+        attachments: [{ name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' }], actions: [{ name: 'delete', label: 'Delete this message', destructive: true }] },
+      { divider: 'Today' },
+      { sender: 'Lisa Verbeke', avatar: 'LV', time: '10:02', datetime: '2026-10-24T10:02', text: 'Client signed. Can you confirm the edge profile before 16:00?' },
+    ],
+    scrollLabel: 'Messages',
+    live: true,
+    busyTitle: 'Sending message…',
+    busyText: 'Please wait, do not close this conversation.',
+    placeholder: 'Type your reply…',
+    composerLabel: 'Reply',
+    tools: () => ['attach', 'emoji'],
+    hint: 'Ctrl + Enter to send',
+  },
+)
+const emit = defineEmits<{ menu: [name: string]; tool: [name: 'attach' | 'emoji'] }>()
+const auto = useUid('oc-thread')
+const base = props.id ?? auto
+const list = ref<MessageListItem[]>([...props.messages])
+const sending = ref(false)
+watch(() => props.messages, (m) => (list.value = [...m]))
+const isOut = (m?: MessageListItem): m is MessageData => !!m && !('divider' in m) && m.direction === 'out'
+
+async function send(e: Event) {
+  const form = e.target as HTMLFormElement
+  const field = form.elements.namedItem('message') as HTMLTextAreaElement
+  const text = field.value.trim()
+  if (!text) return
+  sending.value = true
+  try { await props.onSend?.(text) } catch { sending.value = false; return }
+  if (!props.manual) {
+    const l = list.value
+    const mine = props.me ?? [...l].reverse().find(isOut)?.avatar ?? 'Me'
+    list.value = [...l, { direction: 'out', avatar: mine, continued: isOut(l[l.length - 1]), text, time: new Date().toTimeString().slice(0, 5), status: 'sent' }]
+  }
+  field.value = ''
+  sending.value = false
+  field.focus()
+}
+function ctrlEnter(e: KeyboardEvent) {
+  if (e.key !== 'Enter' || !(e.ctrlKey || e.metaKey)) return
+  e.preventDefault()
+  ;(e.currentTarget as HTMLFormElement).requestSubmit()
+}
+</script>
+
+<template>
+  <section :class="['oc-message-thread', plain && 'oc-message-thread--plain']" :aria-labelledby="`${base}-title`" :aria-busy="busy || sending ? 'true' : undefined">
+    <header class="oc-message-thread__header">
+      <slot name="back" />
+      <div class="oc-message-thread__heading">
+        <h3 :id="`${base}-title`" class="oc-message-thread__title">{{ title }}</h3>
+        <p v-if="project || meta" class="oc-message-thread__meta"><strong v-if="project">{{ project }}</strong><template v-if="project && meta"> · </template>{{ meta }}</p>
+      </div>
+      <div v-if="participants.length" class="oc-avatar-group oc-message-thread__people" :aria-label="`${participants.length} participants`">
+        <span v-for="(p, i) in participants" :key="i" class="oc-avatar" :title="p.name">{{ p.initials }}</span>
+      </div>
+      <div v-if="status || menu" class="oc-message-thread__actions">
+        <span v-if="status" :class="['oc-badge', status.variant && `oc-badge--${status.variant}`]">{{ status.label }}</span>
+        <template v-if="menu">
+          <button type="button" class="oc-message-thread__icon-btn" :popovertarget="`${base}-menu`" aria-label="Conversation actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg></button>
+          <div :id="`${base}-menu`" class="oc-dropdown-menu" popover role="menu">
+            <template v-for="(m, i) in menu" :key="i">
+              <div v-if="'separator' in m" class="oc-dropdown-separator" role="separator"></div>
+              <button v-else type="button" :class="['oc-dropdown-item', m.destructive && 'oc-dropdown-item--destructive']" role="menuitem" @click="emit('menu', m.name)">{{ m.label }}</button>
+            </template>
+          </div>
+        </template>
+      </div>
+    </header>
+    <div class="oc-message-thread__scroll" tabindex="0" role="log" :aria-label="scrollLabel" :aria-live="live ? 'polite' : undefined">
+      <OcMessageList :items="list" :log="false" />
+    </div>
+    <div class="oc-message-thread__footer">
+      <p v-if="note" class="oc-message-thread__note">{{ note }}</p>
+      <slot v-else name="composer">
+        <form :class="['oc-chat-composer', inline && 'oc-chat-composer--inline']" action="#" :aria-label="composerLabel" @submit.prevent="send" @keydown="ctrlEnter">
+          <label class="oc-visually-hidden" :for="`${base}-input`">Message</label>
+          <textarea :id="`${base}-input`" class="oc-chat-composer__input" name="message" rows="1" :placeholder="placeholder" required></textarea>
+          <div class="oc-chat-composer__bar">
+            <div v-if="tools.length" class="oc-chat-composer__tools">
+              <button v-if="tools.includes('attach')" type="button" class="oc-chat-composer__tool" aria-label="Attach a file" @click="emit('tool', 'attach')">&#128206;</button>
+              <button v-if="tools.includes('emoji')" type="button" class="oc-chat-composer__tool" aria-label="Insert emoji" @click="emit('tool', 'emoji')">&#128578;</button>
+            </div>
+            <span v-if="hint" class="oc-chat-composer__hint">{{ hint }}</span>
+            <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+          </div>
+        </form>
+      </slot>
+    </div>
+    <div v-if="busyTitle" class="oc-message-thread__busy" role="status">
+      <span class="oc-spinner oc-spinner--lg" aria-hidden="true"></span>
+      <strong>{{ busyTitle }}</strong>
+      <span v-if="busyText">{{ busyText }}</span>
+    </div>
+  </section>
+</template>

package/src/components/OcModal.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Modal on a native <dialog> opened with showModal(). v-model:open controls it; Esc / backdrop /
+ * close() update the model. Slots: header (replaces title + description), default (body),
+ * footer (scoped: { close }). Classes: .oc-modal, .oc-modal-content(--sm/--lg/--xl/--full), -header, -title,
+ * -description, -body, -footer.
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+    closedby?: 'any' | 'closerequest' | 'none'
+  }>(),
+  { size: 'md', closedby: 'any' },
+)
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-modal-title')
+const close = () => (open.value = false)
+defineExpose({ close })
+</script>
+
+<template>
+  <dialog ref="el" class="oc-modal" :closedby="closedby" :aria-labelledby="title ? titleId : undefined" @close="onClose">
+    <div :class="['oc-modal-content', size !== 'md' && `oc-modal-content--${size}`]">
+      <div v-if="title || description || $slots.header" class="oc-modal-header">
+        <slot name="header">
+          <h2 v-if="title" :id="titleId" class="oc-modal-title">{{ title }}</h2>
+          <p v-if="description" class="oc-modal-description">{{ description }}</p>
+        </slot>
+      </div>
+      <div v-if="$slots.default" class="oc-modal-body"><slot /></div>
+      <div v-if="$slots.footer" class="oc-modal-footer"><slot name="footer" :close="close" /></div>
+    </div>
+  </dialog>
+</template>

package/src/components/OcNavmenu.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * Horizontal navigation links with optional dropdown children, wrapped in a <nav>.
+ * Pass `items` (see OcNavmenuList) or put your own <li> elements in the default slot.
+ */
+import OcNavmenuList, { type NavmenuItem } from './OcNavmenuList.vue'
+
+withDefaults(defineProps<{ items?: NavmenuItem[]; label?: string }>(), {
+  items: () => [],
+  label: 'Navigation',
+})
+</script>
+
+<template>
+  <nav :aria-label="label">
+    <OcNavmenuList :items="items"><slot /></OcNavmenuList>
+  </nav>
+</template>

package/src/components/OcNavmenuList.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/**
+ * The <ul class="oc-navmenu"> of the navigation menu, without the surrounding <nav>
+ * (used by OcNavmenu and by blocks that provide their own <nav>).
+ * Pass `items`, or put your own <li> elements in the default slot.
+ * Classes: .oc-navmenu, .oc-navmenu-link(--caret) with aria-current="page"
+ */
+import { useUid } from '../composables/useUid'
+
+export interface NavmenuItem {
+  label: string
+  href?: string
+  current?: boolean
+  /** Dropdown entries; turns the item into a popover trigger. */
+  children?: { label: string; href: string }[]
+  /** Heading inside the dropdown. */
+  heading?: string
+}
+withDefaults(defineProps<{ items?: NavmenuItem[] }>(), { items: () => [] })
+const base = useUid('oc-navmenu')
+</script>
+
+<template>
+  <ul class="oc-navmenu">
+    <slot>
+      <li v-for="(item, i) in items" :key="i">
+        <template v-if="item.children?.length">
+          <button class="oc-navmenu-link oc-navmenu-link--caret" type="button" :popovertarget="`${base}-${i}`">{{ item.label }}</button>
+          <div :id="`${base}-${i}`" class="oc-dropdown-menu" popover>
+            <div v-if="item.heading" class="oc-dropdown-label">{{ item.heading }}</div>
+            <a v-for="child in item.children" :key="child.href + child.label" class="oc-dropdown-item" :href="child.href">{{ child.label }}</a>
+          </div>
+        </template>
+        <a v-else class="oc-navmenu-link" :href="item.href ?? '#'" :aria-current="item.current ? 'page' : undefined">{{ item.label }}</a>
+      </li>
+    </slot>
+  </ul>
+</template>

package/src/components/OcNextTeaser.vue

@@ -0,0 +1,25 @@
+<!-- File: packages/vue/src/components/OcNextTeaser.vue | Map: props -> a.oc-next-teaser -> label -> name (mark slot) -> tagline -->
+<script setup lang="ts">
+/**
+ * "Next product" teaser card. Slots: mark (e.g. an OcProductMark size="sm"), name, tagline.
+ * Classes: .oc-next-teaser (--prev), __label, __name, __tagline
+ */
+withDefaults(
+  defineProps<{
+    href: string
+    label?: string
+    name?: string
+    tagline?: string
+    prev?: boolean
+  }>(),
+  { label: 'Next product' },
+)
+</script>
+
+<template>
+  <a :class="['oc-next-teaser', prev && 'oc-next-teaser--prev']" :href="href">
+    <span v-if="label" class="oc-next-teaser__label">{{ label }}</span>
+    <span class="oc-next-teaser__name"><slot name="mark" /><slot name="name">{{ name }}</slot></span>
+    <span v-if="tagline || $slots.tagline" class="oc-next-teaser__tagline"><slot name="tagline">{{ tagline }}</slot></span>
+  </a>
+</template>