@m4l/gclick 0.27.0-beta-feature-795-m4l-react-native-ui-indicator-flag.2 → 0.27.0

package/@types/types.d.ts

@@ -6,7 +6,6 @@ import { GaugeCircularOwnerState, GaugeCircularSlotsType } from '../components/G
 import { IndicatorCSQOwnerState, IndicatorCSQSlotsType } from '../components/indicators/IndicatorCSQ/types';
 import { IndicatorBatteryOwnerState, IndicatorBatterySlotsType } from '../components/indicators/IndicatorBattery/types';
 import { IndicatorValueStatusSlotsType } from '../components/indicators/IndicatorValueStatus/types';
-import { IndicatorFlagOwnerState, IndicatorFlagSlotsType } from '../components/indicators/IndicatorFlag/types';
 import { VideoTimeLineSelectorOwnerState, VideoTimeLineSelectorSlotsType } from '../components/VideoTimeLineSelector/types';
 import { VideoPlayerOwnerState, VideoPlayerSlotsType } from '../components/VideoPlayer/types';
 import { CameraStreamOwnerState, CameraStreamSlotsStyledType } from '../components/CameraStream/types';
@@ -31,7 +30,6 @@ declare module '@mui/material/styles' {
     M4LCSQSignal: IndicatorCSQSlotsType;
     M4LIndicatorBattery: IndicatorBatterySlotsType;
     M4LIndicatorValueStatus: IndicatorValueStatusSlotsType;
-    M4LIndicatorFlag: IndicatorFlagSlotsType;
     M4LVideoTimeLineSelector: VideoTimeLineSelectorSlotsType;
     M4LVideoPlayer: VideoPlayerSlotsType;
     M4LCameraStream: CameraStreamSlotsStyledType;
@@ -50,7 +48,6 @@ declare module '@mui/material/styles' {
     M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
     M4LIndicatorBattery:  Partial<IndicatorBatteryOwnerState>;
     M4LIndicatorValueStatus:  Partial<IndicatorValueStatusOwnerState>;
-    M4LIndicatorFlag: Partial<IndicatorFlagOwnerState>;
     M4LVideoTimeLineSelector:  Partial<VideoTimeLineSelectorOwnerState>;
     M4LVideoPlayer: Partial<VideoPlayerOwnerState>;
     M4LCameraStream: Partial<CameraStreamOwnerState>;
@@ -104,11 +101,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueStatus'];
       variants?: ComponentsVariants['M4LIndicatorValueStatus'];
     };
-    M4LIndicatorFlag?: {
-      defaultProps?: ComponentsPropsList['M4LIndicatorFlag'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorFlag'];
-      variants?: ComponentsVariants['M4LIndicatorFlag'];
-    };
     M4LVideoTimeLineSelector?: {
       defaultProps?: ComponentsPropsList['M4LVideoTimeLineSelector'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LVideoTimeLineSelector'];

package/components/CameraStream/CameraStream.styles.d.ts

@@ -1,3 +1,15 @@
+import { CSSObject, Theme } from '@mui/material/styles';
 import { CameraStreamStyles } from './types';
+/**
+ * Position of an overlay a consumer adds to the tile's top-end corner beside
+ * the package's badges — OMM Playback's request button while the clip plays,
+ * for instance. Give the overlay `CAMERA_STREAM_END_OVERLAY_CLASSNAME` too, so
+ * the root keeps the label clear of it in a compact tile.
+ *
+ * In a roomy tile it takes the row below LIVE. In a compact one that row would
+ * graze the control bar (at 160x90 the mini chrome starts the bar 55px down,
+ * the row would end at 54px), so it joins the top row beside LIVE's 24px dot.
+ */
+export declare function getCameraStreamEndOverlayStyles(theme: Theme): CSSObject;
 export declare const cameraStreamStyles: CameraStreamStyles;
 //# sourceMappingURL=CameraStream.styles.d.ts.map

package/components/CameraStream/CameraStream.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraStream.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/CameraStream.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAe1E,eAAO,MAAM,kBAAkB,EAAE,kBAgVhC,CAAC"}
+{"version":3,"file":"CameraStream.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/CameraStream.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AASzE,OAAO,KAAK,EAA0B,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAe1E;;;;;;;;;GASG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAyBvE;AAED,eAAO,MAAM,kBAAkB,EAAE,kBAqZhC,CAAC"}

package/components/CameraStream/CameraStream.styles.js

@@ -1,5 +1,33 @@
 import { alpha as e } from "@mui/material/styles";
-const t = 0.92, p = {
+import { CAMERA_STREAM_CONTAINER_NAME as c, CAMERA_STREAM_COMPACT_QUERY as r, CAMERA_STREAM_LABEL_MAX_WIDTH as n, CAMERA_STREAM_END_CORNER_VAR as p, CAMERA_STREAM_END_OVERLAY_CLASSNAME as l } from "./constants.js";
+const d = 0.92;
+function u(a) {
+  const s = a.vars.size.baseSpacings;
+  return {
+    position: "absolute",
+    // LIVE's height plus the corner gap. A fixed offset on purpose: a
+    // `translateY(100%)` follows the overlay's own height, which changes when
+    // the badge inside collapses to its icon.
+    top: `calc(${s.sp2} + ${s["sp4-5"]} + ${s.sp1})`,
+    right: s.sp2,
+    maxWidth: `calc(100% - 2 * ${s.sp2})`,
+    display: "flex",
+    justifyContent: "flex-end",
+    zIndex: 1e3,
+    // The package's badges position themselves; inside the overlay they follow
+    // its flow instead and take its width as their budget. `> button` outranks
+    // the badge's own single-class rule.
+    "& > button": {
+      position: "static",
+      maxWidth: "100%"
+    },
+    [r]: {
+      top: s.sp2,
+      right: `calc(${s.sp2} + ${s.sp6} + ${s["sp0-5"]})`
+    }
+  };
+}
+const v = {
   /**
    * Outer tile container. Sizing is delegated to the parent layout
    * (`react-grid-layout` in TabCameras). The tile is a DS surface that
@@ -37,6 +65,17 @@ const t = 0.92, p = {
     "@keyframes cameraStreamFadeIn": {
       from: { opacity: 0, transform: "scale(0.97)" },
       to: { opacity: 1, transform: "scale(1)" }
+    },
+    // The tile is the container every overlay measures itself against (see
+    // `CAMERA_STREAM_COMPACT_QUERY`). `inline-size` creates neither a stacking
+    // context nor a containing block for `fixed` descendants (checked in
+    // Chromium and WebKit), so the overlays keep painting over the grid.
+    containerType: "inline-size",
+    containerName: c,
+    // A consumer overlay in the top-end corner sits beside LIVE's dot in a
+    // compact tile, so the label leaves room for two corner items, not one.
+    [`&:has(.${l})`]: {
+      [p]: `calc(2 * ${a.vars.size.baseSpacings.sp6} + ${a.vars.size.baseSpacings["sp0-5"]})`
     }
   }),
   /**
@@ -50,8 +89,8 @@ const t = 0.92, p = {
    * chip in the DS — preset-aware (patronus / grass / turqui / brown /
    * blaze) and mode-aware (light / dark) without any inline alpha.
    */
-  label: ({ theme: a, ownerState: r }) => {
-    const i = r?.phaseKind === "streaming", s = a.vars.palette.chips.primary.contained;
+  label: ({ theme: a, ownerState: s }) => {
+    const t = s?.phaseKind === "streaming", o = a.vars.palette.chips.primary.contained;
     return {
       position: "absolute",
       top: a.vars.size.baseSpacings.sp2,
@@ -60,15 +99,24 @@ const t = 0.92, p = {
       boxShadow: a.customShadows.card,
       cursor: "grab",
       userSelect: "none",
+      // The label shares the top row with the top-end badges and never runs
+      // under them: `DefaultLabel` turns on the Chip's `ellipsis`, so a long
+      // camera name truncates inside this budget.
+      maxWidth: n,
+      [r]: {
+        // The corner only holds 24px items here (the replay icon or LIVE's
+        // dot, plus a consumer end overlay), so the label takes the rest.
+        maxWidth: `calc(100% - 2 * ${a.vars.size.baseSpacings.sp2} - ${a.vars.size.baseSpacings.sp1} - var(${p}, ${a.vars.size.baseSpacings.sp6}))`
+      },
       transition: "opacity 0.15s ease-in-out, background-color 0.15s ease-in-out",
-      opacity: i ? 0.45 : 1,
+      opacity: t ? 0.45 : 1,
       "&:hover": {
         opacity: 1,
-        backgroundColor: s.backgroundHoverTone
+        backgroundColor: o.backgroundHoverTone
       },
       "&:active": {
         cursor: "grabbing",
-        backgroundColor: s.backgroundActiveTone
+        backgroundColor: o.backgroundActiveTone
       },
       "&::before": {
         content: '"⋮⋮"',
@@ -88,7 +136,7 @@ const t = 0.92, p = {
    * `customShadows.error` (DS-defined red glow) instead of inline rgba.
    */
   liveBadge: ({ theme: a }) => {
-    const r = e(a.palette.error.light, 0.7), o = e(a.palette.error.light, 0);
+    const s = e(a.palette.error.light, 0.7), i = e(a.palette.error.light, 0);
     return {
       position: "absolute",
       display: "flex",
@@ -96,7 +144,7 @@ const t = 0.92, p = {
       gap: a.vars.size.baseSpacings["sp1-5"],
       top: a.vars.size.baseSpacings.sp2,
       right: a.vars.size.baseSpacings.sp2,
-      backgroundColor: e(a.palette.error.main, t),
+      backgroundColor: e(a.palette.error.main, d),
       color: a.vars.palette.error.contrastText,
       padding: `${a.vars.size.baseSpacings["sp0-5"]} ${a.vars.size.baseSpacings.sp2}`,
       borderRadius: a.vars.size.borderRadius.r1,
@@ -113,13 +161,24 @@ const t = 0.92, p = {
         height: a.vars.size.baseSpacings.sp2,
         borderRadius: "50%",
         backgroundColor: a.vars.palette.error.light,
-        boxShadow: `0 0 0 0 ${r}`,
+        boxShadow: `0 0 0 0 ${s}`,
         animation: "cameraStreamLivePulse 1.4s cubic-bezier(0.66, 0, 0, 1) infinite"
       },
       "@keyframes cameraStreamLivePulse": {
-        "0%": { boxShadow: `0 0 0 0 ${r}` },
-        "70%": { boxShadow: `0 0 0 6px ${o}` },
-        "100%": { boxShadow: `0 0 0 0 ${o}` }
+        "0%": { boxShadow: `0 0 0 0 ${s}` },
+        "70%": { boxShadow: `0 0 0 6px ${i}` },
+        "100%": { boxShadow: `0 0 0 0 ${i}` }
+      },
+      // Compact tile: only the pulsing dot stays, so the label keeps its row.
+      // `font-size: 0` hides the word visually only; screen readers still get it.
+      [r]: {
+        fontSize: 0,
+        letterSpacing: 0,
+        gap: 0,
+        width: a.vars.size.baseSpacings.sp6,
+        height: a.vars.size.baseSpacings["sp4-5"],
+        padding: 0,
+        justifyContent: "center"
       }
     };
   },
@@ -131,9 +190,15 @@ const t = 0.92, p = {
    * the stream, so it speaks the DS primary-chip language instead of the
    * error/broadcast red, and keeps the frozen last frame fully visible (no
    * backdrop veil by design).
+   *
+   * One line always, within the room the label leaves. The text part
+   * (`replayBadgeText`) truncates and the detail (`replayBadgeDetail`, the
+   * Playback instant) never does. In a compact tile it becomes a 24px icon
+   * button, the WCAG 2.2 SC 2.5.8 minimum target; the full text stays its
+   * accessible name and its tooltip (`DefaultReplayBadge`).
    */
   replayBadge: ({ theme: a }) => {
-    const r = a.vars.palette.chips.primary.contained;
+    const s = a.vars.palette.chips.primary.contained;
     return {
       position: "absolute",
       display: "flex",
@@ -141,8 +206,8 @@ const t = 0.92, p = {
       gap: a.vars.size.baseSpacings["sp1-5"],
       top: a.vars.size.baseSpacings.sp2,
       right: a.vars.size.baseSpacings.sp2,
-      backgroundColor: r.backgroundColorTone,
-      color: r.colorTone,
+      backgroundColor: s.backgroundColorTone,
+      color: s.colorTone,
       padding: `${a.vars.size.baseSpacings["sp0-5"]} ${a.vars.size.baseSpacings.sp2}`,
       border: "none",
       borderRadius: a.vars.size.borderRadius.r1,
@@ -155,19 +220,51 @@ const t = 0.92, p = {
       cursor: "pointer",
       boxShadow: a.customShadows.card,
       transition: "background-color 0.15s ease-in-out",
+      whiteSpace: "nowrap",
+      maxWidth: `calc(100% - 2 * ${a.vars.size.baseSpacings.sp2} - ${a.vars.size.baseSpacings.sp1} - ${n})`,
       "&:hover, &:focus-visible": {
-        backgroundColor: r.backgroundHoverTone,
+        backgroundColor: s.backgroundHoverTone,
         outline: "none"
       },
       "&:active": {
-        backgroundColor: r.backgroundActiveTone
+        backgroundColor: s.backgroundActiveTone
       },
       "& svg": {
         width: 14,
-        height: 14
+        height: 14,
+        flexShrink: 0
+      },
+      [r]: {
+        width: a.vars.size.baseSpacings.sp6,
+        height: a.vars.size.baseSpacings.sp6,
+        padding: 0,
+        gap: 0,
+        justifyContent: "center"
       }
     };
   },
+  /**
+   * Text part of the replay badge: the one piece that gives way when the row
+   * is short, with an ellipsis. Hidden in a compact tile.
+   */
+  replayBadgeText: () => ({
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    [r]: {
+      display: "none"
+    }
+  }),
+  /**
+   * Detail of the replay badge (Playback's `· 14:32`). It names what the
+   * button fetches, so it never shrinks; hidden with the text in a compact tile.
+   */
+  replayBadgeDetail: () => ({
+    flexShrink: 0,
+    [r]: {
+      display: "none"
+    }
+  }),
   /**
    * Same corner as the LIVE badge but one row below, because unlike LIVE and
    * replay this one DOES coexist with them. The offset is the badge height plus
@@ -201,7 +298,7 @@ const t = 0.92, p = {
    * so the interaction stays preset-aware.
    */
   placeholderButton: ({ theme: a }) => {
-    const r = a.palette.mode === "dark", o = r ? e(a.palette.common.white, 0.85) : e(a.palette.text.primary, 0.75), i = r ? a.vars.palette.primary.contrastText : a.vars.palette.primary.main, s = r ? e(a.palette.common.white, 0.08) : e(a.palette.common.black, 0.04);
+    const s = a.palette.mode === "dark", i = s ? e(a.palette.common.white, 0.85) : e(a.palette.text.primary, 0.75), t = s ? a.vars.palette.primary.contrastText : a.vars.palette.primary.main, o = s ? e(a.palette.common.white, 0.08) : e(a.palette.common.black, 0.04);
     return {
       position: "absolute",
       inset: 0,
@@ -212,15 +309,15 @@ const t = 0.92, p = {
       gap: a.vars.size.baseSpacings.sp2,
       width: "100%",
       height: "100%",
-      background: `radial-gradient(circle at 50% 40%, ${s}, transparent 70%)`,
-      color: o,
+      background: `radial-gradient(circle at 50% 40%, ${o}, transparent 70%)`,
+      color: i,
       border: "none",
       cursor: "pointer",
       fontFamily: "inherit",
       transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
       "&:hover, &:focus-visible": {
         backgroundColor: a.vars.palette.primary.hoverOpacity,
-        color: i,
+        color: t,
         outline: "none"
       },
       "&:hover .camera-stream__placeholder-icon, &:focus-visible .camera-stream__placeholder-icon": {
@@ -317,5 +414,6 @@ const t = 0.92, p = {
   })
 };
 export {
-  p as cameraStreamStyles
+  v as cameraStreamStyles,
+  u as getCameraStreamEndOverlayStyles
 };

package/components/CameraStream/constants.d.ts

@@ -6,4 +6,40 @@
  */
 export declare const COMPONENT_CAMERA_STREAM_KEY_COMPONENT = "M4LCameraStream";
 export declare const COMPONENT_CAMERA_STREAM_TEST_ID = "M4LCameraStream";
+/**
+ * Size container the tile root declares (`inline-size`). Every overlay budgets
+ * its width against the tile through it, never against the viewport: a camera
+ * wall shows tiles of many sizes on the same screen.
+ */
+export declare const CAMERA_STREAM_CONTAINER_NAME = "m4l-camera-stream";
+/**
+ * Tile width below which the top-end overlays collapse: the replay badge to a
+ * 24px icon button and the LIVE badge to its pulsing dot. At 20rem (320px) the
+ * replay badge still fits its full text (179px) beside the label's budget
+ * (188px free); one step below, it would cut its text to a couple of letters.
+ * In rem, like the vendor's own breakpoints, so it follows the root font size.
+ */
+export declare const CAMERA_STREAM_COMPACT_WIDTH = "20rem";
+/** Container query that matches a compact tile (see `CAMERA_STREAM_COMPACT_WIDTH`). */
+export declare const CAMERA_STREAM_COMPACT_QUERY = "@container m4l-camera-stream (width < 20rem)";
+/**
+ * Share of the top row the label may take in a roomy tile; the replay badge
+ * takes the rest. Capped in rem so a wide tile does not hand a long camera
+ * name the whole row.
+ */
+export declare const CAMERA_STREAM_LABEL_MAX_WIDTH = "min(35%, 15rem)";
+/**
+ * Class that marks an overlay a consumer adds to the tile's top-end corner
+ * beside the package's own badges (OMM Playback's request button while the
+ * clip plays, for instance). The root detects it with `:has()` and, in a
+ * compact tile, makes the label leave room for a second corner item. Pair it
+ * with `getCameraStreamEndOverlayStyles` for the overlay's position.
+ */
+export declare const CAMERA_STREAM_END_OVERLAY_CLASSNAME = "camera-stream__end-overlay";
+/**
+ * Inline size the label leaves free at the top-end corner of a compact tile.
+ * Internal: the root sets it when an end overlay is mounted; unset, the label
+ * falls back to a single 24px corner item.
+ */
+export declare const CAMERA_STREAM_END_CORNER_VAR = "--m4l-camera-stream-end-corner";
 //# sourceMappingURL=constants.d.ts.map

package/components/CameraStream/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/constants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qCAAqC,oBAAoB,CAAC;AAEvE,eAAO,MAAM,+BAA+B,oBAAoB,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/constants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qCAAqC,oBAAoB,CAAC;AAEvE,eAAO,MAAM,+BAA+B,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,sBAAsB,CAAC;AAEhE;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,UAAU,CAAC;AAEnD,uFAAuF;AACvF,eAAO,MAAM,2BAA2B,iDAC+C,CAAC;AAExF;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,oBAAoB,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,mCAAmC,+BAA+B,CAAC;AAEhF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,mCAAmC,CAAC"}

package/components/CameraStream/constants.js

@@ -1,5 +1,11 @@
-const E = "M4LCameraStream", M = "M4LCameraStream";
+const E = "M4LCameraStream", M = "M4LCameraStream", A = "m4l-camera-stream", _ = "20rem", R = `@container ${A} (width < ${_})`, C = "min(35%, 15rem)", e = "camera-stream__end-overlay", T = "--m4l-camera-stream-end-corner";
 export {
+  R as CAMERA_STREAM_COMPACT_QUERY,
+  _ as CAMERA_STREAM_COMPACT_WIDTH,
+  A as CAMERA_STREAM_CONTAINER_NAME,
+  T as CAMERA_STREAM_END_CORNER_VAR,
+  e as CAMERA_STREAM_END_OVERLAY_CLASSNAME,
+  C as CAMERA_STREAM_LABEL_MAX_WIDTH,
   E as COMPONENT_CAMERA_STREAM_KEY_COMPONENT,
   M as COMPONENT_CAMERA_STREAM_TEST_ID
 };

package/components/CameraStream/defaults/DefaultLabel.d.ts

@@ -7,6 +7,9 @@ import { CameraStreamLabelSlotProps } from '../types';
  * the way of the video — the styled slot reads `ownerState.phaseKind` to
  * apply the fade via theme overrides.
  *
+ * `ellipsis` truncates a long camera name inside the width budget the styled
+ * slot gives the label, so it never runs under the top-end badges.
+ *
  * Extra props from `slotProps.label` are spread onto the root element so
  * consumers can attach `data-testid`, ARIA attributes, etc. without forking
  * the component.

package/components/CameraStream/defaults/DefaultLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultLabel.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultLabel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,mBAAmB,EACnB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,0BAA0B,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,oDAgBtD"}
+{"version":3,"file":"DefaultLabel.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultLabel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,0BAA0B,EAE3B,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,mBAAmB,EACnB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,0BAA0B,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,oDAiBtD"}

package/components/CameraStream/defaults/DefaultLabel.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "@emotion/react/jsx-runtime";
 import { MediaVideoOutlined as i } from "@m4l/icons";
 import { CameraLabelStyled as l } from "../slots/CameraStreamSlots.js";
-function d({
+function c({
   cameraLabel: t,
   dragHandleClassName: r,
   autoFade: a,
@@ -13,6 +13,7 @@ function d({
       variant: "contained",
       color: "primary",
       size: "small",
+      ellipsis: !0,
       startIcon: /* @__PURE__ */ e(i, { sx: { fontSize: 14, "& path": { fill: "currentColor" } } }),
       label: t,
       className: r,
@@ -24,5 +25,5 @@ function d({
   );
 }
 export {
-  d as DefaultLabel
+  c as DefaultLabel
 };

package/components/CameraStream/defaults/DefaultReplayBadge.d.ts

@@ -5,6 +5,11 @@ import { CameraStreamReplayBadgeSlotProps } from '../types';
  * re-requests the stream via the store's `replay` action while the frozen
  * last frame stays visible underneath. The parent decides when to mount it;
  * the slot itself just paints and dispatches.
+ *
+ * The label and the optional `replayDetail` are painted apart, so the label
+ * truncates first and the detail never does; in a compact tile both give way
+ * to the icon alone (`CameraStream.styles.ts`). The full phrase is always the
+ * button's accessible name and its DS tooltip, whatever the tile shows.
  */
-export declare function DefaultReplayBadge({ onReplay, replayLabel }: CameraStreamReplayBadgeSlotProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function DefaultReplayBadge({ onReplay, replayLabel, replayDetail }: CameraStreamReplayBadgeSlotProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DefaultReplayBadge.d.ts.map

package/components/CameraStream/defaults/DefaultReplayBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultReplayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultReplayBadge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAEjE;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,gCAAgC,oDAO7F"}
+{"version":3,"file":"DefaultReplayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/defaults/DefaultReplayBadge.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAKjE;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,gCAAgC,oDAgB3G"}

package/components/CameraStream/defaults/DefaultReplayBadge.js

@@ -1,12 +1,16 @@
-import { jsxs as t, jsx as e } from "@emotion/react/jsx-runtime";
-import { ArrowReloadOutlined as l } from "@m4l/icons";
-import { ReplayBadgeStyled as i } from "../slots/CameraStreamSlots.js";
-function d({ onReplay: o, replayLabel: r }) {
-  return /* @__PURE__ */ t(i, { type: "button", onClick: o, "aria-label": r, children: [
-    /* @__PURE__ */ e(l, { sx: { "& path": { fill: "currentColor" } } }),
-    r
-  ] });
+import { jsx as o, jsxs as d } from "@emotion/react/jsx-runtime";
+import { Tooltip as i } from "@m4l/base";
+import { ArrowReloadOutlined as c } from "@m4l/icons";
+import { ReplayBadgeStyled as f, ReplayBadgeTextStyled as m, ReplayBadgeDetailStyled as u } from "../slots/CameraStreamSlots.js";
+const r = "·";
+function h({ onReplay: n, replayLabel: l, replayDetail: t }) {
+  const e = t ? `${l} ${r} ${t}` : l;
+  return /* @__PURE__ */ o(i, { title: e, children: /* @__PURE__ */ d(f, { type: "button", onClick: n, "aria-label": e, children: [
+    /* @__PURE__ */ o(c, { sx: { "& path": { fill: "currentColor" } } }),
+    /* @__PURE__ */ o(m, { children: l }),
+    t ? /* @__PURE__ */ o(u, { children: `${r} ${t}` }) : null
+  ] }) });
 }
 export {
-  d as DefaultReplayBadge
+  h as DefaultReplayBadge
 };

package/components/CameraStream/index.d.ts

@@ -1,9 +1,9 @@
 export { CameraStream } from './CameraStream';
 export type { CameraStreamLabelSlotProps, CameraStreamLiveBadgeSlotProps, CameraStreamOwnerState, CameraStreamPhaseChannelBusySlotProps, CameraStreamPhaseErrorSlotProps, CameraStreamPhaseIdleSlotProps, CameraStreamPhasePollingSlotProps, CameraStreamPhaseRequestingSlotProps, CameraStreamPhaseStreamingSlotProps, CameraStreamPhaseTimeoutSlotProps, CameraStreamProps, CameraStreamReplayBadgeSlotProps, CameraStreamRootSlotProps, CameraStreamSharedBadgeSlotProps, CameraStreamSlotProps, CameraStreamSlots, CameraStreamSlotsStyledType, CameraStreamStyles, } from './types';
 export { CAMERA_STREAM_DRAG_HANDLE_CLASSNAME } from './types';
-export { COMPONENT_CAMERA_STREAM_KEY_COMPONENT, COMPONENT_CAMERA_STREAM_TEST_ID, } from './constants';
+export { CAMERA_STREAM_COMPACT_QUERY, CAMERA_STREAM_CONTAINER_NAME, CAMERA_STREAM_END_OVERLAY_CLASSNAME, COMPONENT_CAMERA_STREAM_KEY_COMPONENT, COMPONENT_CAMERA_STREAM_TEST_ID, } from './constants';
 export { CameraStreamSlotsStyled } from './slots/CameraStreamEnum';
-export { cameraStreamStyles } from './CameraStream.styles';
+export { cameraStreamStyles, getCameraStreamEndOverlayStyles } from './CameraStream.styles';
 export { DefaultLabel } from './defaults/DefaultLabel';
 export { DefaultLiveBadge } from './defaults/DefaultLiveBadge';
 export { DefaultPhaseChannelBusy } from './defaults/DefaultPhaseChannelBusy';

package/components/CameraStream/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EACV,0BAA0B,EAC1B,8BAA8B,EAC9B,sBAAsB,EACtB,qCAAqC,EACrC,+BAA+B,EAC/B,8BAA8B,EAC9B,iCAAiC,EACjC,oCAAoC,EACpC,mCAAmC,EACnC,iCAAiC,EACjC,iBAAiB,EACjB,gCAAgC,EAChC,yBAAyB,EACzB,gCAAgC,EAChC,qBAAqB,EACrB,iBAAiB,EACjB,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mCAAmC,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EACL,qCAAqC,EACrC,+BAA+B,GAChC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI3D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/gclick/src/components/CameraStream/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EACV,0BAA0B,EAC1B,8BAA8B,EAC9B,sBAAsB,EACtB,qCAAqC,EACrC,+BAA+B,EAC/B,8BAA8B,EAC9B,iCAAiC,EACjC,oCAAoC,EACpC,mCAAmC,EACnC,iCAAiC,EACjC,iBAAiB,EACjB,gCAAgC,EAChC,yBAAyB,EACzB,gCAAgC,EAChC,qBAAqB,EACrB,iBAAiB,EACjB,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mCAAmC,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EACL,2BAA2B,EAC3B,4BAA4B,EAC5B,mCAAmC,EACnC,qCAAqC,EACrC,+BAA+B,GAChC,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,+BAA+B,EAAE,MAAM,uBAAuB,CAAC;AAI5F,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}

package/components/CameraStream/slots/CameraStreamEnum.d.ts

@@ -15,6 +15,8 @@ export declare enum CameraStreamSlotsStyled {
     label = "label",
     liveBadge = "liveBadge",
     replayBadge = "replayBadge",
+    replayBadgeText = "replayBadgeText",
+    replayBadgeDetail = "replayBadgeDetail",
     sharedBadge = "sharedBadge",
     placeholderButton = "placeholderButton",
     placeholderIcon = "placeholderIcon",

package/components/CameraStream/slots/CameraStreamEnum.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraStreamEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/slots/CameraStreamEnum.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,SAAS,cAAc;CACxB"}
+{"version":3,"file":"CameraStreamEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/slots/CameraStreamEnum.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,KAAK,UAAU;IACf,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,eAAe,oBAAoB;IACnC,iBAAiB,sBAAsB;IACvC,WAAW,gBAAgB;IAC3B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,YAAY,iBAAiB;IAC7B,SAAS,cAAc;CACxB"}

package/components/CameraStream/slots/CameraStreamEnum.js

@@ -1,4 +1,4 @@
-var h = /* @__PURE__ */ ((p) => (p.root = "root", p.label = "label", p.liveBadge = "liveBadge", p.replayBadge = "replayBadge", p.sharedBadge = "sharedBadge", p.placeholderButton = "placeholderButton", p.placeholderIcon = "placeholderIcon", p.placeholderText = "placeholderText", p.phaseOverlay = "phaseOverlay", p.phaseSkeleton = "phaseSkeleton", p.phaseMessage = "phaseMessage", p.phaseHint = "phaseHint", p))(h || {});
+var p = /* @__PURE__ */ ((e) => (e.root = "root", e.label = "label", e.liveBadge = "liveBadge", e.replayBadge = "replayBadge", e.replayBadgeText = "replayBadgeText", e.replayBadgeDetail = "replayBadgeDetail", e.sharedBadge = "sharedBadge", e.placeholderButton = "placeholderButton", e.placeholderIcon = "placeholderIcon", e.placeholderText = "placeholderText", e.phaseOverlay = "phaseOverlay", e.phaseSkeleton = "phaseSkeleton", e.phaseMessage = "phaseMessage", e.phaseHint = "phaseHint", e))(p || {});
 export {
-  h as CameraStreamSlotsStyled
+  p as CameraStreamSlotsStyled
 };

package/components/CameraStream/slots/CameraStreamSlots.d.ts

@@ -23,6 +23,12 @@ export declare const LiveBadgeStyled: import('@emotion/styled').StyledComponent<
 export declare const ReplayBadgeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').CameraStreamOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import('react').ClassAttributes<HTMLButtonElement> | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement>>, {}>;
+export declare const ReplayBadgeTextStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').CameraStreamOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const ReplayBadgeDetailStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('..').CameraStreamOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const SharedBadgeStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('..').CameraStreamOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/CameraStream/slots/CameraStreamSlots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CameraStreamSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/slots/CameraStreamSlots.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,gBAAgB;;6NAGF,CAAC;AAK5B,eAAO,MAAM,iBAAiB;;UAIF,CAAC;AAE7B,eAAO,MAAM,eAAe;;6NAGI,CAAC;AAKjC,eAAO,MAAM,iBAAiB;;qPAGI,CAAC;AAEnC,eAAO,MAAM,iBAAiB;;6NAGI,CAAC;AAEnC,eAAO,MAAM,uBAAuB;;qPAGI,CAAC;AAEzC,eAAO,MAAM,4BAA4B;;iOAGH,CAAC;AAEvC,eAAO,MAAM,qBAAqB;;UAGI,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;6NAGI,CAAC;AAEpC,eAAO,MAAM,mBAAmB;;6NAGI,CAAC;AAErC,eAAO,MAAM,kBAAkB;;UAGI,CAAC;AAEpC,eAAO,MAAM,eAAe;;UAGI,CAAC"}
+{"version":3,"file":"CameraStreamSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/gclick/src/components/CameraStream/slots/CameraStreamSlots.ts"],"names":[],"mappings":"AAQA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,gBAAgB;;6NAGF,CAAC;AAK5B,eAAO,MAAM,iBAAiB;;UAIF,CAAC;AAE7B,eAAO,MAAM,eAAe;;6NAGI,CAAC;AAKjC,eAAO,MAAM,iBAAiB;;qPAGI,CAAC;AAInC,eAAO,MAAM,qBAAqB;;iOAGI,CAAC;AAEvC,eAAO,MAAM,uBAAuB;;iOAGI,CAAC;AAEzC,eAAO,MAAM,iBAAiB;;6NAGI,CAAC;AAEnC,eAAO,MAAM,uBAAuB;;qPAGI,CAAC;AAEzC,eAAO,MAAM,4BAA4B;;iOAGH,CAAC;AAEvC,eAAO,MAAM,qBAAqB;;UAGI,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;6NAGI,CAAC;AAEpC,eAAO,MAAM,mBAAmB;;6NAGI,CAAC;AAErC,eAAO,MAAM,kBAAkB;;UAGI,CAAC;AAEpC,eAAO,MAAM,eAAe;;UAGI,CAAC"}