@linto-ai/transcript-ui-ui 0.9.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@linto-ai/transcript-ui-ui",
+  "version": "0.9.0",
+  "description": "Design-system components and CSS tokens for @linto-ai/transcript-ui",
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "ui-kit",
+    "linto"
+  ],
+  "sideEffects": [
+    "**/*.vue",
+    "**/*.css"
+  ],
+  "homepage": "https://github.com/linto-ai/linto-studio",
+  "bugs": "https://github.com/linto-ai/linto-studio/issues",
+  "author": "Tom Darboux <tdarboux@linagora.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/linto-ai/linto-studio.git",
+    "directory": "studio-sdk/components/transcript-ui/packages/ui"
+  },
+  "type": "module",
+  "license": "AGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles/*": "./src/styles/*"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@linto-ai/transcript-ui-i18n": "0.9.0",
+    "dompurify": "^3.2.4",
+    "lucide-vue-next": "^0.564.0",
+    "marked": "^18.0.2",
+    "prismjs": "^1.30.0",
+    "reka-ui": "^2.8.0",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2"
+  },
+  "devDependencies": {
+    "@types/prismjs": "^1.26.6",
+    "@types/turndown": "^5.0.6"
+  }
+}

package/src/atoms/Badge.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  ariaLabel?: string
+}>()
+</script>
+
+<template>
+  <span class="editor-badge" :aria-label="ariaLabel">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.editor-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--spacing-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--color-text-muted);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+</style>

package/src/atoms/Button.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import EditorIcon from "./EditorIcon.vue"
+import { resolveIcon, ICON_SIZES } from "./icons"
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    icon?: string
+    iconRight?: string
+    variant?: "primary" | "secondary" | "tertiary" | "transparent" | "inverse"
+    intent?: "default" | "destructive"
+    size?: "sm" | "md" | "lg"
+    disabled?: boolean
+    loading?: boolean
+    block?: boolean
+    type?: "button" | "submit"
+    ariaLabel?: string
+  }>(),
+  {
+    variant: "tertiary",
+    intent: "default",
+    size: "sm",
+    disabled: false,
+    loading: false,
+    block: false,
+    type: "button",
+  },
+)
+
+const slots = useSlots()
+
+const hasResolvedIcon = computed(() => !!resolveIcon(props.icon))
+const hasResolvedIconRight = computed(() => !!resolveIcon(props.iconRight))
+const iconSize = computed(() => ICON_SIZES[props.size])
+
+const isDisabled = computed(() => props.disabled || props.loading)
+const hasLabel = computed(() => !!props.label || !!slots.default)
+const hasLeftIcon = computed(
+  () => props.loading || hasResolvedIcon.value || !!slots.icon,
+)
+const isIconOnly = computed(() => hasLeftIcon.value && !hasLabel.value)
+
+const classes = computed(() => [
+  "editor-btn",
+  `editor-btn--${props.variant}`,
+  `editor-btn--${props.intent}`,
+  `editor-btn--${props.size}`,
+  isIconOnly.value && "editor-btn--icon-only",
+  props.block && "editor-btn--block",
+])
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="classes"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    :aria-label="ariaLabel">
+    <EditorIcon v-if="loading" name="spinner" spin :size="iconSize" />
+    <EditorIcon v-else-if="hasResolvedIcon" :name="icon!" :size="iconSize" />
+    <slot v-else-if="$slots.icon" name="icon" />
+    <span v-if="hasLabel" class="editor-btn__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <EditorIcon
+      v-if="hasResolvedIconRight"
+      :name="iconRight!"
+      :size="iconSize" />
+    <slot v-else-if="$slots['icon-right']" name="icon-right" />
+  </button>
+</template>
+
+<style scoped>
+.editor-btn {
+  /* Default tokens — overridden by variant/intent/size modifiers */
+  --btn-bg: transparent;
+  --btn-text: var(--color-text-secondary);
+  --btn-border-color: var(--color-border);
+  --btn-hover-bg: var(--color-surface-hover);
+  --btn-hover-text: var(--color-text-primary);
+  --btn-padding-y: 0;
+  --btn-padding-x: var(--spacing-sm);
+  --btn-font-size: var(--font-size-xs);
+  --btn-height: 32px;
+  --btn-gap: var(--spacing-xs);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--btn-gap);
+  box-sizing: border-box;
+  height: var(--btn-height);
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+  font-family: var(--font-family);
+  font-size: var(--btn-font-size);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--btn-text);
+  background-color: var(--btn-bg);
+  border: 1px solid var(--btn-border-color);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color var(--transition-duration),
+    color var(--transition-duration),
+    border-color var(--transition-duration);
+}
+
+.editor-btn:hover:not(:disabled) {
+  background-color: var(--btn-hover-bg);
+  color: var(--btn-hover-text);
+}
+
+.editor-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Note: this rule is repeated lower in the file (after variants) to win the
+   cascade on the variant CSS vars. Keep this lightweight version for the
+   cursor and hover suppression. */
+.editor-btn:disabled {
+  cursor: not-allowed;
+}
+
+.editor-btn:disabled:hover {
+  background-color: var(--btn-bg);
+  color: var(--btn-text);
+}
+
+.editor-btn__label {
+  /* //overflow: hidden;
+  text-overflow: ellipsis; */
+  text-overflow: ellipsis;
+  text-box: cap alphabetic;
+}
+
+/* Sizes */
+.editor-btn--sm {
+  /* defaults */
+}
+
+.editor-btn--md {
+  --btn-padding-y: 0;
+  --btn-padding-x: var(--spacing-md);
+  --btn-font-size: var(--font-size-sm);
+  --btn-height: 40px;
+}
+
+.editor-btn--lg {
+  --btn-padding-y: 0;
+  --btn-padding-x: var(--spacing-md);
+  --btn-font-size: var(--font-size-base);
+  --btn-height: 44px;
+}
+
+/* Icon-only: square */
+.editor-btn--icon-only {
+  width: var(--btn-height);
+  padding: 0;
+}
+
+.editor-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+/* Variants — default intent */
+.editor-btn--primary {
+  --btn-bg: var(--color-primary);
+  --btn-text: var(--color-white);
+  --btn-border-color: var(--color-primary);
+  --btn-hover-bg: var(--color-primary-hover);
+  --btn-hover-text: var(--color-white);
+}
+
+.editor-btn--secondary {
+  --btn-bg: transparent;
+  --btn-text: var(--color-primary);
+  --btn-border-color: var(--color-primary);
+  --btn-hover-bg: var(--color-primary);
+  --btn-hover-text: var(--color-white);
+}
+
+.editor-btn--tertiary {
+  --btn-bg: transparent;
+  --btn-text: var(--color-text-primary);
+  --btn-border-color: var(--color-border);
+  --btn-hover-bg: var(--color-surface-hover);
+  --btn-hover-text: var(--color-text-primary);
+}
+
+.editor-btn--transparent {
+  --btn-bg: transparent;
+  --btn-text: var(--color-text-secondary);
+  --btn-border-color: transparent;
+  --btn-hover-bg: var(--color-surface-hover);
+  --btn-hover-text: var(--color-text-primary);
+}
+
+/* Literal theme inversion: background = the theme's text color and
+   vice-versa — high contrast in both light and dark themes without
+   borrowing the primary color's semantics. */
+.editor-btn--inverse {
+  --btn-bg: var(--color-text-primary);
+  --btn-text: var(--color-background);
+  --btn-border-color: transparent;
+  --btn-hover-bg: var(--color-text-secondary);
+  --btn-hover-text: var(--color-background);
+}
+
+/* Destructive intent overrides */
+.editor-btn--destructive.editor-btn--primary {
+  --btn-bg: var(--color-danger);
+  --btn-text: var(--color-white);
+  --btn-border-color: var(--color-danger);
+  --btn-hover-bg: var(--color-danger-hover);
+  --btn-hover-text: var(--color-white);
+}
+
+.editor-btn--destructive.editor-btn--secondary {
+  --btn-bg: transparent;
+  --btn-text: var(--color-danger);
+  --btn-border-color: var(--color-danger);
+  --btn-hover-bg: var(--color-danger);
+  --btn-hover-text: var(--color-white);
+}
+
+.editor-btn--destructive.editor-btn--tertiary,
+.editor-btn--destructive.editor-btn--transparent {
+  --btn-text: var(--color-danger);
+  --btn-hover-bg: var(--color-danger-soft);
+  --btn-hover-text: var(--color-danger);
+}
+
+/* Disabled: gray-out regardless of variant. Placed after the variants so the
+   CSS var overrides win the cascade (same specificity, last declaration). */
+.editor-btn:disabled {
+  --btn-bg: var(--color-surface);
+  --btn-text: var(--color-text-muted);
+  --btn-border-color: var(--color-border);
+  --btn-hover-bg: var(--color-surface);
+  --btn-hover-text: var(--color-text-muted);
+}
+
+/* The transparent variant has no chrome when enabled — disabling it must not
+   ADD a box; the muted text alone carries the disabled signal. */
+.editor-btn--transparent:disabled {
+  --btn-bg: transparent;
+  --btn-border-color: transparent;
+  --btn-hover-bg: transparent;
+}
+
+/* Inverse stays a filled, borderless chip when disabled — dimmed, but the
+   silhouette must not change. */
+.editor-btn--inverse:disabled {
+  --btn-bg: var(--color-surface-hover);
+  --btn-border-color: transparent;
+  --btn-hover-bg: var(--color-surface-hover);
+}
+</style>

package/src/atoms/CodeBlock.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import CopyButton from "./CopyButton.vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+const props = defineProps<{
+  code: string
+  lang?: string
+  streaming?: boolean
+}>()
+
+const { t } = useI18n()
+
+function copy() {
+  return navigator.clipboard.writeText(props.code)
+}
+
+// Highlighted token markup, or null to render plain text (streaming, unknown
+// language, or before the lazy highlighter chunk has loaded).
+const highlighted = ref<string | null>(null)
+let seq = 0
+
+watch(
+  () => [props.code, props.lang, props.streaming] as const,
+  async ([code, lang, streaming]) => {
+    const run = ++seq
+    if (streaming || !code) {
+      highlighted.value = null
+      return
+    }
+    const { highlightCode } = await import("../utils/highlight")
+    // Drop the result if another change superseded this run while awaiting.
+    if (run === seq) highlighted.value = highlightCode(code, lang ?? "")
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="code-block">
+    <CopyButton
+      v-if="!streaming"
+      class="code-block__copy"
+      variant="transparent"
+      size="sm"
+      :copy-fn="copy"
+      :aria-label="t('markdown.copyCode')" />
+    <pre><code v-if="highlighted" v-html="highlighted" /><code v-else>{{ code }}</code></pre>
+  </div>
+</template>
+
+<style scoped>
+.code-block {
+  position: relative;
+}
+
+.code-block__copy {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.code-block:hover .code-block__copy,
+.code-block:focus-within .code-block__copy {
+  opacity: 1;
+}
+
+.code-block 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);
+}
+
+.code-block pre code {
+  padding: 0;
+  background: none;
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .code-block__copy {
+    transition: none;
+  }
+}
+</style>
+
+<!-- Not scoped: Prism generates plain, unscoped `.token.*` spans via
+     innerHTML, so a scoped style's data-v-xxx attribute selector would never
+     match them. -->
+<style>
+@import "prismjs/themes/prism.css";
+</style>

package/src/atoms/CopyButton.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import Button from "./Button.vue"
+import EditorIcon from "./EditorIcon.vue"
+import { ICON_SIZES } from "./icons"
+
+const props = withDefaults(
+  defineProps<{
+    icon?: "copy" | "clipboard-list" | "clipboard-type"
+    copyFn: () => Promise<void>
+    variant?: "primary" | "secondary" | "tertiary" | "transparent"
+    size?: "sm" | "md" | "lg"
+    disabled?: boolean
+    block?: boolean
+    ariaLabel?: string
+  }>(),
+  {
+    icon: "copy",
+  },
+)
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function onClick() {
+  if (copied.value) return
+  try {
+    await props.copyFn()
+    copied.value = true
+    timer = setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+defineExpose({
+  reset: () => {
+    copied.value = false
+    clearTimeout(timer)
+  },
+})
+
+const currentIconName = computed(() => (copied.value ? "check" : props.icon))
+const iconSize = computed(() => ICON_SIZES[props.size ?? "sm"])
+</script>
+
+<template>
+  <Button
+    :variant="variant"
+    :size="size"
+    :disabled="disabled"
+    :block="block"
+    :aria-label="ariaLabel"
+    :class="{ 'copy-btn--copied': copied }"
+    @click="onClick">
+    <template #icon>
+      <Transition name="copy-icon" mode="out-in">
+        <EditorIcon
+          :key="currentIconName"
+          :name="currentIconName"
+          :size="iconSize" />
+      </Transition>
+    </template>
+    <slot />
+  </Button>
+</template>
+
+<style scoped>
+.copy-btn--copied {
+  color: var(--color-success, #2e7d32);
+}
+
+.copy-icon-enter-active,
+.copy-icon-leave-active {
+  transition:
+    opacity var(--transition-duration) ease,
+    scale var(--transition-duration) ease;
+}
+
+.copy-icon-enter-from {
+  opacity: 0;
+  scale: 0.6;
+}
+
+.copy-icon-leave-to {
+  opacity: 0;
+  scale: 0.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .copy-icon-enter-active,
+  .copy-icon-leave-active {
+    transition: none;
+  }
+}
+</style>

package/src/atoms/EditableText.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, useTemplateRef, computed } from "vue"
+import FormInput, { type FormField } from "../molecules/FormInput.vue"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    disabled?: boolean
+    placeholder?: string
+    ariaLabel?: string
+  }>(),
+  { disabled: false },
+)
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  commit: [value: string]
+  cancel: []
+}>()
+
+const isEditing = ref(false)
+const draft = ref(props.modelValue)
+const inputRef = useTemplateRef<{ focus: () => void; select: () => void }>("input")
+
+const field = computed<FormField>(() => ({
+  placeholder: props.placeholder,
+  customParams: props.ariaLabel ? { "aria-label": props.ariaLabel } : undefined,
+}))
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (!isEditing.value) draft.value = v
+  },
+)
+
+async function startEdit(): Promise<void> {
+  if (props.disabled) return
+  draft.value = props.modelValue
+  isEditing.value = true
+  await nextTick()
+  inputRef.value?.focus()
+  inputRef.value?.select()
+}
+
+function commit(): void {
+  if (!isEditing.value) return
+  const trimmed = draft.value.trim()
+  isEditing.value = false
+  if (!trimmed || trimmed === props.modelValue) return
+  emit("update:modelValue", trimmed)
+  emit("commit", trimmed)
+}
+
+function cancel(): void {
+  if (!isEditing.value) return
+  isEditing.value = false
+  draft.value = props.modelValue
+  emit("cancel")
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (e.key === "Enter") {
+    e.preventDefault()
+    commit()
+  } else if (e.key === "Escape") {
+    e.preventDefault()
+    cancel()
+  }
+}
+</script>
+
+<template>
+  <FormInput
+    v-if="isEditing"
+    ref="input"
+    v-model="draft"
+    :field="field"
+    size="sm"
+    full-width
+    @keydown="onKeydown"
+    @blur="commit" />
+  <button
+    v-else
+    type="button"
+    class="editable-text-display"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    @click="startEdit">
+    {{ modelValue || placeholder }}
+  </button>
+</template>
+
+<style scoped>
+.editable-text-display {
+  all: unset;
+  cursor: text;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  line-height: inherit;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  min-width: 0;
+}
+
+.editable-text-display:not(:disabled):hover {
+  border-color: var(--color-border);
+}
+
+.editable-text-display:disabled {
+  cursor: default;
+}
+</style>