prime-ui-kit 0.21.0 → 0.21.2

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

@@ -2,6 +2,7 @@
 
 import {
   Activity,
+  AppWindow,
   ArrowDown,
   ArrowUp,
   ArrowUpDown,
@@ -139,7 +140,7 @@ import {
   useIconRoot,
   useOptionalControlSize,
   usePresence
-} from "./chunk-QFHE5GKW.js";
+} from "./chunk-T7IEJSTH.js";
 
 // src/components/scroll-container/ScrollContainer.tsx
 import * as React9 from "react";
@@ -1208,7 +1209,7 @@ var axisClass = {
 function ScrollContainer({
   as: Component = "div",
   axis = "vertical",
-  overscrollBehavior = "contain",
+  overscrollBehavior = "auto",
   edges = "fade",
   scrollbar = "thin",
   lock = false,
@@ -2276,7 +2277,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 +2821,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,
@@ -3868,16 +3874,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 +3917,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 +3935,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 +3962,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 +3985,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 })

package/dist/chunks/{chunk-S4H2ZKWJ.js → chunk-ME4VEAQ5.js}

@@ -183,7 +183,7 @@ import {
   useTextParts,
   visuallyHiddenClass,
   zonedParts
-} from "./chunk-S27VR4ON.js";
+} from "./chunk-7JYPFRZ3.js";
 import {
   COMPACT_QUERY,
   ControlSizeProvider,
@@ -206,7 +206,7 @@ import {
   useHostTier,
   useOptionalControlSize,
   usePresence
-} from "./chunk-QFHE5GKW.js";
+} from "./chunk-T7IEJSTH.js";
 
 // src/layout/app-shell/AppShell.tsx
 import * as React from "react";
@@ -280,7 +280,6 @@ function AppShellMain({ className, children, ...rest }) {
       as: "main",
       axis: "vertical",
       edges: "none",
-      overscrollBehavior: "contain",
       className: cx(AppShell_default.main, className),
       children
     }
@@ -422,9 +421,11 @@ function setFlag(element, name, on) {
   else element.removeAttribute(name);
 }
 function placeIndicator(indicator, target, animate) {
+  const visible = indicator.hasAttribute("data-visible");
   if (!target) {
-    setFlag(indicator, "data-visible", false);
+    setFlag(indicator, "data-fade", animate && visible);
     setFlag(indicator, "data-animate", false);
+    setFlag(indicator, "data-visible", false);
     return;
   }
   const left = `${target.offsetLeft}px`;
@@ -433,12 +434,14 @@ function placeIndicator(indicator, target, animate) {
   const height = `${target.offsetHeight}px`;
   const { style } = indicator;
   if (style.left !== left || style.top !== top || style.width !== width || style.height !== height) {
-    setFlag(indicator, "data-animate", animate && indicator.hasAttribute("data-visible"));
+    setFlag(indicator, "data-animate", animate && visible);
     style.left = left;
     style.top = top;
     style.width = width;
     style.height = height;
   }
+  if (!visible) setFlag(indicator, "data-fade", animate);
+  else if (!animate) setFlag(indicator, "data-fade", false);
   setFlag(indicator, "data-visible", true);
 }
 function endIndicatorGlide(event) {
@@ -446,6 +449,7 @@ function endIndicatorGlide(event) {
   if (["left", "top", "width", "height"].includes(event.propertyName)) {
     setFlag(event.currentTarget, "data-animate", false);
   }
+  if (event.propertyName === "opacity") setFlag(event.currentTarget, "data-fade", false);
 }
 function offsetIn(scroller, item) {
   let offset = 0;
@@ -1833,7 +1837,14 @@ function DialogActions({ className, children, ...rest }) {
 }
 DialogActions.displayName = "Dialog.Actions";
 function DialogBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx9(ScrollContainer, { className: cx(DialogParts_default.body, className), ...rest });
+  return /* @__PURE__ */ jsx9(
+    ScrollContainer,
+    {
+      overscrollBehavior: "contain",
+      className: cx(DialogParts_default.body, className),
+      ...rest
+    }
+  );
 }
 DialogBody.displayName = "Dialog.Body";
 function flowOf(parent) {
@@ -13434,9 +13445,24 @@ function estimateOf(body, specs, shell, reactions, author, actionRows) {
   return Math.round(size + (reactions ? 36 : 0) + actionRows * ACTIONS_ESTIMATE + 8);
 }
 var NO_REACTIONS = [];
-function isLinkKey(props) {
+var ABSOLUTE_ADDRESS = /^([a-z][a-z\d+.-]*:|\/\/)/i;
+function leavesProduct(address) {
+  if (typeof location === "undefined") return ABSOLUTE_ADDRESS.test(address);
+  try {
+    return new URL(address, location.href).origin !== location.origin;
+  } catch {
+    return ABSOLUTE_ADDRESS.test(address);
+  }
+}
+function linkMarkOf(props) {
   const child = props.children;
-  return props.asChild === true && React43.isValidElement(child) && child.type === "a" && child.props.href !== void 0;
+  if (props.asChild !== true || !React43.isValidElement(child)) {
+    return void 0;
+  }
+  const { href, to } = child.props;
+  const address = typeof href === "string" ? href : typeof to === "string" ? to : void 0;
+  if (address === void 0) return void 0;
+  return leavesProduct(address) ? "action.externalLink" : "action.openApp";
 }
 function MessageActions({ className, children, ...rest }) {
   const { pending, track: track2 } = usePendingKeys();
@@ -13445,10 +13471,12 @@ function MessageActions({ className, children, ...rest }) {
       return child;
     }
     const { props } = child;
-    const link = isLinkKey(props) ? React43.cloneElement(props.children, {
+    const mark2 = linkMarkOf(props);
+    const linkChild = props.children;
+    const link = mark2 ? React43.cloneElement(linkChild, {
       children: /* @__PURE__ */ jsxs32(Fragment22, { children: [
-        props.children.props.children,
-        /* @__PURE__ */ jsx43(Icon, { name: "action.externalLink", size: "xs", className: Message_default.linkMark })
+        linkChild.props.children,
+        /* @__PURE__ */ jsx43(Icon, { name: mark2, size: "xs", className: Message_default.linkMark })
       ] })
     }) : void 0;
     return React43.cloneElement(child, {
@@ -19812,6 +19840,7 @@ function CommandMenuList({ className, children, ref, ...rest }) {
       {
         ...rest,
         ref: mergedRef,
+        overscrollBehavior: "contain",
         id: listboxId,
         role: "listbox",
         "aria-busy": loading || loadingMore || void 0,
@@ -25470,7 +25499,6 @@ function DataTable({
               ref: scrollRef,
               axis: "both",
               edges: "none",
-              overscrollBehavior: "none",
               className: cx(fieldTierClass, DataTable_default.viewport),
               "data-size": "xs",
               style: { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight },
@@ -28847,7 +28875,6 @@ function Gantt({
               ref: scrollRef,
               axis: "both",
               edges: "none",
-              overscrollBehavior: "none",
               className: Gantt_default.viewport,
               style: typeof scrollHeight === "number" ? { maxHeight: `${scrollHeight}px` } : void 0,
               onScroll: () => {

package/dist/chunks/{chunk-IVS3J7AS.js → chunk-SQGPQOUO.js}

@@ -2,7 +2,7 @@
 
 import {
   defineGlyph
-} from "./chunk-QFHE5GKW.js";
+} from "./chunk-T7IEJSTH.js";
 
 // src/icons/glyphs/a-arrow-down.tsx
 import { jsx, jsxs } from "react/jsx-runtime";