prime-ui-kit 0.21.1 → 0.21.3

package/dist/chunks/{chunk-S27VR4ON.js → chunk-JO7E6SZQ.js}

@@ -2,6 +2,7 @@
 
 import {
   Activity,
+  AppWindow,
   ArrowDown,
   ArrowUp,
   ArrowUpDown,
@@ -103,6 +104,7 @@ import {
   Sun,
   TOKEN_DEFAULTS,
   Tablet,
+  Telegram,
   TextQuote,
   Trash2,
   TriangleAlert,
@@ -113,9 +115,11 @@ import {
   UserRound,
   Users,
   Video,
+  Vk,
   Volume2,
   VolumeX,
   Wallet,
+  Whatsapp,
   X,
   ZoomIn,
   ZoomOut,
@@ -139,7 +143,7 @@ import {
   useIconRoot,
   useOptionalControlSize,
   usePresence
-} from "./chunk-QFHE5GKW.js";
+} from "./chunk-HMLQCKRL.js";
 
 // src/components/scroll-container/ScrollContainer.tsx
 import * as React9 from "react";
@@ -509,24 +513,30 @@ function useEdgeOverflow(ref, axis, depth = false) {
 // src/hooks/useMergedRefs.ts
 import * as React4 from "react";
 function assignRef(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref) ref.current = value;
+  if (typeof ref === "function") {
+    const cleanup = ref(value);
+    return typeof cleanup === "function" ? cleanup : void 0;
+  }
+  if (ref) ref.current = value;
+  return void 0;
 }
-function releaseRef(ref, node) {
-  if (typeof ref === "function") ref(null);
-  else if (ref && ref.current === node) ref.current = null;
+function releaseRef(ref, node, cleanup) {
+  if (typeof ref === "function") {
+    if (cleanup) cleanup();
+    else ref(null);
+  } else if (ref && ref.current === node) ref.current = null;
 }
 function useMergedRefs(a, b, c) {
   return React4.useCallback(
     (value) => {
-      assignRef(a, value);
-      assignRef(b, value);
-      assignRef(c, value);
       if (value === null) return;
+      const cleanupA = assignRef(a, value);
+      const cleanupB = assignRef(b, value);
+      const cleanupC = assignRef(c, value);
       return () => {
-        releaseRef(a, value);
-        releaseRef(b, value);
-        releaseRef(c, value);
+        releaseRef(a, value, cleanupA);
+        releaseRef(b, value, cleanupB);
+        releaseRef(c, value, cleanupC);
       };
     },
     [a, b, c]
@@ -1208,7 +1218,7 @@ var axisClass = {
 function ScrollContainer({
   as: Component = "div",
   axis = "vertical",
-  overscrollBehavior = "contain",
+  overscrollBehavior = "auto",
   edges = "fade",
   scrollbar = "thin",
   lock = false,
@@ -2276,7 +2286,10 @@ function FloatingPanel({
     }
   };
   const panelRef = sheet ? ref : mergedRef;
-  const panel = scroll ? /* @__PURE__ */ jsx7(ScrollContainer, { ...props, edges: "shadow", ref: panelRef, children }) : /* @__PURE__ */ jsx7("div", { ...props, ref: panelRef, children });
+  const panel = scroll ? (
+    // An open layer: a touch scroll at its end never moves the page (the wheel: `useContainScroll`).
+    /* @__PURE__ */ jsx7(ScrollContainer, { ...props, edges: "shadow", overscrollBehavior: "contain", ref: panelRef, children })
+  ) : /* @__PURE__ */ jsx7("div", { ...props, ref: panelRef, children });
   return /* @__PURE__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx7(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx7(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx7(
       "div",
@@ -2817,6 +2830,8 @@ var iconRegistry = {
   "action.login": LogIn,
   "action.logout": LogOut,
   "action.more": Ellipsis,
+  /** Open a page of this product (a bot key's web app); `action.externalLink` leaves it. */
+  "action.openApp": AppWindow,
   "action.pause": Pause,
   /** Pin a message or an item to the top. */
   "action.pin": Pin,
@@ -2923,7 +2938,13 @@ var iconRegistry = {
   "view.preview": Eye,
   "viewport.desktop": Monitor,
   "viewport.mobile": Smartphone,
-  "viewport.tablet": Tablet
+  "viewport.tablet": Tablet,
+  /** A channel or account on Telegram (a filter, a connect choice). */
+  "brand.telegram": Telegram,
+  /** A channel or account on VK. */
+  "brand.vk": Vk,
+  /** A channel or account on WhatsApp. */
+  "brand.whatsapp": Whatsapp
 };
 
 // src/icons/Icon.tsx
@@ -3868,16 +3889,39 @@ function splitChange(from, to) {
 function digitsOnly(a, b) {
   return a.replace(/\d/g, "") === b.replace(/\d/g, "");
 }
-function letters(text, kind) {
-  return [...text].map((char, i) => /* @__PURE__ */ jsx14(
-    "span",
-    {
-      className: cx(MorphText_default.letter, kind === "in" ? MorphText_default.letterIn : MorphText_default.letterOut),
-      style: { "--morph-i": i },
-      children: char
-    },
-    i
-  ));
+function letters(text, kind, poses) {
+  return [...text].map((char, i) => {
+    const pose = poses?.[i];
+    const style = { "--morph-i": i };
+    if (pose) {
+      style["--morph-opacity"] = pose.opacity;
+      style["--morph-y"] = `${pose.y}px`;
+    }
+    return /* @__PURE__ */ jsx14(
+      "span",
+      {
+        className: cx(MorphText_default.letter, kind === "in" ? MorphText_default.letterIn : MorphText_default.letterOut),
+        style,
+        children: char
+      },
+      i
+    );
+  });
+}
+function readPoses(layer) {
+  if (!layer) return [];
+  return Array.from(layer.children, (letter) => {
+    const computed = getComputedStyle(letter);
+    const opacity = Number.parseFloat(computed.opacity);
+    if (Number.isNaN(opacity)) return void 0;
+    const transform = computed.transform;
+    const y = transform && transform !== "none" && typeof DOMMatrixReadOnly === "function" ? new DOMMatrixReadOnly(transform).m42 : 0;
+    return { opacity, y };
+  });
+}
+function posesOf(label, running, layerPoses) {
+  const head = [...splitChange(running.from, running.to).prefix].length;
+  return [...label].map((_, i) => layerPoses[i - head]);
 }
 function settleMs(text) {
   const base = readCssDurationMs("--prime-motion-duration-base");
@@ -3888,6 +3932,8 @@ function MorphText({ children: text, className }) {
   const rootRef = React36.useRef(null);
   const segmentRef = React36.useRef(null);
   const sizerRef = React36.useRef(null);
+  const outLayerRef = React36.useRef(null);
+  const inLayerRef = React36.useRef(null);
   const prevText = React36.useRef(null);
   const restWidth = React36.useRef(null);
   const nextId = React36.useRef(0);
@@ -3904,9 +3950,24 @@ function MorphText({ children: text, className }) {
       return;
     }
     const running = morphRef.current;
-    const width = running ? root.getBoundingClientRect().width : restWidth.current?.width ?? 0;
     nextId.current += 1;
-    setMorph({ id: nextId.current, from: running ? running.to : prev, to: text, width });
+    if (!running) {
+      setMorph({ id: nextId.current, from: prev, to: text, width: restWidth.current?.width ?? 0 });
+      return;
+    }
+    const from = running.to;
+    const change2 = splitChange(from, text);
+    const head = [...change2.prefix].length;
+    const arriving = posesOf(from, running, readPoses(inLayerRef.current));
+    const leaving = posesOf(running.from, running, readPoses(outLayerRef.current));
+    setMorph({
+      id: nextId.current,
+      from,
+      to: text,
+      width: root.getBoundingClientRect().width,
+      outPoses: arriving.slice(head, head + [...change2.out].length),
+      inPoses: text === running.from ? leaving.slice(head, head + [...change2.in].length) : void 0
+    });
   }, [text]);
   const change = morph ? splitChange(morph.from, morph.to) : null;
   React36.useLayoutEffect(() => {
@@ -3916,13 +3977,13 @@ function MorphText({ children: text, className }) {
     const sizer = sizerRef.current;
     if (!root || !segment || !sizer) return;
     const target = sizer.getBoundingClientRect().width;
-    const still = root.getBoundingClientRect().width - target;
+    const still = root.getBoundingClientRect().width - segment.getBoundingClientRect().width;
     const from = Math.max(0, morph.width - still);
-    if (target !== from) {
-      segment.style.width = `${from}px`;
-      segment.getBoundingClientRect();
-      segment.style.width = `${target}px`;
-    }
+    segment.style.transition = "none";
+    segment.style.width = `${from}px`;
+    segment.getBoundingClientRect();
+    segment.style.transition = "";
+    segment.style.width = `${target}px`;
     const changed = splitChange(morph.from, morph.to);
     const longest = changed.in.length > changed.out.length ? changed.in : changed.out;
     const timer = window.setTimeout(() => setMorph(null), settleMs(longest));
@@ -3939,8 +4000,16 @@ function MorphText({ children: text, className }) {
     /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: change.prefix }),
     /* @__PURE__ */ jsxs8("span", { ref: segmentRef, className: MorphText_default.segment, "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx14("span", { ref: sizerRef, className: MorphText_default.sizer, children: change.in }),
-      /* @__PURE__ */ jsx14("span", { className: cx(MorphText_default.layer, MorphText_default.layerOut), children: letters(change.out, "out") }, `out-${morph.id}`),
-      /* @__PURE__ */ jsx14("span", { className: cx(MorphText_default.layer, MorphText_default.layerIn), children: letters(change.in, "in") }, `in-${morph.id}`)
+      /* @__PURE__ */ jsx14(
+        "span",
+        {
+          ref: outLayerRef,
+          className: cx(MorphText_default.layer, MorphText_default.layerOut),
+          children: letters(change.out, "out", morph.outPoses)
+        },
+        `out-${morph.id}`
+      ),
+      /* @__PURE__ */ jsx14("span", { ref: inLayerRef, className: cx(MorphText_default.layer, MorphText_default.layerIn), children: letters(change.in, "in", morph.inPoses) }, `in-${morph.id}`)
     ] }),
     /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: change.suffix }),
     /* @__PURE__ */ jsx14(VisuallyHidden, { children: morph.to })
@@ -7938,7 +8007,6 @@ import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-
 var SELECT_LABELS = {
   search: "\u041F\u043E\u0438\u0441\u043A",
   empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
-  emptyHint: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u043E\u0441",
   loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
   retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C",
   clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
@@ -8492,10 +8560,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
               ]
             }
           ),
-          region === "ready" && isEmpty ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "status", children: [
-            /* @__PURE__ */ jsx41(EmptyPage.Title, { as: "p", children: labels.empty }),
-            query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx41(EmptyPage.Description, { children: labels.emptyHint }) : null
-          ] }) : null,
+          region === "ready" && isEmpty ? /* @__PURE__ */ jsx41(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx41(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null,
           actions.length > 0 ? (
             // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under
             // the scroller and the empty state for the eye.