@livestorm/ui-vue 2.0.3 → 2.0.4

package/dist/utils.mjs

@@ -1,21 +1,21 @@
 import { BREAKPOINT_2XL as F, BREAKPOINT_LG as N, BREAKPOINT_MD as X, BREAKPOINT_SM as D, BREAKPOINT_XL as Q, BREAKPOINT_XL_PLUS as U } from "./breakpoints.mjs";
 import "./bus.mjs";
-import { computed as h, createApp as _, h as p } from "vue";
+import { computed as h, createApp as _, h as f } from "vue";
 import { useClipboard as g, usePermission as x } from "@vueuse/core";
-import R from "i18next";
-import { b as A, _ as C, c as P, a as T } from "./a11y--y7uaY4j.mjs";
+import { u as R } from "./i18n-Cktw9hIu.mjs";
+import { b as A, _ as C, c as T, a as P } from "./a11y--y7uaY4j.mjs";
 import { f as j, h as G, d as z, u as H } from "./a11y--y7uaY4j.mjs";
 import { useResponsive as Y } from "./responsive.mjs";
 import { useRoute as $, useRouter as S } from "vue-router";
 import { RenderSlot as ee, getSlotAsComponent as te, unwrapFragments as oe, useSlotsAsComponents as ne } from "./slot.mjs";
 let d = null;
-function k(s, u) {
+function k(n, c) {
   d && d();
-  const t = s.getBoundingClientRect(), r = document.createElement("div");
-  document.body.appendChild(r);
-  const c = _({
-    render: () => p(A, null, () => p(C, { open: !0, delayDuration: 0 }, () => [
-      p(P, { asChild: !0 }, () => p("span", {
+  const t = n.getBoundingClientRect(), s = document.createElement("div");
+  document.body.appendChild(s);
+  const a = _({
+    render: () => f(A, null, () => f(C, { open: !0, delayDuration: 0 }, () => [
+      f(T, { asChild: !0 }, () => f("span", {
         "aria-hidden": "true",
         style: {
           position: "fixed",
@@ -26,11 +26,11 @@ function k(s, u) {
           pointerEvents: "none"
         }
       })),
-      p(T, { side: "top" }, () => u),
+      f(P, { side: "top" }, () => c),
       // The bubble lives in reka's portal where attrs like role are not
       // forwardable; announce the feedback from a visually hidden live
       // region instead so screen readers hear the copy confirmation.
-      p("span", {
+      f("span", {
         role: "status",
         style: {
           position: "absolute",
@@ -39,81 +39,81 @@ function k(s, u) {
           overflow: "hidden",
           clipPath: "inset(50%)"
         }
-      }, u)
+      }, c)
     ]))
   });
-  c.mount(r);
-  let a = !1;
-  const o = () => {
-    a || (a = !0, d === o && (d = null), c.unmount(), r.remove());
+  a.mount(s);
+  let p = !1;
+  const r = () => {
+    p || (p = !0, d === r && (d = null), a.unmount(), s.remove());
   };
-  return d = o, o;
+  return d = r, r;
 }
 function O() {
-  const { isSupported: s, copy: u } = g(), t = x("clipboard-write"), r = h(() => s.value && t.value);
-  async function c(a, o, f = R.t("general_misc_copied-text")) {
-    if (await u(a), o) {
-      o.classList.add("copied");
-      const m = k(o, f);
+  const { isSupported: n, copy: c } = g(), t = x("clipboard-write"), s = R(), a = h(() => n.value && t.value);
+  async function p(r, i, m = s("general_misc_copied-text")) {
+    if (await c(r), i) {
+      i.classList.add("copied");
+      const e = k(i, m);
       setTimeout(() => {
-        o.classList.remove("copied"), m();
+        i.classList.remove("copied"), e();
       }, 600);
     }
   }
   return {
-    canCopy: r,
-    copy: c
+    canCopy: a,
+    copy: p
   };
 }
-function q(s, u = !1) {
-  const t = $(), r = S(), c = `${s}-`;
-  function a() {
+function q(n, c = !1) {
+  const t = $(), s = S(), a = `${n}-`;
+  function p() {
     const e = [];
-    for (const n in t.query)
-      n.startsWith(c) && e.push(n);
+    for (const o in t.query)
+      o.startsWith(a) && e.push(o);
     return e;
   }
-  function o(e) {
+  function r(e) {
     return e === "true" ? !0 : e === "false" ? !1 : e ?? !1;
   }
-  const f = h(() => {
-    if (u) {
-      const e = a();
+  const i = h(() => {
+    if (c) {
+      const e = p();
       if (e.length === 0)
         return !1;
-      const n = {};
-      for (const i of e)
-        n[i.substring(c.length)] = o(t.query[i]);
-      return n;
+      const o = {};
+      for (const u of e)
+        o[u.substring(a.length)] = r(t.query[u]);
+      return o;
     } else
-      return o(t.query[s]);
-  }), m = !!f.value;
+      return r(t.query[n]);
+  }), m = !!i.value;
   return h({
-    get: () => f.value,
+    get: () => i.value,
     set: (e) => {
-      if (e === f.value) return;
-      const n = e == null || e === !1;
-      if (n && !m)
-        r.back();
+      if (e === i.value) return;
+      const o = e == null || e === !1;
+      if (o && !m)
+        s.back();
       else {
-        let i;
-        if (u)
-          if (i = {}, n) {
-            const l = a();
+        let u;
+        if (c)
+          if (u = {}, o) {
+            const l = p();
             for (const y of l)
-              i[y] = void 0;
+              u[y] = void 0;
           } else
             for (const l in e)
-              i[`${s}-${l}`] = e[l];
+              u[`${n}-${l}`] = e[l];
         else
-          i = {
-            [s]: n ? void 0 : e
+          u = {
+            [n]: o ? void 0 : e
           };
-        r[n ? "replace" : "push"]({
+        s[o ? "replace" : "push"]({
           ...t,
           query: {
             ...t.query,
-            ...i
+            ...u
           }
         });
       }

package/integrations.d.ts

@@ -8,3 +8,4 @@
  * src/components/Toast/toastDSV2.ts.
  */
 export * from './src/components/Toast/toastDSV2'
+export * from './src/utils/i18n'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -37,21 +37,20 @@
     "embla-carousel-vue": "^8.6.0",
     "i18next": "^26.3.4",
     "mitt": "^3.0.1",
-    "reka-ui": "2.9.10",
-    "tailwindcss": "^4.3.2",
-    "@livestorm/ui-icons": "^2.0.3",
-    "@livestorm/ui-tokens": "^2.0.3"
+    "reka-ui": "^2.9.10",
+    "@livestorm/ui-tokens": "^2.0.4",
+    "@livestorm/ui-icons": "^2.0.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-coverage": "^3.0.1",
-    "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/addon-themes": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/vue3-vite": "^10.4.6",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-coverage": "^3.0.2",
+    "@storybook/addon-designs": "^11.1.4",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-links": "^10.5.5",
+    "@storybook/addon-themes": "^10.5.5",
+    "@storybook/addon-vitest": "^10.5.5",
+    "@storybook/vue3-vite": "^10.5.5",
     "@tailwindcss/vite": "^4.3.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
@@ -60,22 +59,24 @@
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/ui": "^4.1.9",
     "@vue/test-utils": "^2.4.11",
-    "chromatic": "^15.3.1",
+    "chromatic": "^18.1.0",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-storybook": "^10.5.5",
     "happy-dom": "^20.10.6",
     "playwright": "^1.61.1",
-    "storybook": "^10.4.6",
-    "typescript": "^5.9.3",
+    "storybook": "^10.5.5",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^6.0.3",
     "vite": "^7.3.6",
     "vitest": "^4.1.9",
     "vitest-browser-vue": "^2.1.0",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.5",
+    "vue-tsc": "^3.3.8",
     "@livestorm/dev-utils": "1.0.0"
   },
   "peerDependencies": {
+    "tailwindcss": "^4.0.0",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },
@@ -93,6 +94,7 @@
       "types": "./dist/types/src/theme.d.ts"
     },
     "./style": "./dist/ui-vue.css",
+    "./fonts": "./src/css/fonts.css",
     "./components-vite": {
       "types": "./components.d.ts",
       "import": "./dist/components.mjs"
@@ -149,7 +151,7 @@
     "test:vitest:updateSnapshots": "vitest -u",
     "test:npm-package": "bash tests/npm-package/run.sh",
     "npm-package:gallery": "bash tests/npm-package/run.sh --gallery",
-    "deploy:chromatic": "npx chromatic",
+    "deploy:chromatic": "chromatic",
     "setup-reka-paths": "node setup-reka-ui-paths.js",
     "storybook:dev": "pnpm run setup-reka-paths && storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json"

package/src/components/UiBanner/UiBanner.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import UiButton from '../UiButton/UiButton.vue'
-import i18n from 'i18next'
+import { useTranslate } from '../../utils/i18n'
 
 export interface UiBannerProps {
   /**
@@ -60,6 +60,8 @@ export interface UiBannerProps {
   closedExpirySeconds?: number
 }
 
+const translate = useTranslate()
+
 const props = withDefaults(defineProps<UiBannerProps>(), {
   color: 'primary',
   variant: 'horizontal',
@@ -350,7 +352,7 @@ function handleAction () {
       :class="closeButtonClasses"
     >
       <UiButton
-        :label="i18n.t('general_close')"
+        :label="translate('general_close')"
         variant="tertiary"
         color="neutral"
         icon="i-ls-x"

package/src/components/UiDialog/UiDialogContent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useMutationObserver, useThrottleFn } from '@vueuse/core'
-import i18n from 'i18next'
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import {
   DialogContent,
@@ -12,6 +11,7 @@ import {
   VisuallyHidden,
 } from 'reka-ui'
 import { computed, ref, useAttrs, watch } from 'vue'
+import { useTranslate } from '../../utils/i18n'
 import UiDialogClose from './UiDialogClose.vue'
 
 interface UiDialogContentProps extends DialogContentProps {
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<UiDialogContentProps>(), {
   title: undefined,
   description: undefined,
   hideClose: false,
-  closeButtonAriaLabel: i18n.t('general_close'),
+  closeButtonAriaLabel: undefined,
   overlayClass: '',
   contentMode: 'light',
   closeButtonMode: undefined,
@@ -69,12 +69,20 @@ function checkScroll () {
 
 const throttledCheckScroll = useThrottleFn(checkScroll, 100)
 
+const translate = useTranslate()
+
+// Resolved at render time (not as a static prop default): the translation
+// must follow the app-provided translator and the active locale.
+const closeAriaLabel = computed(
+  () => props.closeButtonAriaLabel ?? translate('general_close'),
+)
+
 const attrs = useAttrs();
 const accessibleTitle = computed(
   () =>
     props.title ||
     (attrs['aria-label'] as string) ||
-    i18n.t('general_dialog_title'),
+    translate('general_dialog_title'),
 );
 const accessibleDescription = computed(
   () =>
@@ -150,7 +158,7 @@ useMutationObserver(contentRef, () => {
 
             <UiDialogClose
               v-if="!hideClose"
-              :aria-label="closeButtonAriaLabel"
+              :aria-label="closeAriaLabel"
               :mode="closeButtonMode ?? contentMode"
               :class="{
                 'ml-4': !noPadding

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -8,11 +8,12 @@ import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
 import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
 import { useMobileMenu } from '../../composables/useMobileMenu'
-import i18next from 'i18next'
+import { useTranslate } from '../../utils/i18n'
 import { focusFirstMenuItem } from '../../utils'
 import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
 import { SIDE_MENU_LAYOUT_KEY } from './injection'
 const { close, isOpen } = useMobileMenu()
+const translate = useTranslate()
 
 // State for the responsive (short-height) more menu popover, which surfaces
 // the otherwise-hidden #bottom slot items.
@@ -287,7 +288,7 @@ function handleLogoClick (event: MouseEvent) {
           <UiPopover v-model:open="isCollapsedMenuOpen">
             <UiPopoverTrigger class="w-full cursor-pointer">
               <UiSideMenuItem
-                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                :label="translate('room_bottom-bar_controls-label_more')"
                 icon="i-ls-more-horizontal"
                 :is-active="false"
                 :inside-interactive="true"
@@ -418,7 +419,7 @@ function handleLogoClick (event: MouseEvent) {
           >
             <UiPopoverTrigger class="cursor-pointer">
               <UiSideMenuItem
-                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                :label="translate('room_bottom-bar_controls-label_more')"
                 icon="i-ls-more-vertical"
                 :is-active="false"
                 :inside-interactive="true"

package/src/css/body.css

@@ -1,12 +1,20 @@
 @reference '@livestorm/ui-tokens/output/supernova/index.css';
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
-body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  color: var(--color-grey-700);
+/*
+  Layered so the host app always wins: an unlayered rule (or the app's own
+  @layer base rules, declared after this import) overrides these defaults.
+  Without the layer, this body rule would beat a Tailwind v4 app's
+  `@layer base` typography no matter the import order.
+  The Inter font itself is NOT loaded here — see fonts.css.
+*/
+@layer base {
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: var(--color-grey-700);
+  }
 }
 
 /*

package/src/css/fonts.css

@@ -0,0 +1,10 @@
+/*
+  Inter via Google Fonts — kept OUT of the base stylesheet (./style) on
+  purpose: a third-party font request must be the consumer's choice (GDPR,
+  self-hosting). Apps that want the quick path import this file once:
+
+    import '@livestorm/ui-vue/fonts'
+
+  The monorepo keeps loading it through ui-vue-legacy's style chain.
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

package/src/integrations/index.js

@@ -1 +1,2 @@
 export * from '../components/Toast/toastDSV2'
+export * from '../utils/i18n'

package/src/utils/clipboard.js

@@ -1,6 +1,6 @@
 import { computed, createApp, h } from 'vue'
 import { useClipboard, usePermission } from '@vueuse/core'
-import i18n from 'i18next'
+import { useTranslate } from './i18n'
 
 import UiTooltipProvider from '../components/UiTooltip/UiTooltipProvider.vue'
 import UiTooltip from '../components/UiTooltip/UiTooltip.vue'
@@ -82,10 +82,13 @@ function flashTooltip (el, text) {
 export function useCopyToClipboard () {
   const { isSupported, copy: _copy } = useClipboard()
   const permissionClipboardWrite = usePermission('clipboard-write')
+  // Captured at composable time so an app-provided UI_VUE_TRANSLATOR is
+  // honored; copy() itself runs later, in event handlers.
+  const translate = useTranslate()
 
   const canCopy = computed(() => isSupported.value && permissionClipboardWrite.value)
 
-  async function copy (text, el, tooltipText = i18n.t('general_misc_copied-text')) {
+  async function copy (text, el, tooltipText = translate('general_misc_copied-text')) {
     await _copy(text)
 
     if (el) {

package/src/utils/i18n.ts

@@ -0,0 +1,113 @@
+import i18next from 'i18next'
+import { getCurrentInstance, inject } from 'vue'
+import type { InjectionKey } from 'vue'
+
+/**
+ * Built-in translations for the few strings components render themselves
+ * (aria-labels, tooltips). Keyed like the Livestorm app locales so a host
+ * app running i18next with these keys keeps full control.
+ */
+const FALLBACK_BUNDLES: Record<string, Record<string, string>> = {
+  en: {
+    general_close: 'Close',
+    general_dialog_title: 'Dialog',
+    'general_misc_copied-text': 'Copied!',
+    'room_bottom-bar_controls-label_more': 'More',
+  },
+  fr: {
+    general_close: 'Fermer',
+    general_dialog_title: 'Dialog',
+    'general_misc_copied-text': 'Copié !',
+    'room_bottom-bar_controls-label_more': 'Plus',
+  },
+}
+
+/**
+ * Keys of the built-in labels. They MUST stay identical to the Livestorm
+ * app locale keys (Phrase): inside the app, translate() resolves through
+ * the app's i18next with these exact keys, and a silent mismatch would
+ * downgrade users to the EN/FR fallbacks. A spec in packages/frontend
+ * locks this contract against the app locales.
+ */
+export const BUILT_IN_LABEL_KEYS: readonly string[] = Object.freeze(Object.keys(FALLBACK_BUNDLES.en))
+
+/**
+ * A host-provided translate function. Return the translated string, or the
+ * key itself / null / undefined to decline and let the built-in bundles
+ * answer.
+ */
+export type Translator = (key: string) => string | null | undefined
+
+/**
+ * App-scoped translator: `app.provide(UI_VUE_TRANSLATOR, fn)` wires the
+ * host's i18n per application instance. This is the ONLY safe wiring for
+ * SSR servers rendering per-request locales — module state is shared
+ * between concurrent requests, an app-provided translator is not.
+ */
+export const UI_VUE_TRANSLATOR: InjectionKey<Translator> = Symbol('ui-vue-translator')
+
+let customTranslator: Translator | null = null
+
+/**
+ * Plug the host app's own i18n stack (an i18next `createInstance()`,
+ * vue-i18n, anything callable) into the library's built-in labels. An
+ * explicitly wired translator wins over the ambient i18next singleton.
+ * Pass null to restore the default behavior.
+ *
+ * This is process-level state, right for SPAs and static setups. On an SSR
+ * server with per-request locales, provide UI_VUE_TRANSLATOR on the app
+ * instead: concurrent renders would otherwise overwrite each other here.
+ */
+export function setTranslator (translator: Translator | null): void {
+  customTranslator = translator
+}
+
+function resolve (translator: Translator | null | undefined, key: string): string | null {
+  if (!translator) return null
+  const value = translator(key)
+  return typeof value === 'string' && value !== key ? value : null
+}
+
+/**
+ * Translate a key for a component's built-in label. Resolution order:
+ * 1. the translator wired via setTranslator(), when it answers;
+ * 2. the ambient i18next singleton, when initialized and it has the key
+ *    (the Livestorm app path);
+ * 3. the built-in EN/FR bundles, language picked from `<html lang>`.
+ * Apps not using i18next at all get proper strings instead of raw keys.
+ *
+ * Components call this through useTranslate(), which puts an app-provided
+ * UI_VUE_TRANSLATOR at the very top of that chain.
+ */
+export function translate (key: string): string {
+  return translateWith(null, key)
+}
+
+/**
+ * Component-side accessor: returns a translate function bound to the
+ * app-provided UI_VUE_TRANSLATOR when called inside setup(), falling back
+ * to the process-level chain otherwise. Safe to call outside a component.
+ */
+export function useTranslate (): (key: string) => string {
+  const injected = getCurrentInstance() ? inject(UI_VUE_TRANSLATOR, null) : null
+  return (key: string) => translateWith(injected, key)
+}
+
+function translateWith (appTranslator: Translator | null, key: string): string {
+  const fromApp = resolve(appTranslator, key)
+  if (fromApp !== null) return fromApp
+
+  const fromProcess = resolve(customTranslator, key)
+  if (fromProcess !== null) return fromProcess
+
+  if (i18next.isInitialized && i18next.exists(key)) {
+    return i18next.t(key)
+  }
+
+  const lang = typeof document === 'undefined'
+    ? 'en'
+    : (document.documentElement.lang || 'en').toLowerCase().split('-')[0]
+  const bundle = FALLBACK_BUNDLES[lang] || FALLBACK_BUNDLES.en
+
+  return bundle[key] ?? FALLBACK_BUNDLES.en[key] ?? key
+}