agentation-vue 0.2.0

package/dist/AgentationVue.vue.d.ts

@@ -0,0 +1,27 @@
+import type { Annotation, OutputDetail } from './types';
+type __VLS_Props = {
+    outputDetail?: OutputDetail;
+    markerColor?: string;
+    copyToClipboard?: boolean;
+    blockPageInteractions?: boolean;
+    autoHideToolbar?: boolean;
+    pageUrl?: string;
+    theme?: 'light' | 'dark' | 'auto';
+    activationKey?: 'none' | 'Meta' | 'Alt' | 'Shift';
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    copy: (markdown: string) => any;
+    "annotation-add": (annotation: Annotation) => any;
+    "annotation-delete": (annotation: Annotation) => any;
+    "annotation-update": (annotation: Annotation) => any;
+    "annotations-clear": (annotations: Annotation[]) => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCopy?: ((markdown: string) => any) | undefined;
+    "onAnnotation-add"?: ((annotation: Annotation) => any) | undefined;
+    "onAnnotation-delete"?: ((annotation: Annotation) => any) | undefined;
+    "onAnnotation-update"?: ((annotation: Annotation) => any) | undefined;
+    "onAnnotations-clear"?: ((annotations: Annotation[]) => any) | undefined;
+}>, {
+    copyToClipboard: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AgentationToolbar.d.vue.ts

@@ -0,0 +1,36 @@
+import type { InteractionMode, ToolbarAnchor } from '../types';
+type __VLS_Props = {
+    mode: InteractionMode;
+    annotationCount: number;
+    isPaused: boolean;
+    isAreaMode: boolean;
+    autoHideEnabled: boolean;
+    placement: ToolbarAnchor;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
+    expanded: import("vue-demi").Ref<boolean, boolean>;
+    placement: import("vue-demi").Ref<ToolbarAnchor, ToolbarAnchor>;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    activate: () => any;
+    copy: () => any;
+    clear: () => any;
+    deactivate: () => any;
+    "toggle-pause": () => any;
+    "toggle-area": (value: boolean) => any;
+    "update:placement": (value: ToolbarAnchor) => any;
+    "open-settings": (anchorEl: HTMLElement | null) => any;
+    "drag-start": () => any;
+    "drag-end": () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: (() => any) | undefined;
+    onCopy?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onDeactivate?: (() => any) | undefined;
+    "onToggle-pause"?: (() => any) | undefined;
+    "onToggle-area"?: ((value: boolean) => any) | undefined;
+    "onUpdate:placement"?: ((value: ToolbarAnchor) => any) | undefined;
+    "onOpen-settings"?: ((anchorEl: HTMLElement | null) => any) | undefined;
+    "onDrag-start"?: (() => any) | undefined;
+    "onDrag-end"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AgentationToolbar.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { InteractionMode, ToolbarAnchor } from '../types'
+import { computed, onBeforeUnmount, ref, toRef, watch } from 'vue-demi'
+import { useToolbarAutoHide } from '../composables/useToolbarAutoHide'
+import { useToolbarDragSnap } from '../composables/useToolbarDragSnap'
+import VaIcon from './VaIcon.vue'
+import VaIconButton from './VaIconButton.vue'
+
+const props = defineProps<{
+  mode: InteractionMode
+  annotationCount: number
+  isPaused: boolean
+  isAreaMode: boolean
+  autoHideEnabled: boolean
+  placement: ToolbarAnchor
+}>()
+
+const emit = defineEmits<{
+  'activate': []
+  'deactivate': []
+  'copy': []
+  'clear': []
+  'toggle-pause': []
+  'toggle-area': [value: boolean]
+  'update:placement': [value: ToolbarAnchor]
+  'open-settings': [anchorEl: HTMLElement | null]
+  'drag-start': []
+  'drag-end': []
+}>()
+
+const expanded = ref(false)
+const {
+  placement,
+  isDragging,
+  toolbarStyle,
+  toolbarEl,
+  snapAnchors,
+  activeSnapAnchor,
+  isExpandedDrag,
+  getSnapStyle,
+  onTogglePointerDown,
+  onHandlePointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  consumeToggleClickSuppression,
+  cleanup,
+} = useToolbarDragSnap({
+  expanded,
+  initialPlacement: props.placement,
+  onDragStart: () => emit('drag-start'),
+  onDragEnd: () => emit('drag-end'),
+})
+
+const autoHideEnabled = toRef(props, 'autoHideEnabled')
+const {
+  isAutoHideActive,
+  isAutoHideRevealed,
+  onToolbarPointerEnter,
+  onToolbarPointerLeave,
+  onToolbarPointerDown,
+  onToolbarFocusIn,
+  onToolbarFocusOut,
+} = useToolbarAutoHide({
+  enabled: autoHideEnabled,
+  expanded,
+  isDragging,
+  placement,
+  toolbarEl,
+})
+
+const toolbarClass = computed(() => [
+  `__va-toolbar--place-${placement.value}`,
+  {
+    '__va-toolbar--collapsed': !expanded.value,
+    '__va-toolbar--expanded': expanded.value,
+    '__va-toolbar--dragging': isDragging.value,
+    '__va-toolbar--auto-hide': isAutoHideActive.value,
+    '__va-toolbar--auto-hide-revealed': isAutoHideRevealed.value,
+  },
+])
+
+function onToggleClick() {
+  if (consumeToggleClickSuppression()) {
+    return
+  }
+  onActivate()
+}
+
+function onActivate() {
+  expanded.value = true
+  emit('activate')
+}
+
+function onDeactivate() {
+  expanded.value = false
+  emit('deactivate')
+}
+
+function onClear() {
+  // eslint-disable-next-line no-alert
+  if (confirm('Clear all annotations?'))
+    emit('clear')
+}
+
+function onOpenSettings(e: MouseEvent) {
+  const anchorEl = e.currentTarget instanceof HTMLElement ? e.currentTarget : null
+  emit('open-settings', anchorEl)
+}
+
+onBeforeUnmount(() => {
+  cleanup()
+})
+
+watch(
+  () => props.placement,
+  (value) => {
+    if (placement.value !== value)
+      placement.value = value
+  },
+)
+
+watch(placement, value => emit('update:placement', value))
+
+defineExpose({ expanded, placement })
+</script>
+
+<template>
+  <div class="__va-toolbar-layer" data-agentation-vue>
+    <div v-if="isDragging" class="__va-snap-zones" aria-hidden="true">
+      <div
+        v-for="anchor in snapAnchors"
+        :key="anchor"
+        class="__va-snap-zone"
+        :class="{ '__va-snap-zone--active': activeSnapAnchor === anchor, '__va-snap-zone--rect': isExpandedDrag }"
+        :style="getSnapStyle(anchor)"
+      />
+    </div>
+
+    <div
+      ref="toolbarEl"
+      class="__va-toolbar"
+      :class="toolbarClass"
+      :style="toolbarStyle"
+      @pointerenter="onToolbarPointerEnter"
+      @pointerleave="onToolbarPointerLeave"
+      @pointerdown.capture="onToolbarPointerDown"
+      @focusin="onToolbarFocusIn"
+      @focusout="onToolbarFocusOut"
+    >
+      <div class="__va-toolbar-stage __va-toolbar-stage--toggle" :aria-hidden="expanded">
+        <button
+          type="button"
+          class="__va-toolbar-toggle"
+          aria-label="Appui long pour déplacer"
+          @click="onToggleClick"
+          @pointerdown="onTogglePointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @pointercancel="onPointerCancel"
+        >
+          <VaIcon name="cursor" />
+          <span v-if="annotationCount > 0" class="__va-toolbar-badge">{{ annotationCount }}</span>
+        </button>
+      </div>
+
+      <div class="__va-toolbar-stage __va-toolbar-stage--menu" :aria-hidden="!expanded">
+        <button
+          type="button"
+          class="__va-drag-handle"
+          aria-label="Glisser pour déplacer"
+          @pointerdown="onHandlePointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @pointercancel="onPointerCancel"
+        >
+          <span class="__va-drag-handle-dots" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+            <span />
+          </span>
+        </button>
+
+        <div class="__va-toolbar-sep" />
+
+        <!-- Element selector (default mode) -->
+        <VaIconButton :active="!isAreaMode" title="Element selector" shortcut="V" @click="emit('toggle-area', false)">
+          <VaIcon name="cursor" />
+        </VaIconButton>
+
+        <!-- Area selection -->
+        <VaIconButton :active="isAreaMode" title="Area selection" shortcut="A" @click="emit('toggle-area', true)">
+          <VaIcon name="area-select" />
+        </VaIconButton>
+
+        <div class="__va-toolbar-sep" />
+
+        <!-- Pause animations -->
+        <VaIconButton :active="isPaused" title="Pause animations" shortcut="P" @click="emit('toggle-pause')">
+          <VaIcon v-if="!isPaused" name="pause" />
+          <VaIcon v-else name="play" />
+        </VaIconButton>
+
+        <div class="__va-toolbar-sep" />
+
+        <!-- Copy -->
+        <VaIconButton :disabled="annotationCount === 0" title="Copy annotations" shortcut="C" @click="$emit('copy')">
+          <VaIcon name="copy" />
+        </VaIconButton>
+
+        <!-- Clear -->
+        <VaIconButton :disabled="annotationCount === 0" title="Clear annotations" shortcut="Backspace" @click="onClear">
+          <VaIcon name="trash" />
+        </VaIconButton>
+
+        <div class="__va-toolbar-sep" />
+
+        <!-- Settings -->
+        <VaIconButton title="Settings" @click="onOpenSettings">
+          <VaIcon name="settings" />
+        </VaIconButton>
+
+        <!-- Minimize -->
+        <VaIconButton title="Minimize" shortcut="Esc" @click="onDeactivate">
+          <VaIcon name="close" />
+        </VaIconButton>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/AgentationToolbar.vue.d.ts

@@ -0,0 +1,36 @@
+import type { InteractionMode, ToolbarAnchor } from '../types';
+type __VLS_Props = {
+    mode: InteractionMode;
+    annotationCount: number;
+    isPaused: boolean;
+    isAreaMode: boolean;
+    autoHideEnabled: boolean;
+    placement: ToolbarAnchor;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {
+    expanded: import("vue-demi").Ref<boolean, boolean>;
+    placement: import("vue-demi").Ref<ToolbarAnchor, ToolbarAnchor>;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    activate: () => any;
+    copy: () => any;
+    clear: () => any;
+    deactivate: () => any;
+    "toggle-pause": () => any;
+    "toggle-area": (value: boolean) => any;
+    "update:placement": (value: ToolbarAnchor) => any;
+    "open-settings": (anchorEl: HTMLElement | null) => any;
+    "drag-start": () => any;
+    "drag-end": () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: (() => any) | undefined;
+    onCopy?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onDeactivate?: (() => any) | undefined;
+    "onToggle-pause"?: (() => any) | undefined;
+    "onToggle-area"?: ((value: boolean) => any) | undefined;
+    "onUpdate:placement"?: ((value: ToolbarAnchor) => any) | undefined;
+    "onOpen-settings"?: ((anchorEl: HTMLElement | null) => any) | undefined;
+    "onDrag-start"?: (() => any) | undefined;
+    "onDrag-end"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AnnotationInput.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    position: {
+        x: number;
+        y: number;
+    };
+    elementName?: string;
+    componentChain?: string;
+    computedStyles?: Record<string, string>;
+    initialComment?: string;
+    isEditing?: boolean;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    cancel: () => any;
+    add: (comment: string) => any;
+    delete: () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onAdd?: ((comment: string) => any) | undefined;
+    onDelete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AnnotationInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue-demi'
+import ComponentChain from './ComponentChain.vue'
+import VaButton from './VaButton.vue'
+import VaIcon from './VaIcon.vue'
+
+const props = defineProps<{
+  position: { x: number, y: number }
+  elementName?: string
+  componentChain?: string
+  computedStyles?: Record<string, string>
+  initialComment?: string
+  isEditing?: boolean
+}>()
+
+const emit = defineEmits<{
+  add: [comment: string]
+  cancel: []
+  delete: []
+}>()
+
+const comment = ref(props.initialComment || '')
+const inputEl = ref<HTMLInputElement | null>(null)
+const computedStyleEntries = computed(() => Object.entries(props.computedStyles || {}))
+
+const inputStyle = computed(() => {
+  const x = Math.min(props.position.x, window.innerWidth - 380)
+  const y = Math.min(props.position.y + 20, window.innerHeight - 150)
+  return {
+    left: `${Math.max(10, x)}px`,
+    top: `${Math.max(10, y)}px`,
+  }
+})
+
+function onAdd() {
+  const text = comment.value.trim()
+  if (!text)
+    return
+  emit('add', text)
+}
+
+onMounted(() => {
+  inputEl.value?.focus()
+})
+</script>
+
+<template>
+  <div
+    class="__va-input"
+    :style="inputStyle"
+    data-agentation-vue
+    @click.stop
+    @mousedown.stop
+  >
+    <details
+      v-if="computedStyleEntries.length > 0"
+      class="__va-input-styles"
+      @click.stop
+      @mousedown.stop
+    >
+      <summary class="__va-input-styles-summary">
+        <ComponentChain v-if="componentChain" :chain="componentChain" variant="light" truncate="leaf" />
+        <span v-else class="__va-input-styles-element">{{ elementName || 'Annotation' }}</span>
+      </summary>
+      <div class="__va-input-styles-block">
+        <div
+          v-for="[prop, value] in computedStyleEntries"
+          :key="prop"
+          class="__va-input-style-line"
+        >
+          <span class="__va-input-style-prop">{{ prop }}</span>: <span class="__va-input-style-value">{{ value }}</span>;
+        </div>
+      </div>
+    </details>
+    <div v-else-if="componentChain" class="__va-input-chain">
+      <ComponentChain :chain="componentChain" variant="light" truncate="leaf" />
+    </div>
+    <span v-else class="__va-input-label">{{ elementName || 'Annotation' }}</span>
+    <input
+      ref="inputEl"
+      v-model="comment"
+      placeholder="Add a comment..."
+      @keydown.enter="onAdd"
+      @keydown.escape="$emit('cancel')"
+    >
+    <div class="__va-input-actions">
+      <button
+        v-if="isEditing"
+        class="__va-input-delete-btn"
+        type="button"
+        @click="$emit('delete')"
+      >
+        <VaIcon name="trash" />
+      </button>
+      <div class="__va-input-actions-right">
+        <VaButton variant="secondary" @click="$emit('cancel')">
+          Cancel
+        </VaButton>
+        <VaButton :disabled="!comment.trim()" @click="onAdd">
+          {{ isEditing ? 'Save' : 'Add' }}
+        </VaButton>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/AnnotationInput.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    position: {
+        x: number;
+        y: number;
+    };
+    elementName?: string;
+    componentChain?: string;
+    computedStyles?: Record<string, string>;
+    initialComment?: string;
+    isEditing?: boolean;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    cancel: () => any;
+    add: (comment: string) => any;
+    delete: () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onAdd?: ((comment: string) => any) | undefined;
+    onDelete?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AnnotationMarker.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    number: number;
+    x: number;
+    y: number;
+    isFixed?: boolean;
+    isStale?: boolean;
+    isPending?: boolean;
+    isSelection?: boolean;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/AnnotationMarker.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue-demi'
+import VaIcon from './VaIcon.vue'
+
+const props = defineProps<{
+  number: number
+  x: number
+  y: number
+  isFixed?: boolean
+  isStale?: boolean
+  isPending?: boolean
+  isSelection?: boolean
+}>()
+
+defineEmits<{
+  click: []
+}>()
+
+const markerStyle = computed(() => ({
+  left: `${props.x}%`,
+  top: `${props.y}px`,
+}))
+</script>
+
+<template>
+  <div
+    class="__va-marker"
+    :class="{
+      '__va-marker--fixed': isFixed,
+      '__va-marker--stale': isStale,
+      '__va-marker--pending': isPending,
+      '__va-marker--selection': isSelection,
+    }"
+    :style="markerStyle"
+    data-agentation-vue
+    @click.stop="$emit('click')"
+  >
+    <template v-if="isPending">
+      <VaIcon name="plus" class="__va-marker-plus" />
+    </template>
+    <template v-else>
+      <span class="__va-marker-number">{{ number }}</span>
+      <VaIcon name="pencil" class="__va-marker-pencil" />
+    </template>
+  </div>
+</template>

package/dist/components/AnnotationMarker.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    number: number;
+    x: number;
+    y: number;
+    isFixed?: boolean;
+    isStale?: boolean;
+    isPending?: boolean;
+    isSelection?: boolean;
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ComponentChain.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    chain: string;
+    variant?: 'dark' | 'light';
+    truncate?: 'none' | 'auto' | 'leaf';
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "dark" | "light";
+    truncate: "none" | "auto" | "leaf";
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/ComponentChain.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue-demi'
+
+const props = withDefaults(defineProps<{
+  chain: string
+  variant?: 'dark' | 'light'
+  truncate?: 'none' | 'auto' | 'leaf'
+}>(), {
+  variant: 'light',
+  truncate: 'none',
+})
+
+const TRUNCATE_THRESHOLD = 4
+
+const components = computed(() => props.chain.split(' > '))
+const shouldTruncate = computed(() => components.value.length >= TRUNCATE_THRESHOLD)
+
+// For 'auto' mode: first + ellipsis + last 2
+const autoTruncated = computed(() => {
+  if (!shouldTruncate.value)
+    return components.value
+  const all = components.value
+  return [all[0], null, all[all.length - 2], all[all.length - 1]] as (string | null)[]
+})
+
+// For 'leaf' mode
+const leafExpanded = ref(false)
+</script>
+
+<template>
+  <!-- Mode: 'auto' — automatic breadcrumb collapse for hover labels -->
+  <span
+    v-if="truncate === 'auto'"
+    class="__va-comp-chain"
+    :class="`__va-comp-chain--${variant}`"
+  >
+    <template v-if="shouldTruncate">
+      <span
+        v-for="(comp, i) in autoTruncated"
+        :key="i"
+        :class="comp === null ? '__va-comp-ellipsis' : '__va-comp'"
+      >
+        <template v-if="comp === null">&hellip;</template>
+        <template v-else><span class="__va-comp-bracket">&lt;</span>{{ comp }}<span class="__va-comp-bracket">&gt;</span></template>
+      </span>
+    </template>
+    <template v-else>
+      <span v-for="comp in components" :key="comp" class="__va-comp">
+        <span class="__va-comp-bracket">&lt;</span>{{ comp }}<span class="__va-comp-bracket">&gt;</span>
+      </span>
+    </template>
+  </span>
+
+  <!-- Mode: 'leaf' — collapsed breadcrumb with click-to-expand -->
+  <span
+    v-else-if="truncate === 'leaf'"
+    class="__va-comp-chain"
+    :class="[
+      `__va-comp-chain--${variant}`,
+      shouldTruncate ? '__va-comp-chain--collapsible' : '',
+    ]"
+    @click.stop="shouldTruncate ? (leafExpanded = !leafExpanded) : undefined"
+  >
+    <template v-if="!shouldTruncate || leafExpanded">
+      <span v-for="comp in components" :key="comp" class="__va-comp">
+        <span class="__va-comp-bracket">&lt;</span>{{ comp }}<span class="__va-comp-bracket">&gt;</span>
+      </span>
+    </template>
+    <template v-else>
+      <span
+        v-for="(comp, i) in autoTruncated"
+        :key="i"
+        :class="comp === null ? '__va-comp-ellipsis' : '__va-comp'"
+      >
+        <template v-if="comp === null">&hellip;</template>
+        <template v-else><span class="__va-comp-bracket">&lt;</span>{{ comp }}<span class="__va-comp-bracket">&gt;</span></template>
+      </span>
+    </template>
+  </span>
+
+  <!-- Mode: 'none' (default) — full chain -->
+  <span
+    v-else
+    class="__va-comp-chain"
+    :class="`__va-comp-chain--${variant}`"
+  >
+    <span v-for="comp in components" :key="comp" class="__va-comp">
+      <span class="__va-comp-bracket">&lt;</span>{{ comp }}<span class="__va-comp-bracket">&gt;</span>
+    </span>
+  </span>
+</template>

package/dist/components/ComponentChain.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    chain: string;
+    variant?: 'dark' | 'light';
+    truncate?: 'none' | 'auto' | 'leaf';
+};
+declare const _default: import("vue-demi").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "dark" | "light";
+    truncate: "none" | "auto" | "leaf";
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, false, {}, any>;
+export default _default;