@linto-ai/transcript-ui-ui 0.9.0

package/src/atoms/MarkdownView.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { renderMarkdownSegments } from "../utils/markdown"
+import CodeBlock from "./CodeBlock.vue"
+
+const props = defineProps<{
+  source: string
+  streaming?: boolean
+}>()
+
+const segments = computed(() => renderMarkdownSegments(props.source))
+</script>
+
+<template>
+  <div class="markdown-view">
+    <template v-for="(seg, i) in segments" :key="i">
+      <div
+        v-if="seg.type === 'html'"
+        class="markdown-view__html"
+        v-html="seg.html" />
+      <CodeBlock
+        v-else
+        :code="seg.code"
+        :lang="seg.lang"
+        :streaming="streaming" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.markdown-view {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height);
+  color: var(--color-text-primary);
+}
+
+/* No box: block children flow as direct children of .markdown-view so margin
+   collapsing keeps working across html/code segment boundaries. */
+.markdown-view__html {
+  display: contents;
+}
+
+/* Trim the outer margins of the first/last rendered block (reach through the
+   display:contents wrapper to the real content element). */
+.markdown-view > .markdown-view__html:first-child > :deep(:first-child) {
+  margin-top: 0;
+}
+
+.markdown-view > .markdown-view__html:last-child > :deep(:last-child) {
+  margin-bottom: 0;
+}
+
+.markdown-view :deep(h1),
+.markdown-view :deep(h2),
+.markdown-view :deep(h3),
+.markdown-view :deep(h4) {
+  margin: var(--spacing-lg) 0 var(--spacing-sm);
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.markdown-view :deep(h1) {
+  font-size: var(--font-size-xl);
+}
+
+.markdown-view :deep(h2) {
+  font-size: var(--font-size-lg);
+}
+
+.markdown-view :deep(h3) {
+  font-size: var(--font-size-base);
+}
+
+.markdown-view :deep(h4) {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-secondary);
+}
+
+.markdown-view :deep(p) {
+  margin: 0 0 var(--spacing-md);
+}
+
+.markdown-view :deep(ul),
+.markdown-view :deep(ol) {
+  margin: 0 0 var(--spacing-md);
+  padding-left: var(--spacing-lg);
+}
+
+.markdown-view :deep(li) {
+  margin: var(--spacing-xs) 0;
+}
+
+.markdown-view :deep(blockquote) {
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-left: 3px solid var(--color-border);
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+/* Inline code only — fenced blocks render via <CodeBlock>. Scoped to the html
+   wrapper so it never reaches into the CodeBlock component. */
+.markdown-view__html :deep(code) {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  padding: 1px 4px;
+  background-color: var(--color-surface);
+  border-radius: var(--radius-sm);
+}
+
+/* Fallback for raw <pre> written as literal HTML (not fenced code). */
+.markdown-view__html :deep(pre) {
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-md);
+  background-color: var(--color-surface);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+}
+
+.markdown-view__html :deep(pre code) {
+  padding: 0;
+  background: none;
+}
+
+.markdown-view :deep(a) {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.markdown-view :deep(hr) {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--spacing-lg) 0;
+}
+
+.markdown-view :deep(strong) {
+  font-weight: 700;
+}
+
+.markdown-view :deep(table) {
+  border-collapse: collapse;
+  margin: var(--spacing-md) 0;
+}
+
+.markdown-view :deep(th),
+.markdown-view :deep(td) {
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.markdown-view :deep(th) {
+  background-color: var(--color-surface);
+  font-weight: 600;
+}
+</style>

package/src/atoms/PopoverList.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts" generic="T">
+import { computed, ref } from "vue"
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "reka-ui"
+
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    itemKey?: (item: T) => string | number
+    isCurrent?: (item: T) => boolean
+    align?: "start" | "center" | "end"
+    side?: "top" | "right" | "bottom" | "left"
+    sideOffset?: number
+    open?: boolean
+  }>(),
+  {
+    align: "start",
+    side: "bottom",
+    sideOffset: 4,
+    open: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  select: [item: T]
+  "update:open": [value: boolean]
+}>()
+
+const internalOpen = ref(false)
+const resolvedOpen = computed({
+  get: () => {
+    // Controlled: honour the bound `open` prop; uncontrolled: use internal state.
+    if (props.open !== undefined) {
+      return props.open
+    }
+    return internalOpen.value
+  },
+  set: (v) => {
+    internalOpen.value = v
+    emit("update:open", v)
+  },
+})
+
+defineSlots<{
+  trigger?: () => unknown
+  item: (slotProps: { item: T }) => unknown
+  footer?: () => unknown
+}>()
+
+function keyFor(item: T, index: number): string | number {
+  return props.itemKey ? props.itemKey(item) : index
+}
+</script>
+
+<template>
+  <DropdownMenuRoot v-model:open="resolvedOpen">
+    <DropdownMenuTrigger as-child>
+      <slot name="trigger" />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal disabled>
+      <DropdownMenuContent
+        class="popover-list"
+        position-strategy="absolute"
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset">
+        <ul v-if="items.length > 0" class="popover-list__items">
+          <DropdownMenuItem
+            v-for="(item, index) in items"
+            :key="keyFor(item, index)"
+            as="li"
+            class="popover-list__item"
+            :class="{ 'popover-list__item--current': isCurrent?.(item) }"
+            @select="emit('select', item)">
+            <slot name="item" :item="item" />
+          </DropdownMenuItem>
+        </ul>
+        <template v-if="$slots.footer">
+          <div v-if="items.length > 0" class="popover-list__divider" />
+          <div class="popover-list__footer">
+            <slot name="footer" />
+          </div>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

package/src/atoms/SelectableListItem.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Marks the row as selected — sets aria-current and the active style. */
+    current?: boolean
+    disabled?: boolean
+    /** Convenience for a plain text label (or use the default slot). */
+    label?: string
+    size?: "sm" | "md"
+  }>(),
+  { size: "md" },
+)
+
+const emit = defineEmits<{
+  select: []
+}>()
+</script>
+
+<template>
+  <!-- Row owns the background so the selectable button AND the trailing
+       actions share the same hover / selected surface. -->
+  <div
+    class="selectable-list-item"
+    :class="[
+      `selectable-list-item--${size}`,
+      { 'selectable-list-item--current': current },
+    ]">
+    <button
+      type="button"
+      class="selectable-list-item__main"
+      :disabled="disabled"
+      :aria-current="current ? 'true' : undefined"
+      @click="emit('select')">
+      <span v-if="$slots.leading" class="selectable-list-item__leading">
+        <slot name="leading" />
+      </span>
+      <span class="selectable-list-item__label">
+        <slot>{{ label }}</slot>
+      </span>
+      <span v-if="$slots.trailing" class="selectable-list-item__trailing">
+        <slot name="trailing" />
+      </span>
+    </button>
+
+    <!-- Absolutely positioned: no flow space taken (label keeps full width),
+         revealed on hover / keyboard focus, overlaying the row surface. -->
+    <div v-if="$slots.actions" class="selectable-list-item__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.selectable-list-item {
+  position: relative;
+  display: flex;
+  border: 1px solid transparent;
+  transition:
+    background-color var(--transition-duration),
+    box-shadow var(--transition-duration);
+}
+
+.selectable-list-item--md {
+  font-size: var(--font-size-sm);
+}
+
+.selectable-list-item--sm {
+  font-size: var(--font-size-xs);
+}
+
+.selectable-list-item:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.selectable-list-item--current,
+.selectable-list-item--current:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  box-shadow: inset 2px 0 0 var(--color-primary);
+}
+
+/* ── The selectable button ── */
+.selectable-list-item__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background: none;
+  border: none;
+  font: inherit;
+  color: var(--color-text-primary);
+  text-align: left;
+  cursor: pointer;
+}
+
+.selectable-list-item--md .selectable-list-item__main {
+  padding: var(--spacing-sm);
+}
+
+.selectable-list-item--sm .selectable-list-item__main {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--color-text-secondary);
+}
+
+.selectable-list-item__main:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.selectable-list-item__main:disabled {
+  cursor: not-allowed;
+}
+
+.selectable-list-item--current .selectable-list-item__main {
+  color: var(--color-primary);
+  font-weight: 600;
+}
+
+.selectable-list-item__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.selectable-list-item__leading,
+.selectable-list-item__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Trailing content (hints, dates) stays muted even on the active row. */
+.selectable-list-item__trailing {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* ── Trailing actions (hover / focus reveal, overlaying the row) ── */
+.selectable-list-item__actions {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-inline: var(--spacing-md) var(--spacing-xs);
+  /* Fade the label out behind the actions, matching the row surface. */
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--color-surface-hover) var(--spacing-md)
+  );
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-duration);
+}
+
+.selectable-list-item:hover .selectable-list-item__actions,
+.selectable-list-item:focus-within .selectable-list-item__actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Match the fade to the selected surface on the active row. */
+.selectable-list-item--current .selectable-list-item__actions {
+  background: linear-gradient(
+    to right,
+    transparent,
+    color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-hover))
+      var(--spacing-md)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .selectable-list-item,
+  .selectable-list-item__actions {
+    transition: none;
+  }
+}
+</style>

package/src/atoms/SpeakerIndicator.vue

@@ -0,0 +1,19 @@
+<template>
+  <span class="speaker-indicator" :style="{ backgroundColor: color }" aria-hidden="true" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  color: string
+}>()
+</script>
+
+<style scoped>
+.speaker-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+</style>

package/src/atoms/SwitchToggle.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  id?: string
+  disabled?: boolean
+}>(), {
+  id: undefined,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const inputId = props.id ?? useId()
+</script>
+
+<template>
+  <div class="switch">
+    <input
+      type="checkbox"
+      :id="inputId"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+    <label :for="inputId">
+      <div class="switch-slider"></div>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.switch {
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.switch input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.switch label {
+  height: 20px;
+  width: 40px;
+  display: block;
+  border: 1px solid var(--color-border);
+  border-radius: 20px;
+  cursor: pointer;
+  background-color: var(--color-border);
+  transition: background-color var(--transition-duration);
+}
+
+.switch .switch-slider {
+  height: 22px;
+  width: 22px;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  position: relative;
+  top: -2px;
+  left: -2px;
+  background-color: var(--color-white);
+  transition: left var(--transition-duration);
+}
+
+.switch input:checked + label {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.switch input:checked + label .switch-slider {
+  left: 20px;
+  border-color: var(--color-primary);
+}
+
+.switch input:disabled + label {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>

package/src/atoms/UserAvatar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { computeInitials } from "../utils/computeInitials"
+
+// Initials avatar for a user (not a speaker — speakers have SpeakerIndicator).
+// The full name shows on hover (native tooltip) and to assistive tech; pass
+// `label` when the context needs a richer sentence than the bare name.
+const props = defineProps<{
+  name: string
+  label?: string
+}>()
+
+const initials = computed(() => computeInitials(props.name))
+const title = computed(() => props.label ?? props.name)
+</script>
+
+<template>
+  <span class="user-avatar" role="img" :title="title" :aria-label="title">{{
+    initials
+  }}</span>
+</template>
+
+<style scoped>
+.user-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  user-select: none;
+  cursor: default;
+}
+</style>

package/src/atoms/icons.ts

@@ -0,0 +1,108 @@
+import type { Component } from "vue"
+import {
+  AlertTriangle,
+  ArrowDown,
+  Bold,
+  Check,
+  ChevronDown,
+  ClipboardList,
+  ClipboardType,
+  Code,
+  Code2,
+  Copy,
+  Download,
+  FileText,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  List,
+  ListOrdered,
+  Loader2,
+  Maximize,
+  Merge,
+  Minimize,
+  Table as TableIcon,
+  MessageCircle,
+  MoreVertical,
+  Pause,
+  Pencil,
+  Play,
+  Plus,
+  Quote,
+  Redo2,
+  RefreshCw,
+  Save,
+  SendHorizontal,
+  Settings,
+  SkipBack,
+  SkipForward,
+  Sparkles,
+  Trash2,
+  Undo2,
+  UserPlus,
+  Users,
+  Volume2,
+  VolumeX,
+  X,
+} from "lucide-vue-next"
+
+export const iconMap: Record<string, Component> = {
+  "arrow-down": ArrowDown,
+  warning: AlertTriangle,
+  bold: Bold,
+  check: Check,
+  "chevron-down": ChevronDown,
+  "clipboard-list": ClipboardList,
+  "clipboard-type": ClipboardType,
+  code: Code,
+  "code-block": Code2,
+  copy: Copy,
+  download: Download,
+  "heading-1": Heading1,
+  "heading-2": Heading2,
+  "heading-3": Heading3,
+  italic: Italic,
+  list: List,
+  "list-ordered": ListOrdered,
+  maximize: Maximize,
+  merge: Merge,
+  minimize: Minimize,
+  pause: Pause,
+  play: Play,
+  quote: Quote,
+  redo: Redo2,
+  table: TableIcon,
+  save: Save,
+  settings: Settings,
+  "skip-back": SkipBack,
+  "skip-forward": SkipForward,
+  undo: Undo2,
+  users: Users,
+  volume: Volume2,
+  "volume-mute": VolumeX,
+  x: X,
+  "circle-notch": Loader2,
+  spinner: Loader2,
+  "more-vertical": MoreVertical,
+  "user-plus": UserPlus,
+  plus: Plus,
+  pencil: Pencil,
+  trash: Trash2,
+  send: SendHorizontal,
+  "file-text": FileText,
+  "message-circle": MessageCircle,
+  "refresh-cw": RefreshCw,
+  sparkles: Sparkles,
+}
+
+export function resolveIcon(name?: string): Component | undefined {
+  if (!name) return undefined
+  return iconMap[name]
+}
+
+export const ICON_SIZES: Record<"sm" | "md" | "lg", number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+}