@livestorm/ui-vue 2.0.1 → 2.0.3

package/dist/components.mjs

@@ -1,4 +1,4 @@
-import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-BN5208td.mjs";
+import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-UNNkatTS.mjs";
 import { b as qo, c as Ko, a as Qo, _ as Vo } from "./a11y--y7uaY4j.mjs";
 import { RenderSlot as j } from "./slot.mjs";
 const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-BN5208td.mjs";
+import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-UNNkatTS.mjs";
 import { _ as wa, a as Fa, b as xa, c as ha } from "./a11y--y7uaY4j.mjs";
 export {
   e as UiActionBar,

package/dist/layouts.mjs

@@ -1,22 +1,23 @@
-import { defineComponent as I, computed as w, ref as C, onMounted as M, resolveComponent as E, createElementBlock as n, openBlock as t, createElementVNode as v, createCommentVNode as a, createBlock as y, resolveDynamicComponent as P, normalizeProps as z, guardReactiveProps as H, Fragment as k, normalizeClass as b, normalizeStyle as N, toDisplayString as f, withKeys as S, withCtx as h, createTextVNode as B, getCurrentInstance as D, createVNode as L, Transition as V, TransitionGroup as A, renderList as j, unref as x, mergeProps as K } from "vue";
-import { u as R } from "./toastDSV2-wMh-UMzW.mjs";
-import { u as U } from "./useThemeAndModes-DY5SDC0a.mjs";
-const F = ["data-testid"], G = {
+import { defineComponent as I, computed as w, ref as C, onMounted as M, resolveComponent as E, createElementBlock as n, openBlock as t, createElementVNode as v, createCommentVNode as a, createBlock as y, resolveDynamicComponent as P, normalizeProps as z, guardReactiveProps as H, Fragment as k, normalizeClass as b, normalizeStyle as N, toDisplayString as f, withKeys as S, withCtx as h, createTextVNode as B, getCurrentInstance as D, createVNode as L, Transition as V, TransitionGroup as A, renderList as R, unref as x, mergeProps as j } from "vue";
+import { useResponsive as K } from "./responsive.mjs";
+import { u as U } from "./toastDSV2-wMh-UMzW.mjs";
+import { u as F } from "./useThemeAndModes-CUK56j0z.mjs";
+const G = ["data-testid"], O = {
   key: 1,
   class: "absolute h-1 bg-grey-100 top-0 left-0 w-full"
-}, O = { class: "shrink-0" }, W = { class: "flex flex-col flex-1 sm:row-start-1 min-w-0 wrap-break-word" }, X = {
+}, W = { class: "shrink-0" }, X = { class: "flex flex-col flex-1 sm:row-start-1 min-w-0 wrap-break-word" }, Y = {
   key: 0,
   class: "text-content-text-md-bold text-text-neutral-base"
-}, Y = {
+}, q = {
   key: 1,
   class: "text-content-text-md-regular"
-}, q = {
+}, J = {
   key: 2,
   class: "text-content-text-md-regular text-text-neutral-subtle mt-1"
-}, J = { class: "row-start-1 h-4 w-8 justify-self-end" }, Q = {
+}, Q = { class: "row-start-1 h-4 w-8 justify-self-end" }, Z = {
   key: 2,
   class: "row-start-3 col-start-1 col-end-3 w-full grid sm:flex sm:col-start-2 mt-3 gap-2 justify-self-end"
-}, Z = /* @__PURE__ */ I({
+}, ee = /* @__PURE__ */ I({
   __name: "ToastMessage",
   props: {
     message: {},
@@ -70,7 +71,7 @@ const F = ["data-testid"], G = {
     e.time && setTimeout(() => {
       c.value = !0;
     }, 100);
-    const r = C(), { addElementToWatch: i } = U();
+    const r = C(), { addElementToWatch: i } = F();
     return M(() => {
       r.value && i(
         "content",
@@ -117,23 +118,23 @@ const F = ["data-testid"], G = {
                   transitionDuration: `${e.time / 1e3}s`
                 })
               }, null, 6)) : a("", !0)
-            ], 2)) : e.progessIndeterminate ? (t(), n("div", G, [...o[5] || (o[5] = [
+            ], 2)) : e.progessIndeterminate ? (t(), n("div", O, [...o[5] || (o[5] = [
               v("div", { class: "animate-progress-indeterminate w-full h-full bg-red-600 origin-left-right" }, null, -1)
             ])])) : a("", !0)
           ], 64)) : a("", !0),
-          v("div", O, [
+          v("div", W, [
             g.value ? (t(), n("div", {
               key: 0,
               class: b(["w-4 h-4 mt-0.5 mr-3 shrink-0 mb-2 sm:mb-0", g.value])
             }, null, 2)) : a("", !0)
           ]),
-          v("div", W, [
-            e.title || e.message ? (t(), n("span", X, f(e.title || e.message), 1)) : a("", !0),
-            e.title && e.message ? (t(), n("p", Y, f(e.message), 1)) : a("", !0),
-            e.info ? (t(), n("p", q, f(e.info), 1)) : a("", !0)
+          v("div", X, [
+            e.title || e.message ? (t(), n("span", Y, f(e.title || e.message), 1)) : a("", !0),
+            e.title && e.message ? (t(), n("p", q, f(e.message), 1)) : a("", !0),
+            e.info ? (t(), n("p", J, f(e.info), 1)) : a("", !0)
           ])
         ], 64)),
-        v("div", J, [
+        v("div", Q, [
           !e.locked && e.closable ? (t(), y($, {
             key: 0,
             "data-testid": `toast-close-${String(e.id)}`,
@@ -147,7 +148,7 @@ const F = ["data-testid"], G = {
             onKeydown: o[1] || (o[1] = S((d) => l("close"), ["enter"]))
           }, null, 8, ["data-testid"])) : a("", !0)
         ]),
-        e.confirmLabel || e.cancelLabel ? (t(), n("div", Q, [
+        e.confirmLabel || e.cancelLabel ? (t(), n("div", Z, [
           e.confirmLabel ? (t(), y($, {
             key: 0,
             href: e.confirmHref,
@@ -177,20 +178,20 @@ const F = ["data-testid"], G = {
             _: 1
           })) : a("", !0)
         ])) : a("", !0)
-      ], 40, F);
+      ], 40, G);
     };
   }
-}), ee = {
+}), te = {
   key: 0,
   "data-testid": "layout-toasts-locked",
   class: "bg-alpha-black-300 fixed inset-0 z-[8000]"
-}, te = 3, ae = /* @__PURE__ */ I({
+}, oe = 3, le = /* @__PURE__ */ I({
   __name: "LayoutToasts",
   setup(u) {
     const p = D();
     if (!p)
       throw new Error("No current instance found");
-    const e = w(() => p.appContext.config.globalProperties.$responsive), { toasts: l, closeToast: g, cancelCloseTimer: c, openToast: m } = R(), _ = w(() => l.value.some((r) => r.locked));
+    const e = w(() => p.appContext.config.globalProperties.$responsive ?? K()), { toasts: l, closeToast: g, cancelCloseTimer: c, openToast: m } = U(), _ = w(() => l.value.some((r) => r.locked));
     function T(r) {
       const i = r.getBoundingClientRect(), { style: s } = r;
       s.top = `${i.top}px`, s.left = `${i.left}px`, s.width = `${i.width}px`, s.height = `${i.height}px`;
@@ -201,7 +202,7 @@ const F = ["data-testid"], G = {
         appear: ""
       }, {
         default: h(() => [
-          _.value ? (t(), n("div", ee)) : a("", !0)
+          _.value ? (t(), n("div", te)) : a("", !0)
         ]),
         _: 1
       }),
@@ -212,11 +213,11 @@ const F = ["data-testid"], G = {
         onBeforeLeave: T
       }, {
         default: h(() => [
-          (t(!0), n(k, null, j(x(l).slice(0, te), (s) => (t(), n("div", {
+          (t(!0), n(k, null, R(x(l).slice(0, oe), (s) => (t(), n("div", {
             key: s.id,
             class: "w-full sm:max-w-[400px]"
           }, [
-            L(Z, K({ ref_for: !0 }, s, {
+            L(ee, j({ ref_for: !0 }, s, {
               class: "bg-surface-neutral-bg-main p-3 rounded-2xl",
               onClose: (o) => x(g)(s.id),
               onMouseenter: (o) => x(c)(s.id),
@@ -232,5 +233,5 @@ const F = ["data-testid"], G = {
   }
 });
 export {
-  ae as LayoutToasts
+  le as LayoutToasts
 };

package/dist/responsive.mjs

@@ -1,25 +1,39 @@
-import { computed as r, reactive as d } from "vue";
-let e;
-function c() {
-  return e;
+import { reactive as p, computed as a } from "vue";
+import { BREAKPOINT_LG as c, BREAKPOINT_XL_PLUS as f, BREAKPOINT_MD as h } from "./breakpoints.mjs";
+let n;
+const l = 1280, u = 800, m = {
+  mobile: (e) => e.width < h,
+  tablet: (e) => e.width < c,
+  smallDesktop: (e) => e.width < f,
+  desktop: (e) => e.width >= c
+};
+function w(e = {}, { deferViewportSync: o = !1 } = {}) {
+  const s = typeof window < "u", r = s && !o, t = p({
+    width: r ? window.innerWidth : l,
+    height: r ? window.innerHeight : u
+  }), d = { ...m, ...e };
+  for (const i in d)
+    t[i] = a(() => d[i](t));
+  if (s) {
+    const i = () => {
+      t.width = window.innerWidth, t.height = window.innerHeight;
+    };
+    o && queueMicrotask(i), window.addEventListener("resize", i);
+  }
+  return t;
+}
+function g() {
+  return n || (n = w({}, { deferViewportSync: !0 })), n;
 }
-const w = {
-  install(o, s) {
-    const i = Object.assign({}, {
+const R = {
+  install(e, o) {
+    const s = Object.assign({}, {
       computed: {}
-    }, s), n = {};
-    for (const t in i.computed)
-      n[t] = r(() => i.computed[t](e));
-    e = d({
-      width: window.innerWidth,
-      height: window.innerHeight,
-      ...n
-    }), o.config.globalProperties.$responsive = e, window.addEventListener("resize", () => {
-      e.width = window.innerWidth, e.height = window.innerHeight;
-    });
+    }, o);
+    n = w(s.computed), e.config.globalProperties.$responsive = n;
   }
 };
 export {
-  w as default,
-  c as useResponsive
+  R as default,
+  g as useResponsive
 };

package/dist/types/src/utils/responsive.d.ts

@@ -1,4 +1,12 @@
-export function useResponsive(): any;
+/**
+ * Viewport state shared by the whole app. Lazily created on first use, so
+ * components work with no plugin registration: installing the Responsive
+ * plugin is only needed to customize the flags or to read `$responsive`
+ * in templates.
+ *
+ * @returns {import('./responsive.types').ResponsiveGlobalComponentProperty}
+ */
+export function useResponsive(): import("./responsive.types").ResponsiveGlobalComponentProperty;
 declare namespace _default {
     function install(app: any, options: any): void;
 }

package/dist/{useThemeAndModes-DY5SDC0a.mjs → useThemeAndModes-CUK56j0z.mjs}

@@ -1,58 +1,57 @@
-import { useStorage as g } from "@vueuse/core";
-import { ref as E, computed as d, watch as f } from "vue";
-import { useRoute as b } from "vue-router";
+import { useStorage as A } from "@vueuse/core";
+import { ref as E, computed as d, watch as f, getCurrentInstance as b } from "vue";
 const T = {
   LIVESTORM: "Livestorm",
   CUSTOMER1: "customer1",
   CUSTOMER2: "customer2",
   CUSTOMER3: "customer3"
-}, v = {
+}, p = {
   LIGHT: "light",
   DARK: "dark"
-}, y = Object.values(T), C = Object.values(v);
+}, y = Object.values(T), C = Object.values(p);
 Object.fromEntries(
   Object.entries(T).map(([e, t]) => [e.toLowerCase(), t])
 );
 const I = ["signup", "signin", "forgot-password", "reset-password"], R = {
   theme: T.LIVESTORM,
-  mode: v.DARK,
-  contentMode: v.LIGHT
-}, i = E(/* @__PURE__ */ new Map()), p = E(/* @__PURE__ */ new Map()), o = g(
+  mode: p.DARK,
+  contentMode: p.LIGHT
+}, i = E(/* @__PURE__ */ new Map()), v = E(/* @__PURE__ */ new Map()), o = A(
   "themeAndMode",
   R
 );
-function G({ themeOverride: e, modeOverride: t, contentModeOverride: n } = {}) {
+function k({ themeOverride: e, modeOverride: t, contentModeOverride: n } = {}) {
   const s = !!(e || t || n), a = e || o.value.theme, r = t || o.value.mode, S = n || o.value.contentMode;
   function O() {
     document.querySelector("body").setAttribute("data-colors-primitive", a), document.querySelector("body").setAttribute("data-colors-semantic", r), H();
   }
-  function h() {
-    const m = () => t || o.value.mode, c = () => n || o.value.contentMode;
+  function g() {
+    const l = () => t || o.value.mode, c = () => n || o.value.contentMode;
     f(
       () => Array.from(i.value.values()),
-      () => D({ mode: m(), hasOverrides: s }),
+      () => D({ mode: l(), hasOverrides: s }),
       { immediate: !0 }
     ), f(
-      () => Array.from(p.value.values()),
+      () => Array.from(v.value.values()),
       () => M({ mode: c(), hasOverrides: s }),
       { immediate: !0 }
     );
-    const l = b();
+    const m = b();
     f(
-      () => l?.name,
+      () => m?.appContext.config.globalProperties.$route?.name,
       (u) => {
         u && I.includes(u.toString()) && M({ mode: c(), hasOverrides: s });
       },
       { immediate: !0 }
     );
   }
-  function A(m, { selector: c, element: l, modeOverride: u }) {
-    (m === "mode" ? i : p).value.set(c, { element: l, modeOverride: u });
+  function h(l, { selector: c, element: m, modeOverride: u }) {
+    (l === "mode" ? i : v).value.set(c, { element: m, modeOverride: u });
   }
   return {
     initOnAppMounted: O,
-    registerWatchers: h,
-    addElementToWatch: A,
+    registerWatchers: g,
+    addElementToWatch: h,
     updateContentMode: w,
     updateTheme: L,
     updateMode: _,
@@ -87,7 +86,7 @@ function D({ mode: e, hasOverrides: t = !1 }) {
 }
 function M({ mode: e, hasOverrides: t = !1, ignoreElementOverrides: n = !1 }) {
   t || (o.value.contentMode = e);
-  for (const { element: s, modeOverride: a } of p.value.values()) {
+  for (const { element: s, modeOverride: a } of v.value.values()) {
     const r = n ? e : a || e;
     s.setAttribute("data-colors-semantic", r);
   }
@@ -105,5 +104,5 @@ function H() {
   }
 }
 export {
-  G as u
+  k as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -39,9 +39,8 @@
     "mitt": "^3.0.1",
     "reka-ui": "2.9.10",
     "tailwindcss": "^4.3.2",
-    "vue-safe-teleport": "^0.1.2",
-    "@livestorm/ui-icons": "^2.0.1",
-    "@livestorm/ui-tokens": "^2.0.1"
+    "@livestorm/ui-icons": "^2.0.3",
+    "@livestorm/ui-tokens": "^2.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
@@ -80,6 +79,11 @@
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/src/components/Toast/LayoutToasts.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance } from 'vue'
 import type { ResponsiveGlobalComponentProperty } from '../../utils/responsive.types'
+import { useResponsive } from '../../utils/responsive'
 import { useToasts, type ToastOptions } from './toastDSV2'
 import ToastMessage from './ToastMessage.vue'
 
@@ -8,7 +9,9 @@ const app = getCurrentInstance()
 if (!app) {
   throw new Error('No current instance found')
 }
-const responsive = computed(() => app.appContext.config.globalProperties.$responsive as ResponsiveGlobalComponentProperty)
+// Prefer the app-installed $responsive (it may carry custom flags); fall
+// back to the shared singleton so no plugin registration is required.
+const responsive = computed(() => (app.appContext.config.globalProperties.$responsive ?? useResponsive()) as ResponsiveGlobalComponentProperty)
 
 const MAX_ITEMS_DISPLAYED = 3
 

package/src/components/UiPage/UiPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch, getCurrentInstance, type Slot } from 'vue'
 import { BREAKPOINT_LG } from '../../utils/breakpoints'
+import { useResponsive } from '../../utils/responsive'
 import useThemeAndModes from '../../composables/useThemeAndModes'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import UiLoader from '../UiLoader/UiLoader.vue'
@@ -83,7 +84,9 @@ const app = getCurrentInstance()
 if (!app) {
   throw new Error('No current instance found')
 }
-const responsive = computed(() => app.appContext.config.globalProperties.$responsive)
+// Prefer the app-installed $responsive (it may carry custom flags); fall
+// back to the shared singleton so no plugin registration is required.
+const responsive = computed(() => app.appContext.config.globalProperties.$responsive ?? useResponsive())
 const displayLeftSlot = computed(() => responsive.value.width >= BREAKPOINT_LG)
 
 const UiPage = ref<HTMLElement | undefined>()

package/src/composables/useThemeAndModes.ts

@@ -1,6 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
 import {
   THEME_LIST,
   MODE_OPTIONS,
@@ -82,10 +81,15 @@ export default function useThemeAndModes (
       { immediate: true }
     )
 
-    const route = useRoute()
+    // vue-router is an optional peer: read the route from the app's global
+    // properties (which the router installs as $route) instead of importing
+    // vue-router, so the package resolves without it. Without a router the
+    // getter stays undefined and this watcher is simply inert. Same pattern
+    // as the $responsive fallback in UiPage/LayoutToasts.
+    const instance = getCurrentInstance()
 
     watch(
-      () => route?.name,
+      () => instance?.appContext.config.globalProperties.$route?.name,
       (routeName) => {
         if (!routeName) { return }
         if (ROUTES_TO_WATCH.includes(routeName.toString() as typeof ROUTES_TO_WATCH[number])) {

package/src/utils/responsive.js

@@ -1,9 +1,75 @@
 import { reactive, computed } from 'vue'
 import generateFlags from './devices'
+import { BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL_PLUS } from './breakpoints'
 
 let responsive
 
+// Under SSR there is no viewport: the server renders a desktop-sized static
+// snapshot. To keep hydration safe, the client's lazy singleton starts from
+// the SAME snapshot (identical trees during the hydration pass) and syncs to
+// the real viewport in a microtask, which runs after hydration completes but
+// before the first paint.
+const SSR_WIDTH = 1280
+const SSR_HEIGHT = 800
+
+// Default flags, derived from the design system breakpoints. An app installing
+// the Responsive plugin can override any of them via `options.computed`.
+const DEFAULT_FLAGS = {
+  mobile: state => state.width < BREAKPOINT_MD,
+  tablet: state => state.width < BREAKPOINT_LG,
+  smallDesktop: state => state.width < BREAKPOINT_XL_PLUS,
+  desktop: state => state.width >= BREAKPOINT_LG,
+}
+
+function createResponsive (customComputed = {}, { deferViewportSync = false } = {}) {
+  const isClient = typeof window !== 'undefined'
+  const readViewportNow = isClient && !deferViewportSync
+
+  const state = reactive({
+    width: readViewportNow ? window.innerWidth : SSR_WIDTH,
+    height: readViewportNow ? window.innerHeight : SSR_HEIGHT,
+  })
+
+  const derived = { ...DEFAULT_FLAGS, ...customComputed }
+  for (const key in derived) {
+    // Assigning a computed ref onto a reactive object stores it unwrapped:
+    // consumers read plain booleans while reactivity is preserved.
+    state[key] = computed(() => derived[key](state))
+  }
+
+  if (isClient) {
+    const sync = () => {
+      state.width = window.innerWidth
+      state.height = window.innerHeight
+    }
+    if (deferViewportSync) {
+      // Runs after the synchronous hydration pass but before the first
+      // paint: server HTML and client hydration tree stay identical, then a
+      // normal reactive update applies the real viewport with no visible
+      // flash for client-only apps either.
+      queueMicrotask(sync)
+    }
+    window.addEventListener('resize', sync)
+  }
+
+  return state
+}
+
+/**
+ * Viewport state shared by the whole app. Lazily created on first use, so
+ * components work with no plugin registration: installing the Responsive
+ * plugin is only needed to customize the flags or to read `$responsive`
+ * in templates.
+ *
+ * @returns {import('./responsive.types').ResponsiveGlobalComponentProperty}
+ */
 export function useResponsive () {
+  if (!responsive) {
+    // Deferred viewport sync keeps SSR hydration safe; the plugin path below
+    // keeps its historical immediate initialization (it installs client-side
+    // at app boot, before anything rendered).
+    responsive = createResponsive({}, { deferViewportSync: true })
+  }
   return responsive
 }
 
@@ -13,11 +79,6 @@ export default {
       computed: {},
     }, options)
 
-    const computedProps = {}
-    for (const key in finalOptions.computed) {
-      computedProps[key] = computed(() => finalOptions.computed[key](responsive))
-    }
-
     if (import.meta.env.RESPONSIVE_V2) {
       let device
       const defaultUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36'
@@ -44,18 +105,11 @@ export default {
       }
       app.config.globalProperties.$responsive = responsive
     } else {
-      responsive = reactive({
-        width: window.innerWidth,
-        height: window.innerHeight,
-        ...computedProps,
-      })
-
+      // The plugin-created instance replaces the lazy singleton so that
+      // useResponsive() and $responsive stay the same object, with the
+      // app's custom computed applied on top of the default flags.
+      responsive = createResponsive(finalOptions.computed)
       app.config.globalProperties.$responsive = responsive
-
-      window.addEventListener('resize', () => {
-        responsive.width = window.innerWidth
-        responsive.height = window.innerHeight
-      })
     }
   },
 }