@cratis/components 3.4.0 → 3.5.0

package/dist/esm/Canvas/isBackgroundPointerTarget.js

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+// A real drag handle (module/feature/slice headers, row labels, sticky notes, link connectors, ...)
+// always claims its own gesture with stopPropagation before it can bubble up to the canvas — so by
+// the time a touch pointerdown reaches the canvas, it is never one of those, and a single finger
+// anywhere else should pan rather than be silently swallowed by whatever content sits under it.
+// Mouse/pen keep the strict check: only the bare container or its rendering canvas count as background.
+function isBackgroundPointerTarget(pointerType, readOnly, target, container) {
+    if (readOnly || pointerType === 'touch')
+        return true;
+    if (target === container)
+        return true;
+    return target?.tagName === 'CANVAS';
+}
+
+export { isBackgroundPointerTarget };
+//# sourceMappingURL=isBackgroundPointerTarget.js.map

package/dist/esm/Canvas/isBackgroundPointerTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBackgroundPointerTarget.js","sources":["../../../Canvas/isBackgroundPointerTarget.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACM,SAAU,yBAAyB,CACrC,WAAmB,EACnB,QAAiB,EACjB,MAA0B,EAC1B,SAA6B,EAAA;AAE7B,IAAA,IAAI,QAAQ,IAAI,WAAW,KAAK,OAAO;AAAE,QAAA,OAAO,IAAI;IACpD,IAAI,MAAM,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;AACrC,IAAA,OAAQ,MAA6B,EAAE,OAAO,KAAK,QAAQ;AAC/D;;;;"}

package/dist/esm/Canvas/isWithinScrollableContent.d.ts

@@ -0,0 +1,11 @@
+export interface ScrollableMetrics {
+    overflowX: string;
+    overflowY: string;
+    scrollWidth: number;
+    clientWidth: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+export declare function hasScrollableOverflow(metrics: ScrollableMetrics): boolean;
+export declare function isWithinScrollableContent(target: EventTarget | null, container: HTMLElement | null): boolean;
+//# sourceMappingURL=isWithinScrollableContent.d.ts.map

package/dist/esm/Canvas/isWithinScrollableContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isWithinScrollableContent.d.ts","sourceRoot":"","sources":["../../../Canvas/isWithinScrollableContent.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AAQD,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAIzE;AAOD,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAiB5G"}

package/dist/esm/Canvas/isWithinScrollableContent.js

@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Whether an element's own content actually overflows its box in a direction its CSS lets it scroll —
+ * the two conditions both have to hold: the CSS opts into scrolling, and there is more content than the
+ * box shows. Pulled out of {@link isWithinScrollableContent} so this decision is testable on plain data,
+ * without a real DOM (the surrounding walk needs one; this predicate does not).
+ */
+function hasScrollableOverflow(metrics) {
+    const canScrollY = (metrics.overflowY === 'auto' || metrics.overflowY === 'scroll') && metrics.scrollHeight > metrics.clientHeight;
+    const canScrollX = (metrics.overflowX === 'auto' || metrics.overflowX === 'scroll') && metrics.scrollWidth > metrics.clientWidth;
+    return canScrollY || canScrollX;
+}
+// A wheel/trackpad gesture that lands inside a scrollable overlay — a chat's message list, a properties
+// panel, anything with its own `overflow-y: auto` — must scroll that content natively instead of being
+// captured as a canvas pan (StudioIssues#229). Walking up from the event target toward the canvas
+// container, the first ancestor whose own content actually overflows its box claims the gesture; the
+// search stops at the container itself, so gestures over the bare board are never affected.
+function isWithinScrollableContent(target, container) {
+    let element = target instanceof Node ? (target instanceof HTMLElement ? target : target.parentElement) : null;
+    while (element && element !== container) {
+        const style = getComputedStyle(element);
+        if (hasScrollableOverflow({
+            overflowX: style.overflowX,
+            overflowY: style.overflowY,
+            scrollWidth: element.scrollWidth,
+            clientWidth: element.clientWidth,
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight,
+        }))
+            return true;
+        element = element.parentElement;
+    }
+    return false;
+}
+
+export { hasScrollableOverflow, isWithinScrollableContent };
+//# sourceMappingURL=isWithinScrollableContent.js.map

package/dist/esm/Canvas/isWithinScrollableContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isWithinScrollableContent.js","sources":["../../../Canvas/isWithinScrollableContent.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAYA;;;;;AAKG;AACG,SAAU,qBAAqB,CAAC,OAA0B,EAAA;IAC5D,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,KAAK,QAAQ,KAAK,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY;IAClI,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,SAAS,KAAK,QAAQ,KAAK,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW;IAChI,OAAO,UAAU,IAAI,UAAU;AACnC;AAEA;AACA;AACA;AACA;AACA;AACM,SAAU,yBAAyB,CAAC,MAA0B,EAAE,SAA6B,EAAA;IAC/F,IAAI,OAAO,GAAG,MAAM,YAAY,IAAI,IAAI,MAAM,YAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC,aAAa,IAAI,IAAI;AAE7G,IAAA,OAAO,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE;AACrC,QAAA,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,qBAAqB,CAAC;YACtB,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,YAAY,EAAE,OAAO,CAAC,YAAY;YAClC,YAAY,EAAE,OAAO,CAAC,YAAY;SACrC,CAAC;AAAE,YAAA,OAAO,IAAI;AACf,QAAA,OAAO,GAAG,OAAO,CAAC,aAAa;IACnC;AAEA,IAAA,OAAO,KAAK;AAChB;;;;"}

package/dist/esm/Canvas/panMomentum.d.ts

@@ -0,0 +1,13 @@
+export interface PanSample {
+    x: number;
+    y: number;
+    time: number;
+}
+export interface PanVelocity {
+    x: number;
+    y: number;
+}
+export declare function trimSamples(samples: PanSample[], windowMs: number): PanSample[];
+export declare function velocityFromSamples(samples: PanSample[], minVelocity: number): PanVelocity | null;
+export declare function decayVelocity(velocity: PanVelocity, elapsedMs: number, friction: number): PanVelocity;
+//# sourceMappingURL=panMomentum.d.ts.map

package/dist/esm/Canvas/panMomentum.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panMomentum.d.ts","sourceRoot":"","sources":["../../../Canvas/panMomentum.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,SAAS;IAEtB,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;IAGV,IAAI,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,WAAW;IAExB,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;CACb;AAOD,wBAAgB,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,CAU/E;AAOD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAUjG;AAGD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,WAAW,CAGrG"}

package/dist/esm/Canvas/panMomentum.js

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Drops samples older than windowMs, measured from the newest one — the trailing window a touch pan's
+ * release velocity is read from, so a drag that was moving fast earlier but came to rest before the
+ * finger actually lifted correctly produces no momentum. Always keeps at least one sample.
+ */
+function trimSamples(samples, windowMs) {
+    const trimmed = [...samples];
+    const newest = trimmed[trimmed.length - 1];
+    if (!newest)
+        return trimmed;
+    while (trimmed.length > 1 && newest.time - trimmed[0].time > windowMs) {
+        trimmed.shift();
+    }
+    return trimmed;
+}
+/**
+ * The release velocity implied by the oldest and newest sample in the window, or null when there are
+ * too few samples, they carry no time delta, or the release was slower than minVelocity — too slow for
+ * momentum to be worth animating.
+ */
+function velocityFromSamples(samples, minVelocity) {
+    if (samples.length < 2)
+        return null;
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    const elapsedMs = last.time - first.time;
+    if (elapsedMs <= 0)
+        return null;
+    const velocity = { x: (last.x - first.x) / elapsedMs, y: (last.y - first.y) / elapsedMs };
+    return Math.hypot(velocity.x, velocity.y) >= minVelocity ? velocity : null;
+}
+/** Decays a velocity exponentially over elapsedMs at the given friction rate. */
+function decayVelocity(velocity, elapsedMs, friction) {
+    const decay = Math.exp(-35e-4 * elapsedMs);
+    return { x: velocity.x * decay, y: velocity.y * decay };
+}
+
+export { decayVelocity, trimSamples, velocityFromSamples };
+//# sourceMappingURL=panMomentum.js.map

package/dist/esm/Canvas/panMomentum.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panMomentum.js","sources":["../../../Canvas/panMomentum.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAqBA;;;;AAIG;AACG,SAAU,WAAW,CAAC,OAAoB,EAAE,QAAgB,EAAA;AAC9D,IAAA,MAAM,OAAO,GAAG,CAAC,GAAG,OAAO,CAAC;IAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AAC1C,IAAA,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,OAAO;AAE3B,IAAA,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,EAAE;QACnE,OAAO,CAAC,KAAK,EAAE;IACnB;AAEA,IAAA,OAAO,OAAO;AAClB;AAEA;;;;AAIG;AACG,SAAU,mBAAmB,CAAC,OAAoB,EAAE,WAAmB,EAAA;AACzE,IAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC;AAAE,QAAA,OAAO,IAAI;AAEnC,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IACxB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI;IACxC,IAAI,SAAS,IAAI,CAAC;AAAE,QAAA,OAAO,IAAI;AAE/B,IAAA,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,SAAS,EAAE;IACzF,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,QAAQ,GAAG,IAAI;AAC9E;AAEA;SACgB,aAAa,CAAC,QAAqB,EAAE,SAAiB,EAAE,QAAgB,EAAA;IACpF,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAS,GAAG,SAAS,CAAC;AAC7C,IAAA,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE;AAC3D;;;;"}

package/dist/esm/Canvas/pinchGesture.d.ts

@@ -0,0 +1,16 @@
+export interface PointerPosition {
+    x: number;
+    y: number;
+}
+export interface PinchSnapshot {
+    center: PointerPosition;
+    distance: number;
+}
+export interface PinchChange {
+    panX: number;
+    panY: number;
+    scale: number;
+}
+export declare function pinchSnapshotOf(pointers: Iterable<PointerPosition>): PinchSnapshot | null;
+export declare function pinchChangeBetween(previous: PinchSnapshot, current: PinchSnapshot): PinchChange;
+//# sourceMappingURL=pinchGesture.d.ts.map

package/dist/esm/Canvas/pinchGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinchGesture.d.ts","sourceRoot":"","sources":["../../../Canvas/pinchGesture.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAE5B,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;CACb;AAGD,MAAM,WAAW,aAAa;IAG1B,MAAM,EAAE,eAAe,CAAC;IAGxB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAGD,MAAM,WAAW,WAAW;IAGxB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,MAAM,CAAC;CACjB;AAOD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG,aAAa,GAAG,IAAI,CAQzF;AAMD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,GAAG,WAAW,CAM/F"}

package/dist/esm/Canvas/pinchGesture.js

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Builds the pinch geometry from the currently active pointers. The first two are used, so a third
+ * finger landing mid-gesture never re-defines the pinch under the user's hands. Returns null with
+ * fewer than two pointers — there is no pinch to describe.
+ */
+function pinchSnapshotOf(pointers) {
+    const [first, second] = [...pointers];
+    if (!first || !second)
+        return null;
+    return {
+        center: { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 },
+        distance: Math.hypot(second.x - first.x, second.y - first.y),
+    };
+}
+/**
+ * The pan and zoom deltas between two snapshots of the same gesture. A degenerate previous distance
+ * (both fingers on the same spot) yields no zoom rather than an infinite one.
+ */
+function pinchChangeBetween(previous, current) {
+    return {
+        panX: current.center.x - previous.center.x,
+        panY: current.center.y - previous.center.y,
+        scale: previous.distance > 0 ? current.distance / previous.distance : 1,
+    };
+}
+
+export { pinchChangeBetween, pinchSnapshotOf };
+//# sourceMappingURL=pinchGesture.js.map

package/dist/esm/Canvas/pinchGesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinchGesture.js","sources":["../../../Canvas/pinchGesture.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAgCA;;;;AAIG;AACG,SAAU,eAAe,CAAC,QAAmC,EAAA;IAC/D,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;AACrC,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;IAElC,OAAO;AACH,QAAA,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE;QACpE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;KAC/D;AACL;AAEA;;;AAGG;AACG,SAAU,kBAAkB,CAAC,QAAuB,EAAE,OAAsB,EAAA;IAC9E,OAAO;QACH,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC1C,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC1C,QAAA,KAAK,EAAE,QAAQ,CAAC,QAAQ,GAAG,CAAC,GAAG,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC,QAAQ,GAAG,CAAC;KAC1E;AACL;;;;"}

package/dist/esm/Canvas/selfSuspendingFrameLoop.d.ts

@@ -0,0 +1,10 @@
+type FrameScheduler = (callback: (now: number) => void) => number;
+type FrameCanceler = (handle: number) => void;
+export interface SelfSuspendingFrameLoop {
+    readonly isRunning: boolean;
+    wake(): void;
+    stop(): void;
+}
+export declare const createSelfSuspendingFrameLoop: (step: (now: number) => boolean, schedule?: FrameScheduler, cancel?: FrameCanceler) => SelfSuspendingFrameLoop;
+export {};
+//# sourceMappingURL=selfSuspendingFrameLoop.d.ts.map

package/dist/esm/Canvas/selfSuspendingFrameLoop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selfSuspendingFrameLoop.d.ts","sourceRoot":"","sources":["../../../Canvas/selfSuspendingFrameLoop.ts"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC;AAClE,KAAK,aAAa,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAE9C,MAAM,WAAW,uBAAuB;IAEpC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAI5B,IAAI,IAAI,IAAI,CAAC;IAGb,IAAI,IAAI,IAAI,CAAC;CAChB;AAOD,eAAO,MAAM,6BAA6B,GACtC,MAAM,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,EAC9B,WAAU,cAA4D,EACtE,SAAQ,aAAsD,KAC/D,uBA0BF,CAAC"}

package/dist/esm/Canvas/selfSuspendingFrameLoop.js

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+// An animation-frame loop that runs only while its step reports motion left to follow, instead of
+// burning a callback every frame forever (the board-page idle drain of StudioIssues#200). The step
+// runs once per frame and returns whether another frame is needed; when it returns false the loop
+// suspends until the next wake(). The scheduler is injectable so the suspension logic can be
+// specified without a browser.
+const createSelfSuspendingFrameLoop = (step, schedule = callback => requestAnimationFrame(callback), cancel = handle => cancelAnimationFrame(handle)) => {
+    let handle;
+    const frame = (now) => {
+        handle = undefined;
+        if (step(now)) {
+            handle = schedule(frame);
+        }
+    };
+    return {
+        get isRunning() {
+            return handle !== undefined;
+        },
+        wake() {
+            handle ??= schedule(frame);
+        },
+        stop() {
+            if (handle !== undefined) {
+                cancel(handle);
+                handle = undefined;
+            }
+        },
+    };
+};
+
+export { createSelfSuspendingFrameLoop };
+//# sourceMappingURL=selfSuspendingFrameLoop.js.map

package/dist/esm/Canvas/selfSuspendingFrameLoop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selfSuspendingFrameLoop.js","sources":["../../../Canvas/selfSuspendingFrameLoop.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAiBA;AACA;AACA;AACA;AACA;AACO,MAAM,6BAA6B,GAAG,CACzC,IAA8B,EAC9B,QAAA,GAA2B,QAAQ,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EACtE,MAAA,GAAwB,MAAM,IAAI,oBAAoB,CAAC,MAAM,CAAC,KACrC;AACzB,IAAA,IAAI,MAA0B;AAE9B,IAAA,MAAM,KAAK,GAAG,CAAC,GAAW,KAAI;QAC1B,MAAM,GAAG,SAAS;AAClB,QAAA,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE;AACX,YAAA,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;QAC5B;AACJ,IAAA,CAAC;IAED,OAAO;AACH,QAAA,IAAI,SAAS,GAAA;YACT,OAAO,MAAM,KAAK,SAAS;QAC/B,CAAC;QAED,IAAI,GAAA;AACA,YAAA,MAAM,KAAK,QAAQ,CAAC,KAAK,CAAC;QAC9B,CAAC;QAED,IAAI,GAAA;AACA,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;gBACtB,MAAM,CAAC,MAAM,CAAC;gBACd,MAAM,GAAG,SAAS;YACtB;QACJ,CAAC;KACJ;AACL;;;;"}

package/dist/esm/Canvas/shapes/ChatBubble/AnchoredOverlay.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, RefObject } from 'react';
+export type AnchoredOverlaySide = 'above' | 'below' | 'left' | 'right';
+export type AnchoredOverlayAlign = 'left' | 'right' | 'center';
+export interface AnchoredOverlayProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    open: boolean;
+    side?: AnchoredOverlaySide;
+    align?: AnchoredOverlayAlign;
+    gap?: number;
+    children: ReactNode;
+}
+export declare const AnchoredOverlay: React.FC<AnchoredOverlayProps>;
+//# sourceMappingURL=AnchoredOverlay.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/AnchoredOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/ChatBubble/AnchoredOverlay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAGvE,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IAGjC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAGzC,IAAI,EAAE,OAAO,CAAC;IAGd,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAG3B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAG7B,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,QAAQ,EAAE,SAAS,CAAC;CACvB;AA6CD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6B1D,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/AnchoredOverlay.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+/** Space on the preferred side under which an above/below overlay flips to the other side. */
+const FLIP_THRESHOLD = 260;
+function computePlacement(anchor, side, align, gap) {
+    if (side === 'left' || side === 'right') {
+        return {
+            top: anchor.top + (anchor.height / 2),
+            left: side === 'right' ? anchor.right + gap : anchor.left - gap,
+            transform: side === 'right' ? 'translateY(-50%)' : 'translate(-100%, -50%)',
+        };
+    }
+    const spaceBelow = window.innerHeight - anchor.bottom - gap;
+    const spaceAbove = anchor.top - gap;
+    const resolved = side === 'below'
+        ? (spaceBelow < FLIP_THRESHOLD && spaceAbove > spaceBelow ? 'above' : 'below')
+        : (spaceAbove < FLIP_THRESHOLD && spaceBelow > spaceAbove ? 'below' : 'above');
+    const horizontal = align === 'center'
+        ? { left: anchor.left + (anchor.width / 2), transform: 'translateX(-50%)' }
+        : align === 'right'
+            ? { left: anchor.right, transform: 'translateX(-100%)' }
+            : { left: anchor.left, transform: undefined };
+    return resolved === 'below'
+        ? { top: anchor.bottom + gap, ...horizontal }
+        : { bottom: window.innerHeight - anchor.top + gap, ...horizontal };
+}
+/**
+ * Renders its children into a fixed-position portal on <body>, anchored to an element on the board.
+ * Board overlays (menus, pickers, tooltips) must float above everything: the slice columns use
+ * content-visibility paint containment for virtualization, which clips any absolutely-positioned
+ * descendant to the column box — portaling is what lets an overlay escape (the same approach the
+ * Cratis Dropdown takes with appendTo=document.body).
+ */
+const AnchoredOverlay = ({ anchorRef, open, side = 'below', align = 'left', gap = 8, children }) => {
+    const [placement, setPlacement] = useState();
+    useLayoutEffect(() => {
+        if (!open) {
+            setPlacement(undefined);
+            return;
+        }
+        const anchor = anchorRef.current?.getBoundingClientRect();
+        if (!anchor)
+            return;
+        setPlacement(computePlacement(anchor, side, align, gap));
+    }, [open, side, align, gap, anchorRef]);
+    if (!open || !placement)
+        return null;
+    return createPortal(jsx("div", { style: {
+            position: 'fixed',
+            zIndex: 1300,
+            top: placement.top,
+            bottom: placement.bottom,
+            left: placement.left,
+            transform: placement.transform,
+        }, children: children }), document.body);
+};
+
+export { AnchoredOverlay };
+//# sourceMappingURL=AnchoredOverlay.js.map

package/dist/esm/Canvas/shapes/ChatBubble/AnchoredOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnchoredOverlay.js","sources":["../../../../../Canvas/shapes/ChatBubble/AnchoredOverlay.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.d.ts

@@ -0,0 +1,20 @@
+import type { Guid } from '@cratis/fundamentals';
+export interface BuildAvatarUrlParams {
+    userId: string;
+    ownerType: 'Users' | 'Personas' | 'Agents';
+    avatarSize: 'Small' | 'Medium';
+    version?: number | string;
+}
+export interface PersonAvatarCircleProps {
+    userId: Guid | string;
+    name: string;
+    hasAvatar: boolean;
+    size: number;
+    ownerType?: 'Users' | 'Personas' | 'Agents';
+    avatarSize?: 'Small' | 'Medium';
+    version?: number | string;
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+    className?: string;
+}
+export declare const PersonAvatarCircle: ({ userId, name, hasAvatar, size, ownerType, avatarSize, version, buildAvatarUrl, className }: PersonAvatarCircleProps) => import("react").JSX.Element;
+//# sourceMappingURL=PersonAvatarCircle.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonAvatarCircle.d.ts","sourceRoot":"","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAKjD,MAAM,WAAW,oBAAoB;IAGjC,MAAM,EAAE,MAAM,CAAC;IAGf,SAAS,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IAG3C,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC;IAG/B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IAGpC,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IAGtB,IAAI,EAAE,MAAM,CAAC;IAGb,SAAS,EAAE,OAAO,CAAC;IAGnB,IAAI,EAAE,MAAM,CAAC;IAGb,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IAG5C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAMhC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAO1B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,MAAM,CAAC;IAG1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD,eAAO,MAAM,kBAAkB,GAAI,8FAAkH,uBAAuB,gCAwB3K,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { getInitials } from './getInitials.js';
+import { getAvatarColor } from './getAvatarColor.js';
+
+/**
+ * Renders a person's avatar image when one has been uploaded and a URL can be built for it, falling
+ * back to their initials on a color derived from their identifier so the same person always shows the
+ * same fallback color.
+ */
+const PersonAvatarCircle = ({ userId, name, hasAvatar, size, ownerType = 'Users', avatarSize = 'Small', version, buildAvatarUrl, className }) => {
+    const initials = getInitials(name);
+    const dimension = `${size}px`;
+    const src = buildAvatarUrl?.({ userId: userId.toString(), ownerType, avatarSize, version });
+    // The "has avatar" signal can outlive the stored image (e.g. a persona flag that stays set
+    // after the blob is gone), which otherwise leaves a broken image and a stream of 404s.
+    // Track the src that failed and fall back to initials for it — a new src (re-upload bumps the
+    // version) is retried.
+    const [failedSrc, setFailedSrc] = useState(null);
+    const showImage = hasAvatar && !!src && src !== failedSrc;
+    return (jsx("span", { className: className ? `person-avatar-circle ${className}` : 'person-avatar-circle', style: { width: dimension, height: dimension, background: showImage ? undefined : getAvatarColor(userId.toString()) }, "aria-label": name, title: name, children: showImage
+            ? jsx("img", { className: 'person-avatar-circle-image', src: src, alt: name, draggable: false, onError: () => setFailedSrc(src) })
+            : jsx("span", { className: 'person-avatar-circle-initials', style: { fontSize: `${Math.max(8, Math.round(size * 0.4))}px` }, children: initials }) }));
+};
+
+export { PersonAvatarCircle };
+//# sourceMappingURL=PersonAvatarCircle.js.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonAvatarCircle.js","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/PersonAvatarCircle.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AA6DA;;;;AAIG;AACI,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,EAAE,UAAU,GAAG,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAA2B,KAAI;AAC5K,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC;AAClC,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,IAAI,IAAI;IAC7B,MAAM,GAAG,GAAG,cAAc,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;;;;;IAM3F,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IAC/D,MAAM,SAAS,GAAG,SAAS,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,SAAS;IAEzD,QACIA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,SAAS,GAAG,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAE,GAAG,sBAAsB,EACnF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAA,YAAA,EACzG,IAAI,EAChB,KAAK,EAAE,IAAI,EAAA,QAAA,EAEV;cACKA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,GAAG,CAAC,EAAA;AACrH,cAAEA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+BAA+B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAA,EAAA,CAAI,EAAE,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAQ,EAAA,CACrI;AAEf;;;;"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.d.ts

@@ -0,0 +1,2 @@
+export declare const getAvatarColor: (seed: string) => string;
+//# sourceMappingURL=getAvatarColor.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAvatarColor.d.ts","sourceRoot":"","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAM7C,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.js

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+const AVATAR_COLORS = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#0ea5e9', '#10b981', '#14b8a6'];
+/**
+ * Computes a deterministic avatar background color from a stable seed - the person's identifier -
+ * so the same person always shows the same fallback color everywhere their avatar appears,
+ * regardless of how their name is rendered in that context.
+ * @param seed A stable identifier for the person (e.g. their user id as a string).
+ * @returns A hex color from the predefined avatar palette.
+ */
+const getAvatarColor = (seed) => {
+    let hash = 0;
+    for (let charIndex = 0; charIndex < seed.length; charIndex++) {
+        hash = (hash * 31 + seed.charCodeAt(charIndex)) | 0;
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+
+export { getAvatarColor };
+//# sourceMappingURL=getAvatarColor.js.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getAvatarColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAvatarColor.js","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/getAvatarColor.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAEA,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;AAE9G;;;;;;AAMG;AACI,MAAM,cAAc,GAAG,CAAC,IAAY,KAAY;IACnD,IAAI,IAAI,GAAG,CAAC;AACZ,IAAA,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;AAC1D,QAAA,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC;IACvD;AACA,IAAA,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC;AAC/D;;;;"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getInitials.d.ts

@@ -0,0 +1,2 @@
+export declare const getInitials: (name: string) => string;
+//# sourceMappingURL=getInitials.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getInitials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.d.ts","sourceRoot":"","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/getInitials.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,MACgE,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getInitials.js

@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Computes up to two uppercase initials from a display name.
+ * @param name The display name.
+ * @returns One or two initials, or '?' when none can be derived.
+ */
+const getInitials = (name) => name.trim().split(/\s+/).filter(Boolean).map(word => word[0]).join('').slice(0, 2).toUpperCase() || '?';
+
+export { getInitials };
+//# sourceMappingURL=getInitials.js.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/getInitials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.js","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/getInitials.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAEA;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,IAAY,KACpC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI;;;;"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { PersonAvatarCircle } from './PersonAvatarCircle';
+export type { PersonAvatarCircleProps, BuildAvatarUrlParams } from './PersonAvatarCircle';
+export { getAvatarColor } from './getAvatarColor';
+export { getInitials } from './getInitials';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/index.js

@@ -0,0 +1,4 @@
+export { PersonAvatarCircle } from './PersonAvatarCircle';
+export { getAvatarColor } from './getAvatarColor';
+export { getInitials } from './getInitials';
+//# sourceMappingURL=index.js.map

package/dist/esm/Canvas/shapes/ChatBubble/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../Canvas/shapes/ChatBubble/Avatar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Chat.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Guid } from '@cratis/fundamentals';
+import type { BuildAvatarUrlParams } from './Avatar';
+import { type ChatComposerLabels } from './ChatComposer';
+import { type ChatMessageBubbleLabels } from './ChatMessageBubble';
+import type { ChatMessage } from './ChatMessage';
+import type { ChatTypingAuthor } from './ChatTypingAuthor';
+import { ChatVariant } from './ChatVariant';
+import { type FailedReplyLabels, type FailedReplyReportDetails } from './FailedReply';
+import type { MentionCandidate } from './Mentions';
+export interface ChatLabels {
+    title?: string;
+    close?: string;
+    closePanel?: string;
+    noComments?: string;
+    typing?: string;
+    typingTwo?: string;
+    typingSeveral?: string;
+    composer?: ChatComposerLabels;
+    messageBubble?: ChatMessageBubbleLabels;
+    failedReply?: FailedReplyLabels;
+}
+export interface ChatProps {
+    messages: ChatMessage[];
+    onSend: (text: string) => void;
+    onClose: () => void;
+    title?: string;
+    autoFocus?: boolean;
+    variant?: ChatVariant;
+    mentionCandidates?: MentionCandidate[];
+    typingAuthors?: ChatTypingAuthor[];
+    currentUserId?: Guid;
+    onReact?: (messageId: Guid, emoji: string) => void;
+    onAct?: (messageId: Guid) => void;
+    canAct?: (message: ChatMessage) => boolean;
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+    buildReportUrl?: (details: FailedReplyReportDetails) => string;
+    labels?: ChatLabels;
+}
+export declare const Chat: React.FC<ChatProps>;
+//# sourceMappingURL=Chat.d.ts.map

package/dist/esm/Canvas/shapes/ChatBubble/Chat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/ChatBubble/Chat.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAyC,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAChG,OAAO,EAAqB,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAMnD,MAAM,WAAW,UAAU;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAE9B,aAAa,CAAC,EAAE,uBAAuB,CAAC;IAExC,WAAW,CAAC,EAAE,iBAAiB,CAAC;CACnC;AAED,MAAM,WAAW,SAAS;IAEtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IAExB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,OAAO,CAAC;IAMpB,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAGvC,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAOnC,aAAa,CAAC,EAAE,IAAI,CAAC;IAGrB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAMnD,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,KAAK,IAAI,CAAC;IAKlC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;IAG3C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,MAAM,CAAC;IAM1D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,MAAM,CAAC;IAI/D,MAAM,CAAC,EAAE,UAAU,CAAC;CACvB;AA0DD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuFpC,CAAC"}

package/dist/esm/Canvas/shapes/ChatBubble/Chat.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { ChatComposer } from './ChatComposer.js';
+import { ChatMessageBubble } from './ChatMessageBubble.js';
+import { ChatVariant } from './ChatVariant.js';
+import { FailedReply } from './FailedReply.js';
+import { TypingIndicator } from './TypingIndicator.js';
+
+function formatTimestamp(date) {
+    const diffMs = Date.now() - date.getTime();
+    const diffMinutes = Math.floor(diffMs / 60_000);
+    if (diffMinutes < 1)
+        return 'just now';
+    if (diffMinutes < 60)
+        return `${diffMinutes}m ago`;
+    const diffHours = Math.floor(diffMinutes / 60);
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+function sameMinute(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate() &&
+        a.getHours() === b.getHours() &&
+        a.getMinutes() === b.getMinutes());
+}
+function computeRenderInfo(messages) {
+    return messages.map((message, index) => {
+        const previous = index > 0 ? messages[index - 1] : null;
+        const next = index < messages.length - 1 ? messages[index + 1] : null;
+        const showAuthor = !previous || previous.authorName !== message.authorName;
+        const showTimestamp = !next ||
+            next.authorName !== message.authorName ||
+            !sameMinute(message.timestamp, next.timestamp);
+        return { showAuthor, showTimestamp };
+    });
+}
+/**
+ * Composes the "X is typing" line from whoever the conversation is waiting on.
+ * @param authors The authors currently typing or working.
+ * @param labels Label overrides, as passed to {@link Chat}.
+ * @returns The label to show, empty when nobody is.
+ */
+function typingLabel(authors, labels) {
+    if (authors.length === 0)
+        return '';
+    if (authors.length === 1)
+        return (labels?.typing ?? '{name} is typing').replace('{name}', authors[0].name);
+    if (authors.length === 2)
+        return (labels?.typingTwo ?? '{first} and {second} are typing').replace('{first}', authors[0].name).replace('{second}', authors[1].name);
+    return labels?.typingSeveral ?? 'Several people are typing';
+}
+const Chat = ({ messages, onSend, onClose, title, autoFocus = false, variant = ChatVariant.Floating, mentionCandidates, typingAuthors = [], currentUserId, onReact, onAct, canAct, buildAvatarUrl, buildReportUrl, labels, }) => {
+    const messagesEndRef = useRef(null);
+    const composerRef = useRef(null);
+    const renderInfo = useMemo(() => computeRenderInfo(messages), [messages]);
+    const isDocked = variant === ChatVariant.Docked;
+    const resolvedTitle = title ?? labels?.title ?? 'Comments';
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }, [messages, typingAuthors.length]);
+    const quickReply = (authorName) => composerRef.current?.prefill(`@${authorName} `);
+    return (jsxs("div", { className: `chat-panel${isDocked ? ' chat-panel--docked' : ''}`, onClick: event => event.stopPropagation(), children: [!isDocked && (jsxs("div", { className: 'chat-panel-header', children: [jsx("span", { className: 'chat-panel-title', children: resolvedTitle }), jsx("button", { className: 'chat-panel-close', onClick: onClose, title: labels?.close ?? 'Close', "aria-label": labels?.closePanel ?? 'Close panel', children: "\u00D7" })] })), jsxs("div", { className: 'chat-panel-messages', children: [messages.length === 0 && (jsx("p", { className: 'chat-panel-empty', children: labels?.noComments ?? 'No comments yet. Be the first!' })), messages.map((message, index) => {
+                        // A turn that ended in failure is not something its author said, so it never becomes
+                        // a bubble — it stands where the answer would have been and says so.
+                        if (message.failureDetail !== undefined) {
+                            return jsx(FailedReply, { message: message, buildReportUrl: buildReportUrl, labels: labels?.failedReply }, message.id.toString());
+                        }
+                        const { showAuthor, showTimestamp } = renderInfo[index];
+                        return (jsx(ChatMessageBubble, { message: message, showAuthor: showAuthor, showTimestamp: showTimestamp, formattedTimestamp: formatTimestamp(message.timestamp), currentUserId: currentUserId, onReact: onReact, onQuickReply: quickReply, onAct: onAct && (canAct?.(message) ?? true) ? onAct : undefined, buildAvatarUrl: buildAvatarUrl, labels: labels?.messageBubble }, message.id.toString()));
+                    }), jsx(TypingIndicator, { authors: typingAuthors, label: typingLabel(typingAuthors, labels), buildAvatarUrl: buildAvatarUrl }), jsx("div", { ref: messagesEndRef })] }), jsx(ChatComposer, { ref: composerRef, mentionCandidates: mentionCandidates, onSend: onSend, autoFocus: autoFocus, buildAvatarUrl: buildAvatarUrl, labels: labels?.composer })] }));
+};
+
+export { Chat };
+//# sourceMappingURL=Chat.js.map