@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcLinkArrow.vue

@@ -1,25 +1,25 @@
-<!-- File: packages/vue/src/components/OcLinkArrow.vue | Map: props (direction, tone, size) -> a.oc-link-arrow -->
-<script setup lang="ts">
-/** Text link with a moving arrow. Classes: .oc-link-arrow + --back/--external, --accent/--muted, --sm/--lg */
-withDefaults(
-  defineProps<{
-    href: string
-    direction?: 'forward' | 'back' | 'external'
-    tone?: 'default' | 'accent' | 'muted'
-    size?: 'sm' | 'default' | 'lg'
-  }>(),
-  { direction: 'forward', tone: 'default', size: 'default' },
-)
-</script>
-
-<template>
-  <a
-    :class="[
-      'oc-link-arrow',
-      direction !== 'forward' && `oc-link-arrow--${direction}`,
-      tone !== 'default' && `oc-link-arrow--${tone}`,
-      size !== 'default' && `oc-link-arrow--${size}`,
-    ]"
-    :href="href"
-  ><slot /></a>
-</template>
+<!-- File: packages/vue/src/components/OcLinkArrow.vue | Map: props (direction, tone, size) -> a.oc-link-arrow -->
+<script setup lang="ts">
+/** Text link with a moving arrow. Classes: .oc-link-arrow + --back/--external, --accent/--muted, --sm/--lg */
+withDefaults(
+  defineProps<{
+    href: string
+    direction?: 'forward' | 'back' | 'external'
+    tone?: 'default' | 'accent' | 'muted'
+    size?: 'sm' | 'default' | 'lg'
+  }>(),
+  { direction: 'forward', tone: 'default', size: 'default' },
+)
+</script>
+
+<template>
+  <a
+    :class="[
+      'oc-link-arrow',
+      direction !== 'forward' && `oc-link-arrow--${direction}`,
+      tone !== 'default' && `oc-link-arrow--${tone}`,
+      size !== 'default' && `oc-link-arrow--${size}`,
+    ]"
+    :href="href"
+  ><slot /></a>
+</template>

package/src/components/OcListToolbar.vue

@@ -1,44 +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>
+<!-- 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

@@ -1,36 +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>
+<!-- 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

@@ -1,28 +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>
+<!-- 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

@@ -1,28 +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>
+<!-- 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

@@ -1,38 +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>
+<!-- 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

@@ -1,91 +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>
+<!-- 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>