@livestorm/ui-vue 2.0.3 → 2.0.5

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/UiPage/UiPage.vue

@@ -98,15 +98,20 @@ const { addElementToWatch } = useThemeAndModes()
 // the internal theming tooling is enabled, so the stored content mode
 // (driven by the ThemePicker) can apply; for everyone else the content
 // stays light regardless of what localStorage may hold.
-const isInternalThemingEnabled = localStorage.getItem('ls-internal-theming') === 'true'
+// Read in onMounted, not at setup: setup also runs during SSR (no
+// localStorage), and server + client-hydration markup must be identical —
+// the pin lifts right after mount for the internal tooling instead.
+const isInternalThemingEnabled = ref(false)
 
 onMounted(() => {
+  isInternalThemingEnabled.value = localStorage.getItem('ls-internal-theming') === 'true'
+
   addElementToWatch(
     'content',
     {
       selector: '[data-name="ui-page-content"]',
       element: PageContent.value!,
-      ...(isInternalThemingEnabled ? {} : { modeOverride: 'light' }),
+      ...(isInternalThemingEnabled.value ? {} : { modeOverride: 'light' }),
     })
 })
 

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
+}

package/dist/a11y--y7uaY4j.mjs

@@ -1,217 +0,0 @@
-import { defineComponent as g, createBlock as f, openBlock as c, unref as i, normalizeProps as y, guardReactiveProps as b, withCtx as l, renderSlot as m, computed as r, createVNode as h, mergeProps as T, createCommentVNode as D, getCurrentInstance as B, createElementBlock as A, Fragment as E, createTextVNode as U, toDisplayString as F, ref as N, watch as S, onUnmounted as I, onMounted as H, nextTick as O } from "vue";
-import { TooltipProvider as W, useForwardProps as q, TooltipTrigger as L, useForwardPropsEmits as C, TooltipPortal as M, TooltipContent as z, TooltipArrow as K, TooltipRoot as x } from "reka-ui";
-import { reactiveOmit as V, onKeyDown as R } from "@vueuse/core";
-const X = /* @__PURE__ */ g({
-  __name: "UiTooltipProvider",
-  props: {
-    delayDuration: { default: 700 },
-    skipDelayDuration: { default: 300 },
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean },
-    content: {}
-  },
-  setup(t) {
-    return (s, e) => (c(), f(i(W), y(b(s.$props)), {
-      default: l(() => [
-        m(s.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), j = /* @__PURE__ */ g({
-  __name: "UiTooltipTrigger",
-  props: {
-    reference: {},
-    asChild: { type: Boolean },
-    as: {}
-  },
-  setup(t) {
-    const e = q(t);
-    return (o, p) => (c(), f(i(L), y(b({ ...i(e), ...o.$attrs })), {
-      default: l(() => [
-        m(o.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), G = /* @__PURE__ */ g({
-  __name: "UiTooltipContent",
-  props: {
-    colorsSemantic: { default: "light" },
-    maxWidth: { default: "base" },
-    showArrow: { type: Boolean, default: !0 },
-    arrowWidth: { default: 10 },
-    arrowHeight: { default: 5 },
-    forceMount: { type: Boolean },
-    ariaLabel: {},
-    asChild: { type: Boolean },
-    as: {},
-    side: {},
-    sideOffset: { default: 12 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    positionStrategy: {},
-    updatePositionStrategy: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside"],
-  setup(t, { emit: s }) {
-    const e = t, p = C(e, s), u = r(() => ({
-      xs: "max-w-[150px]",
-      sm: "max-w-[240px]",
-      md: "max-w-md",
-      base: "max-w-xs",
-      lg: "max-w-lg",
-      xl: "max-w-xl"
-    })[e.maxWidth]);
-    return (a, w) => (c(), f(i(M), null, {
-      default: l(() => [
-        h(i(z), T({ ...i(p), ...a.$attrs }, {
-          "data-colors-semantic": e.colorsSemantic,
-          class: [
-            "ui-tooltip-content py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg",
-            "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95",
-            u.value
-          ]
-        }), {
-          default: l(() => [
-            m(a.$slots, "default"),
-            e.showArrow ? (c(), f(i(K), {
-              key: 0,
-              width: e.arrowWidth,
-              height: e.arrowHeight,
-              class: "fill-surface-neutral-invert-bg-alpha"
-            }, null, 8, ["width", "height"])) : D("", !0)
-          ]),
-          _: 3
-        }, 16, ["data-colors-semantic", "class"])
-      ]),
-      _: 3
-    }));
-  }
-}), te = /* @__PURE__ */ g({
-  inheritAttrs: !1,
-  __name: "UiTooltip",
-  props: {
-    content: {},
-    side: {},
-    defaultOpen: { type: Boolean },
-    open: { type: Boolean },
-    delayDuration: {},
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(t, { emit: s }) {
-    const e = t, o = s, p = r(() => {
-      const a = B()?.vnode.props;
-      return !!a && "content" in a;
-    }), u = C(V(e, "content", "side"), o);
-    return (a, w) => p.value ? (c(), A(E, { key: 0 }, [
-      t.content ? (c(), f(X, { key: 0 }, {
-        default: l(() => [
-          h(i(x), y(b({ ...i(u), ...a.$attrs })), {
-            default: l(() => [
-              h(j, { "as-child": "" }, {
-                default: l(() => [
-                  m(a.$slots, "default")
-                ]),
-                _: 3
-              }),
-              h(G, { side: t.side }, {
-                default: l(() => [
-                  U(F(t.content), 1)
-                ]),
-                _: 1
-              }, 8, ["side"])
-            ]),
-            _: 3
-          }, 16)
-        ]),
-        _: 3
-      })) : m(a.$slots, "default", { key: 1 })
-    ], 64)) : (c(), f(i(x), y(T({ key: 1 }, { ...i(u), ...a.$attrs })), {
-      default: l(() => [
-        m(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-});
-let J = 0;
-const d = N([]), Q = r(() => d.value.length > 0);
-function oe(t, s) {
-  const e = J++, o = r(() => d.value.findIndex((n) => n.id === e));
-  function p() {
-    d.value.some((n) => n.id === e) || d.value.push({
-      id: e,
-      type: s
-    });
-  }
-  function u() {
-    o.value !== -1 && d.value.splice(o.value, 1);
-  }
-  S(t, (n) => {
-    n ? p() : u();
-  }, {
-    immediate: !0
-  }), I(() => {
-    u();
-  });
-  const a = r(() => e === d.value[d.value.length - 1]?.id), w = r(() => o.value > 0), v = r(() => d.value.filter((n) => n.type === s)), _ = r(() => v.value.findIndex((n) => n.id === e) < v.value.length - 1), $ = r(() => v.value.findIndex((n) => n.id === e) > 0), k = [];
-  function P(n) {
-    k.push(n);
-  }
-  return R("Escape", () => {
-    a.value && k.forEach((n) => n());
-  }), {
-    isActiveStacked: a,
-    hasStackedBehind: w,
-    isBehindSameType: _,
-    hasStackedSameTypeBehind: $,
-    stackIndex: o,
-    onClose: P
-  };
-}
-typeof document < "u" && S(Q, (t) => {
-  t ? document.documentElement.classList.add("overflow-hidden") : document.documentElement.classList.remove("overflow-hidden");
-}, {
-  immediate: !0
-});
-function ae() {
-  const t = B();
-  let s = null;
-  H(async () => {
-    await O();
-    const e = t.proxy.$el;
-    if (!e?.querySelector) return;
-    let o = e.querySelector("[data-stackview-autofocus]");
-    o ? ["INPUT", "A", "BUTTON", "TEXTAREA"].includes(o.tagName) || (o = o.querySelector("input, a, button, textarea") || o) : (o = e.querySelector('button[type="submit"]'), console.warn(
-      "%cDEV",
-      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
-      "A element should have the data-stackview-autofocus attribute in this component. Fallback to submit button."
-    )), clearTimeout(s), s = setTimeout(() => o?.focus(), 150);
-  });
-}
-function ne(t) {
-  t.preventDefault(), (t.target.closest('[role="menu"]') || t.target).querySelector("a")?.focus();
-}
-export {
-  te as _,
-  G as a,
-  X as b,
-  j as c,
-  ae as d,
-  ne as f,
-  Q as h,
-  oe as u
-};