@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-video-grid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../video-grid/src/video-grid.ts", "../../video-grid/src/video-grid.styles.ts", "../../react-video-grid/src/video-grid.tsx"],
+  "sourcesContent": ["/**\n * Layout mode for a VideoGrid.\n *\n * - 'auto'    — choose grid or speaker view based on participant count (≤1 forces speaker)\n * - 'grid'    — always render an even CSS grid of tiles\n * - 'speaker' — render one large spotlight tile + a filmstrip row for the rest\n */\nexport type VideoGridLayout = 'auto' | 'grid' | 'speaker'\n\n/**\n * Bucket label that describes the rough meeting size.\n * Useful for analytics and adaptive UI decisions.\n */\nexport type VideoGridBucket =\n  | 'solo'\n  | 'pair'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'townhall'\n\nexport interface VideoGridHeadlessProps {\n  /** Desired layout mode. */\n  layout?: VideoGridLayout\n}\n\nexport interface VideoGridAPI {\n  /** ARIA attributes to spread on the grid container. */\n  ariaProps: {\n    role: 'group'\n  }\n  /** Data attributes for CSS styling hooks. */\n  dataAttributes: {\n    'data-layout': VideoGridLayout\n    'data-count'?: string\n  }\n}\n\n/**\n * Compute the number of CSS grid columns for N participants.\n *\n * The responsive rule mirrors easyloops meeting layouts:\n *\n * | count | columns |\n * |-------|---------|\n * | 1     | 1       |\n * | 2     | 2       |\n * | 3–4   | 2       |\n * | 5–9   | 3       |\n * | 10–16 | 4       |\n * | 17–25 | 5       |\n * | 26+   | 6       |\n */\nexport function computeGridColumns(count: number): number {\n  if (count <= 1) return 1\n  if (count <= 4) return 2\n  if (count <= 9) return 3\n  if (count <= 16) return 4\n  if (count <= 25) return 5\n  return 6\n}\n\n/**\n * Label the meeting size as a human-readable bucket.\n *\n * Useful for analytics events and adaptive UI decisions without\n * coupling to the exact column math.\n */\nexport function bucketByCount(count: number): VideoGridBucket {\n  if (count <= 1) return 'solo'\n  if (count <= 2) return 'pair'\n  if (count <= 9) return 'small'\n  if (count <= 16) return 'medium'\n  if (count <= 25) return 'large'\n  return 'townhall'\n}\n\n/**\n * Build the framework-agnostic ARIA and data attributes for a VideoGrid\n * container.  Adapters spread these onto their host element.\n */\nexport function createVideoGrid(props: VideoGridHeadlessProps = {}): VideoGridAPI {\n  const { layout = 'auto' } = props\n\n  return {\n    ariaProps: {\n      role: 'group',\n    },\n    dataAttributes: {\n      'data-layout': layout,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Grid container variants.\n *\n * - `layout: 'grid'`    — uniform CSS grid; column count is set inline by the\n *   adapter using `computeGridColumns` (gridTemplateColumns).\n * - `layout: 'speaker'` — two-row layout: large spotlight on top, filmstrip row\n *   below. The adapter renders the spotlight as the first child and a horizontal\n *   overflow row for remaining tiles.\n */\nexport const videoGridVariants = cva({\n  base: 'w-full h-full gap-2',\n  variants: {\n    layout: {\n      grid: 'grid',\n      speaker: 'flex flex-col',\n      auto: 'grid',\n    },\n  },\n  defaultVariants: {\n    layout: 'auto',\n  },\n})\n\n/** Full-bleed spotlight area in speaker view (takes up remaining vertical space). */\nexport const videoGridSpotlightClass = 'relative flex-1 min-h-0 rounded-xl overflow-hidden bg-muted'\n\n/**\n * Horizontal filmstrip row used in speaker view.\n * Each tile in this row is constrained to a fixed width so the row scrolls\n * rather than wraps on large calls.\n */\nexport const videoGridFilmstripClass =\n  'flex flex-row gap-2 overflow-x-auto py-1 shrink-0'\n\n/** Individual filmstrip tile wrapper — fixed width so they don't collapse. */\nexport const videoGridFilmstripTileClass = 'w-36 shrink-0'\n", "import * as React from 'react'\nimport {\n  createVideoGrid,\n  computeGridColumns,\n  videoGridVariants,\n  videoGridSpotlightClass,\n  videoGridFilmstripClass,\n  videoGridFilmstripTileClass,\n  type VideoGridLayout,\n} from '@refraction-ui/video-grid'\nimport { cn } from '@refraction-ui/shared'\nimport { VideoTile, type VideoTileData } from '@refraction-ui/react-video-tile'\n\nexport type { VideoGridLayout, VideoTileData }\n\nexport interface VideoGridProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** List of participant data to render as tiles. */\n  participants: VideoTileData[]\n  /**\n   * Grid layout mode.\n   * - 'auto'    — grid unless ≤1 participant (falls back to speaker)\n   * - 'grid'    — always uniform CSS grid\n   * - 'speaker' — spotlight for `spotlightId` (or first participant) + filmstrip\n   */\n  layout?: VideoGridLayout\n  /**\n   * Participant `id` to spotlight in speaker view.\n   * Falls back to the first participant when omitted.\n   */\n  spotlightId?: string\n}\n\n/**\n * VideoGrid — adaptive participant grid for easyloops meetings.\n *\n * Composes `<VideoTile>` tiles in a responsive CSS grid (1→6 columns based on\n * participant count) or a speaker-view layout (spotlight + filmstrip). The\n * column math lives in the headless `@refraction-ui/video-grid` core so it is\n * shared with the Astro adapter.\n */\nexport const VideoGrid = React.forwardRef<HTMLDivElement, VideoGridProps>(\n  function VideoGrid(\n    {\n      participants,\n      layout = 'auto',\n      spotlightId,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const count = participants.length\n\n    // Resolve effective layout: 'auto' with ≤1 participant shows speaker view.\n    const effectiveLayout: VideoGridLayout =\n      layout === 'auto' ? (count <= 1 ? 'speaker' : 'grid') : layout\n\n    const api = createVideoGrid({ layout: effectiveLayout })\n    const columns = computeGridColumns(count)\n\n    const gridStyle: React.CSSProperties =\n      effectiveLayout !== 'speaker'\n        ? { gridTemplateColumns: `repeat(${columns}, 1fr)`, ...style }\n        : { ...style }\n\n    if (effectiveLayout === 'speaker') {\n      const spotlightParticipant =\n        participants.find((p) => p.id === spotlightId) ?? participants[0]\n      const filmstrip = participants.filter(\n        (p) => p.id !== spotlightParticipant?.id,\n      )\n\n      return (\n        <div\n          ref={ref}\n          className={cn(videoGridVariants({ layout: 'speaker' }), className)}\n          style={style}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          <div className={videoGridSpotlightClass}>\n            {spotlightParticipant && (\n              <VideoTile\n                key={spotlightParticipant.id}\n                name={spotlightParticipant.name}\n                micState={spotlightParticipant.micState ?? 'on'}\n                speaking={spotlightParticipant.speaking}\n                pinned={spotlightParticipant.pinned}\n              />\n            )}\n          </div>\n          {filmstrip.length > 0 && (\n            <div className={videoGridFilmstripClass}>\n              {filmstrip.map((p) => (\n                <div key={p.id} className={videoGridFilmstripTileClass}>\n                  <VideoTile\n                    name={p.name}\n                    micState={p.micState ?? 'on'}\n                    speaking={p.speaking}\n                    pinned={p.pinned}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(videoGridVariants({ layout: effectiveLayout }), className)}\n        style={gridStyle}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {participants.map((p) => (\n          <VideoTile\n            key={p.id}\n            name={p.name}\n            micState={p.micState ?? 'on'}\n            speaking={p.speaking}\n            pinned={p.pinned}\n          />\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AAqDO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,GAAI,QAAO;AACxB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAqBO,SAAS,gBAAgB,QAAgC,CAAA,GAAkB;AAChF,QAAM,EAAE,SAAS,OAAA,IAAW;AAE5B,SAAO;IACL,WAAW;MACT,MAAM;IAAA;IAER,gBAAgB;MACd,eAAe;IAAA;EACjB;AAEJ;ACjFO,IAAM,oBAAoB,IAAI;EACnC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,MAAM;MACN,SAAS;MACT,MAAM;IAAA;EACR;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAGM,IAAM,0BAA0B;AAOhC,IAAM,0BACX;AAGK,IAAM,8BAA8B;;;;ACIpC,IAAM,YAAkB;EAC7B,SAASA,WACP;IACE;IACA,SAAS;IACT;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,QAAQ,aAAa;AAG3B,UAAM,kBACJ,WAAW,SAAU,SAAS,IAAI,YAAY,SAAU;AAE1D,UAAM,MAAM,gBAAgB,EAAE,QAAQ,gBAAA,CAAiB;AACvD,UAAM,UAAU,mBAAmB,KAAK;AAExC,UAAM,YACJ,oBAAoB,YAChB,EAAE,qBAAqB,UAAU,OAAO,UAAU,GAAG,MAAA,IACrD,EAAE,GAAG,MAAA;AAEX,QAAI,oBAAoB,WAAW;AACjC,YAAM,uBACJ,aAAa,KAAK,CAAC,MAAM,EAAE,OAAO,WAAW,KAAK,aAAa,CAAC;AAClE,YAAM,YAAY,aAAa;QAC7B,CAAC,MAAM,EAAE,OAAO,sBAAsB;MAAA;AAGxC,aACE;QAAC;QAAA;UACC;UACA,WAAW,GAAG,kBAAkB,EAAE,QAAQ,UAAA,CAAW,GAAG,SAAS;UACjE;UACC,GAAG,IAAI;UACP,GAAG,IAAI;UACP,GAAG;UAEJ,UAAA;YAAA,oBAAC,OAAA,EAAI,WAAW,yBACb,UAAA,wBACC;cAAC;cAAA;gBAEC,MAAM,qBAAqB;gBAC3B,UAAU,qBAAqB,YAAY;gBAC3C,UAAU,qBAAqB;gBAC/B,QAAQ,qBAAqB;cAAA;cAJxB,qBAAqB;YAAA,EAK5B,CAEJ;YACC,UAAU,SAAS,KAClB,oBAAC,OAAA,EAAI,WAAW,yBACb,UAAA,UAAU,IAAI,CAAC,MACd,oBAAC,OAAA,EAAe,WAAW,6BACzB,UAAA;cAAC;cAAA;gBACC,MAAM,EAAE;gBACR,UAAU,EAAE,YAAY;gBACxB,UAAU,EAAE;gBACZ,QAAQ,EAAE;cAAA;YAAA,EACZ,GANQ,EAAE,EAOZ,CACD,EAAA,CACH;UAAA;QAAA;MAAA;IAIR;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,kBAAkB,EAAE,QAAQ,gBAAA,CAAiB,GAAG,SAAS;QACvE,OAAO;QACN,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH,UAAA,aAAa,IAAI,CAAC,MACjB;UAAC;UAAA;YAEC,MAAM,EAAE;YACR,UAAU,EAAE,YAAY;YACxB,UAAU,EAAE;YACZ,QAAQ,EAAE;UAAA;UAJL,EAAE;QAAA,CAMV;MAAA;IAAA;EAGP;AACF;",
+  "names": ["VideoGrid"]
+}

package/dist/react-video-player.js

@@ -0,0 +1,206 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-video-player/dist/index.js
+import * as React from "react";
+
+// ../video-player/dist/index.js
+function createVideoPlayer(props = {}) {
+  const { muted: initialMuted = false } = props;
+  let state = "idle";
+  let isMuted = initialMuted;
+  function play() {
+    if (state === "ended") {
+      state = "playing";
+    } else if (state !== "playing") {
+      state = "playing";
+    }
+  }
+  function pause() {
+    if (state === "playing") {
+      state = "paused";
+    }
+  }
+  function togglePlay() {
+    if (state === "playing") {
+      pause();
+    } else {
+      play();
+    }
+  }
+  function toggleMute() {
+    isMuted = !isMuted;
+    return isMuted;
+  }
+  const ariaProps = {
+    role: "region",
+    "aria-label": "Video player"
+  };
+  const api = {
+    get state() {
+      return state;
+    },
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
+    ariaProps,
+    get controlAriaProps() {
+      return {
+        playPause: {
+          "aria-label": state === "playing" ? "Pause" : "Play"
+        },
+        mute: {
+          "aria-label": isMuted ? "Unmute" : "Mute"
+        }
+      };
+    },
+    get dataAttributes() {
+      return {
+        "data-state": state
+      };
+    }
+  };
+  return api;
+}
+var playerVariants = cva({
+  base: "relative overflow-hidden rounded-lg bg-black",
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-2xl",
+      lg: "max-w-4xl",
+      full: "w-full"
+    }
+  },
+  defaultVariants: {
+    size: "full"
+  }
+});
+var controlsVariants = cva({
+  base: "absolute bottom-0 left-0 right-0 flex items-center gap-2 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity",
+  variants: {
+    visibility: {
+      visible: "opacity-100",
+      hidden: "opacity-0 pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    visibility: "visible"
+  }
+});
+var overlayVariants = cva({
+  base: "absolute inset-0 flex items-center justify-center bg-black/40 transition-opacity",
+  variants: {
+    visibility: {
+      visible: "opacity-100",
+      hidden: "opacity-0 pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    visibility: "visible"
+  }
+});
+
+// ../react-video-player/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var VideoPlayer = React.forwardRef(
+  function VideoPlayer2({
+    src,
+    poster,
+    autoplay = false,
+    muted: initialMuted = false,
+    controls = true,
+    className,
+    ...props
+  }, ref) {
+    const [, setTick] = React.useState(0);
+    const rerender = React.useCallback(() => setTick((t) => t + 1), []);
+    const apiRef = React.useRef(
+      createVideoPlayer({ src, poster, autoplay, muted: initialMuted, controls })
+    );
+    const api = apiRef.current;
+    if (!src) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn(playerVariants(), "flex items-center justify-center aspect-video", className),
+          ...api.ariaProps,
+          ...props,
+          children: /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-lg font-medium", children: "Coming soon" }) })
+        }
+      );
+    }
+    const handlePlay = () => {
+      api.play();
+      rerender();
+    };
+    const handlePause = () => {
+      api.pause();
+      rerender();
+    };
+    const handleTogglePlay = () => {
+      api.togglePlay();
+      rerender();
+    };
+    const handleToggleMute = () => {
+      api.toggleMute();
+      rerender();
+    };
+    const isPlaying = api.state === "playing";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(playerVariants(), "aspect-video", className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full",
+              src,
+              poster,
+              autoPlay: autoplay,
+              muted: initialMuted,
+              onPlay: handlePlay,
+              onPause: handlePause
+            }
+          ),
+          controls && /* @__PURE__ */ jsx("div", { className: overlayVariants({ visibility: isPlaying ? "hidden" : "visible" }), children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full bg-white/90 p-4 text-black shadow-lg",
+              onClick: handleTogglePlay,
+              ...api.controlAriaProps.playPause,
+              children: isPlaying ? "Pause" : "Play"
+            }
+          ) }),
+          controls && /* @__PURE__ */ jsx("div", { className: controlsVariants(), children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded bg-white/20 px-3 py-1 text-sm text-white",
+              onClick: handleToggleMute,
+              ...api.controlAriaProps.mute,
+              children: api.controlAriaProps.mute["aria-label"]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+export {
+  VideoPlayer,
+  controlsVariants,
+  overlayVariants,
+  playerVariants
+};
+//# sourceMappingURL=react-video-player.js.map

package/dist/react-video-player.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../video-player/src/video-player.ts", "../../video-player/src/video-player.styles.ts", "../../react-video-player/src/video-player.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport interface VideoPlayerProps {\n  src?: string\n  poster?: string\n  autoplay?: boolean\n  muted?: boolean\n  controls?: boolean\n}\n\nexport type VideoState = 'idle' | 'loading' | 'playing' | 'paused' | 'ended'\n\nexport interface VideoPlayerAPI {\n  /** Current player state */\n  state: VideoState\n  /** Transition to playing state */\n  play: () => void\n  /** Transition to paused state */\n  pause: () => void\n  /** Toggle between playing and paused */\n  togglePlay: () => void\n  /** Toggle mute state */\n  toggleMute: () => boolean\n  /** ARIA props for the player region */\n  ariaProps: Partial<AccessibilityProps>\n  /** ARIA props for control buttons */\n  controlAriaProps: {\n    playPause: Partial<AccessibilityProps>\n    mute: Partial<AccessibilityProps>\n  }\n  /** Data attributes reflecting current state */\n  dataAttributes: Record<string, string>\n}\n\nexport function createVideoPlayer(props: VideoPlayerProps = {}): VideoPlayerAPI {\n  const { muted: initialMuted = false } = props\n\n  let state: VideoState = 'idle'\n  let isMuted = initialMuted\n\n  function play() {\n    if (state === 'ended') {\n      state = 'playing'\n    } else if (state !== 'playing') {\n      state = 'playing'\n    }\n  }\n\n  function pause() {\n    if (state === 'playing') {\n      state = 'paused'\n    }\n  }\n\n  function togglePlay() {\n    if (state === 'playing') {\n      pause()\n    } else {\n      play()\n    }\n  }\n\n  function toggleMute(): boolean {\n    isMuted = !isMuted\n    return isMuted\n  }\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'region',\n    'aria-label': 'Video player',\n  }\n\n  const api: VideoPlayerAPI = {\n    get state() {\n      return state\n    },\n    play,\n    pause,\n    togglePlay,\n    toggleMute,\n    ariaProps,\n    get controlAriaProps() {\n      return {\n        playPause: {\n          'aria-label': state === 'playing' ? 'Pause' : 'Play',\n        },\n        mute: {\n          'aria-label': isMuted ? 'Unmute' : 'Mute',\n        },\n      }\n    },\n    get dataAttributes() {\n      return {\n        'data-state': state,\n      }\n    },\n  }\n\n  return api\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const playerVariants = cva({\n  base: 'relative overflow-hidden rounded-lg bg-black',\n  variants: {\n    size: {\n      sm: 'max-w-sm',\n      md: 'max-w-2xl',\n      lg: 'max-w-4xl',\n      full: 'w-full',\n    },\n  },\n  defaultVariants: {\n    size: 'full',\n  },\n})\n\nexport const controlsVariants = cva({\n  base: 'absolute bottom-0 left-0 right-0 flex items-center gap-2 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity',\n  variants: {\n    visibility: {\n      visible: 'opacity-100',\n      hidden: 'opacity-0 pointer-events-none',\n    },\n  },\n  defaultVariants: {\n    visibility: 'visible',\n  },\n})\n\nexport const overlayVariants = cva({\n  base: 'absolute inset-0 flex items-center justify-center bg-black/40 transition-opacity',\n  variants: {\n    visibility: {\n      visible: 'opacity-100',\n      hidden: 'opacity-0 pointer-events-none',\n    },\n  },\n  defaultVariants: {\n    visibility: 'visible',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createVideoPlayer,\n  playerVariants,\n  controlsVariants,\n  overlayVariants,\n  type VideoPlayerProps as CoreVideoPlayerProps,\n} from '@refraction-ui/video-player'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface VideoPlayerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'src'>,\n    CoreVideoPlayerProps {}\n\nexport const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(\n  function VideoPlayer(\n    {\n      src,\n      poster,\n      autoplay = false,\n      muted: initialMuted = false,\n      controls = true,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [, setTick] = React.useState(0)\n    const rerender = React.useCallback(() => setTick((t) => t + 1), [])\n\n    const apiRef = React.useRef(\n      createVideoPlayer({ src, poster, autoplay, muted: initialMuted, controls }),\n    )\n    const api = apiRef.current\n\n    // No src — show placeholder\n    if (!src) {\n      return (\n        <div\n          ref={ref}\n          className={cn(playerVariants(), 'flex items-center justify-center aspect-video', className)}\n          {...api.ariaProps}\n          {...props}\n        >\n          <div className=\"text-center text-muted-foreground\">\n            <p className=\"text-lg font-medium\">Coming soon</p>\n          </div>\n        </div>\n      )\n    }\n\n    const handlePlay = () => {\n      api.play()\n      rerender()\n    }\n\n    const handlePause = () => {\n      api.pause()\n      rerender()\n    }\n\n    const handleTogglePlay = () => {\n      api.togglePlay()\n      rerender()\n    }\n\n    const handleToggleMute = () => {\n      api.toggleMute()\n      rerender()\n    }\n\n    const isPlaying = api.state === 'playing'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(playerVariants(), 'aspect-video', className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        <video\n          className=\"h-full w-full\"\n          src={src}\n          poster={poster}\n          autoPlay={autoplay}\n          muted={initialMuted}\n          onPlay={handlePlay}\n          onPause={handlePause}\n        />\n\n        {/* Center play/pause overlay */}\n        {controls && (\n          <div className={overlayVariants({ visibility: isPlaying ? 'hidden' : 'visible' })}>\n            <button\n              type=\"button\"\n              className=\"rounded-full bg-white/90 p-4 text-black shadow-lg\"\n              onClick={handleTogglePlay}\n              {...api.controlAriaProps.playPause}\n            >\n              {isPlaying ? 'Pause' : 'Play'}\n            </button>\n          </div>\n        )}\n\n        {/* Bottom controls bar */}\n        {controls && (\n          <div className={controlsVariants()}>\n            <button\n              type=\"button\"\n              className=\"rounded bg-white/20 px-3 py-1 text-sm text-white\"\n              onClick={handleToggleMute}\n              {...api.controlAriaProps.mute}\n            >\n              {api.controlAriaProps.mute['aria-label']}\n            </button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["VideoPlayer"]
+}

package/dist/react-video-tile.js

@@ -0,0 +1,8 @@
+import {
+  VideoTile
+} from "./chunk-H54FLNAF.js";
+import "./chunk-ZF3OHCGV.js";
+export {
+  VideoTile
+};
+//# sourceMappingURL=react-video-tile.js.map

package/dist/react-video-tile.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/react-voice-pill.js

@@ -0,0 +1,314 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-voice-pill/dist/index.js
+import * as React from "react";
+
+// ../voice-pill/dist/index.js
+var DEFAULT_VOICE_PILL_SPEAKER = "ai";
+var DEFAULT_VOICE_PILL_POSITION = "bottom-center";
+function formatNumber(value) {
+  return Number(value.toFixed(3)).toString();
+}
+function getRawSpeaker(speaker) {
+  const value = String(speaker ?? DEFAULT_VOICE_PILL_SPEAKER).trim();
+  return value.length > 0 ? value : DEFAULT_VOICE_PILL_SPEAKER;
+}
+function clampVoicePillIntensity(intensity = 0) {
+  const value = Number(intensity);
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return Math.min(1, Math.max(0, value));
+}
+function getVoicePillSpeakerKey(speaker) {
+  const normalized = getRawSpeaker(speaker).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return normalized.length > 0 ? normalized : DEFAULT_VOICE_PILL_SPEAKER;
+}
+function getVoicePillSpeakerLabel(speaker) {
+  const raw = getRawSpeaker(speaker);
+  const key = getVoicePillSpeakerKey(raw);
+  if (key === "ai") return "AI";
+  if (key === "user") return "User";
+  return raw;
+}
+function getVoicePillInitials(speaker) {
+  const key = getVoicePillSpeakerKey(speaker);
+  if (key === "ai") return "AI";
+  if (key === "user") return "U";
+  const initials = getVoicePillSpeakerLabel(speaker).split(/[\s_-]+/).map((part) => part.charAt(0)).filter(Boolean).join("").slice(0, 2).toUpperCase();
+  return initials.length > 0 ? initials : "V";
+}
+function getVoicePillPosition(position) {
+  return position ?? DEFAULT_VOICE_PILL_POSITION;
+}
+function getVoicePillAriaLabel(props) {
+  const parts = [`${getVoicePillSpeakerLabel(props.speaker)}: ${props.label}`];
+  if (props.sub) {
+    parts.push(props.sub);
+  }
+  if (props.muted) {
+    parts.push("muted");
+  }
+  return parts.join(", ");
+}
+function getVoicePillPulseStyle(intensity, muted = false) {
+  const clamped = clampVoicePillIntensity(intensity);
+  const visualIntensity = muted ? 0 : clamped;
+  const ringOpacity = visualIntensity === 0 ? 0 : 0.12 + visualIntensity * 0.42;
+  const ringScale = 1 + visualIntensity * 0.35;
+  const duration = visualIntensity === 0 ? 1800 : Math.round(1700 - visualIntensity * 700);
+  return {
+    "--rfr-voice-pill-intensity": formatNumber(clamped),
+    "--rfr-voice-pill-visual-intensity": formatNumber(visualIntensity),
+    "--rfr-voice-pill-ring-opacity": formatNumber(ringOpacity),
+    "--rfr-voice-pill-ring-scale": formatNumber(ringScale),
+    "--rfr-voice-pill-pulse-duration": `${duration}ms`,
+    "--rfr-voice-pill-pulse-delay": `-${Math.round(duration / 2)}ms`
+  };
+}
+function createVoicePill(props) {
+  const {
+    speaker: speakerProp,
+    label,
+    sub,
+    intensity: intensityProp,
+    muted: mutedProp = false,
+    onToggleMute,
+    position: positionProp
+  } = props;
+  const speaker = getVoicePillSpeakerLabel(speakerProp);
+  const speakerKey = getVoicePillSpeakerKey(speakerProp);
+  const intensity = clampVoicePillIntensity(intensityProp);
+  const muted = Boolean(mutedProp);
+  const visualIntensity = muted ? 0 : intensity;
+  const position = getVoicePillPosition(positionProp);
+  function toggleMute() {
+    onToggleMute?.();
+  }
+  const ariaProps = {
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": true,
+    "aria-label": getVoicePillAriaLabel({ speaker: speakerProp, label, sub, muted })
+  };
+  const toggleMuteAriaProps = {
+    "aria-label": muted ? "Unmute voice" : "Mute voice",
+    "aria-pressed": muted
+  };
+  const dataAttributes = {
+    "data-speaker": speakerKey,
+    "data-muted": String(muted),
+    "data-position": position,
+    "data-intensity": formatNumber(intensity),
+    "data-active": String(visualIntensity > 0)
+  };
+  return {
+    speaker,
+    speakerKey,
+    label,
+    sub,
+    intensity,
+    visualIntensity,
+    muted,
+    position,
+    initials: getVoicePillInitials(speakerProp),
+    toggleMute,
+    ariaProps,
+    toggleMuteAriaProps,
+    dataAttributes,
+    style: getVoicePillPulseStyle(intensity, muted)
+  };
+}
+var voicePillTokens = {
+  name: "voice-pill",
+  tokens: {
+    bg: { variable: "--rfr-voice-pill-bg", fallback: "hsl(var(--background))" },
+    fg: { variable: "--rfr-voice-pill-fg", fallback: "hsl(var(--foreground))" },
+    border: { variable: "--rfr-voice-pill-border", fallback: "hsl(var(--border))" },
+    accent: { variable: "--rfr-voice-pill-accent", fallback: "hsl(var(--primary))" },
+    accentFg: {
+      variable: "--rfr-voice-pill-accent-foreground",
+      fallback: "hsl(var(--primary-foreground))"
+    }
+  }
+};
+var voicePillRootStyles = "inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80";
+var voicePillSpeakerStyles = "[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]";
+var voicePillPositionVariants = cva({
+  base: "z-50",
+  variants: {
+    position: {
+      inline: "relative",
+      "top-start": "fixed top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "top-center": "fixed top-[calc(env(safe-area-inset-top)+1rem)] left-1/2 -translate-x-1/2",
+      "top-end": "fixed top-[calc(env(safe-area-inset-top)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "bottom-start": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]",
+      "bottom-center": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 -translate-x-1/2",
+      "bottom-end": "fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]",
+      "left-start": "fixed left-[calc(env(safe-area-inset-left)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "left-center": "fixed left-[calc(env(safe-area-inset-left)+1rem)] top-1/2 -translate-y-1/2",
+      "left-end": "fixed left-[calc(env(safe-area-inset-left)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]",
+      "right-start": "fixed right-[calc(env(safe-area-inset-right)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]",
+      "right-center": "fixed right-[calc(env(safe-area-inset-right)+1rem)] top-1/2 -translate-y-1/2",
+      "right-end": "fixed right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-center"
+  }
+});
+var voicePillAvatarWrapStyles = "relative flex h-10 w-10 shrink-0 items-center justify-center";
+var voicePillPulseRingStyles = "pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none";
+var voicePillAvatarStyles = "relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase";
+var voicePillTextStyles = "min-w-0 flex-1";
+var voicePillLabelStyles = "block truncate text-sm font-medium leading-tight";
+var voicePillSubStyles = "block truncate text-xs leading-tight text-muted-foreground";
+var voicePillMuteButtonStyles = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+// ../react-voice-pill/dist/index.js
+var VoicePill = React.forwardRef(
+  function VoicePill2({
+    speaker,
+    label,
+    sub,
+    intensity,
+    muted,
+    onToggleMute,
+    position,
+    avatar,
+    className,
+    style,
+    ...props
+  }, ref) {
+    const api = createVoicePill({
+      speaker,
+      label,
+      sub,
+      intensity,
+      muted,
+      onToggleMute,
+      position
+    });
+    const mergedStyle = {
+      ...api.style,
+      ...style
+    };
+    const pulseStyle = {
+      animationDuration: "var(--rfr-voice-pill-pulse-duration)",
+      transform: "scale(var(--rfr-voice-pill-ring-scale))"
+    };
+    const delayedPulseStyle = {
+      ...pulseStyle,
+      animationDelay: "var(--rfr-voice-pill-pulse-delay)"
+    };
+    return React.createElement(
+      "div",
+      {
+        ...props,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ref,
+        className: cn(
+          voicePillPositionVariants({ position: api.position }),
+          voicePillRootStyles,
+          voicePillSpeakerStyles,
+          className
+        ),
+        style: mergedStyle
+      },
+      React.createElement(
+        "span",
+        {
+          className: voicePillAvatarWrapStyles,
+          "aria-hidden": true
+        },
+        api.visualIntensity > 0 && React.createElement("span", {
+          className: voicePillPulseRingStyles,
+          style: pulseStyle
+        }),
+        api.visualIntensity > 0 && React.createElement("span", {
+          className: voicePillPulseRingStyles,
+          style: delayedPulseStyle
+        }),
+        React.createElement(
+          "span",
+          { className: voicePillAvatarStyles },
+          avatar ?? api.initials
+        )
+      ),
+      React.createElement(
+        "span",
+        { className: voicePillTextStyles },
+        React.createElement("span", { className: voicePillLabelStyles }, api.label),
+        api.sub && React.createElement("span", { className: voicePillSubStyles }, api.sub)
+      ),
+      onToggleMute && React.createElement(
+        "button",
+        {
+          type: "button",
+          className: voicePillMuteButtonStyles,
+          onClick: api.toggleMute,
+          ...api.toggleMuteAriaProps
+        },
+        renderMuteIcon(api.muted)
+      )
+    );
+  }
+);
+function renderMuteIcon(muted) {
+  return React.createElement(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "h-4 w-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      viewBox: "0 0 24 24"
+    },
+    React.createElement("path", {
+      d: "M4 9v6h4l5 4V5L8 9H4Z"
+    }),
+    muted ? React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("path", { d: "m19 9-4 4" }),
+      React.createElement("path", { d: "m15 9 4 4" })
+    ) : React.createElement(
+      React.Fragment,
+      null,
+      React.createElement("path", { d: "M16 8.5a4 4 0 0 1 0 7" }),
+      React.createElement("path", { d: "M18.5 6a7 7 0 0 1 0 12" })
+    )
+  );
+}
+export {
+  DEFAULT_VOICE_PILL_POSITION,
+  DEFAULT_VOICE_PILL_SPEAKER,
+  VoicePill,
+  clampVoicePillIntensity,
+  createVoicePill,
+  getVoicePillAriaLabel,
+  getVoicePillInitials,
+  getVoicePillPosition,
+  getVoicePillPulseStyle,
+  getVoicePillSpeakerKey,
+  getVoicePillSpeakerLabel,
+  voicePillAvatarStyles,
+  voicePillAvatarWrapStyles,
+  voicePillLabelStyles,
+  voicePillMuteButtonStyles,
+  voicePillPositionVariants,
+  voicePillPulseRingStyles,
+  voicePillRootStyles,
+  voicePillSpeakerStyles,
+  voicePillSubStyles,
+  voicePillTextStyles,
+  voicePillTokens
+};
+//# sourceMappingURL=react-voice-pill.js.map

package/dist/react-voice-pill.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../voice-pill/src/voice-pill.ts", "../../voice-pill/src/voice-pill.styles.ts", "../../react-voice-pill/src/voice-pill.tsx"],
+  "sourcesContent": ["export type VoicePillSpeaker = 'ai' | 'user' | (string & {})\n\nexport type VoicePillPosition =\n  | 'inline'\n  | 'top-start'\n  | 'top-center'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-center'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left-center'\n  | 'left-end'\n  | 'right-start'\n  | 'right-center'\n  | 'right-end'\n\nexport interface VoicePillProps {\n  /** Speaker identity used for labels and data-speaker theming */\n  speaker?: VoicePillSpeaker\n  /** Primary voice status text */\n  label: string\n  /** Optional secondary status text */\n  sub?: string\n  /** Voice activity intensity, clamped from 0 to 1 */\n  intensity?: number\n  /** Whether voice output/input is muted */\n  muted?: boolean\n  /** Callback for the optional mute toggle */\n  onToggleMute?: () => void\n  /** Viewport position, or inline for embedding inside another layout */\n  position?: VoicePillPosition\n}\n\nexport interface VoicePillStyleVars {\n  [key: `--${string}`]: string\n}\n\nexport interface VoicePillAPI {\n  /** Display speaker label */\n  speaker: string\n  /** Normalized key for data-speaker */\n  speakerKey: string\n  /** Primary label */\n  label: string\n  /** Secondary label */\n  sub?: string\n  /** Clamped raw intensity */\n  intensity: number\n  /** Intensity used for visual animation after muted state is applied */\n  visualIntensity: number\n  /** Muted state */\n  muted: boolean\n  /** Viewport position, or inline for embedding inside another layout */\n  position: VoicePillPosition\n  /** Fallback initials for the speaker avatar */\n  initials: string\n  /** Invoke the mute callback when provided */\n  toggleMute(): void\n  /** ARIA props for the live status pill */\n  ariaProps: Record<string, string | number | boolean>\n  /** ARIA props for the mute toggle */\n  toggleMuteAriaProps: Record<string, unknown>\n  /** Data attributes reflecting speaker/state */\n  dataAttributes: Record<string, string>\n  /** CSS custom properties that drive pulse visuals */\n  style: VoicePillStyleVars\n}\n\nexport const DEFAULT_VOICE_PILL_SPEAKER = 'ai'\nexport const DEFAULT_VOICE_PILL_POSITION: VoicePillPosition = 'bottom-center'\n\nfunction formatNumber(value: number): string {\n  return Number(value.toFixed(3)).toString()\n}\n\nfunction getRawSpeaker(speaker?: VoicePillSpeaker): string {\n  const value = String(speaker ?? DEFAULT_VOICE_PILL_SPEAKER).trim()\n  return value.length > 0 ? value : DEFAULT_VOICE_PILL_SPEAKER\n}\n\nexport function clampVoicePillIntensity(intensity = 0): number {\n  const value = Number(intensity)\n\n  if (!Number.isFinite(value)) {\n    return 0\n  }\n\n  return Math.min(1, Math.max(0, value))\n}\n\nexport function getVoicePillSpeakerKey(speaker?: VoicePillSpeaker): string {\n  const normalized = getRawSpeaker(speaker)\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n\n  return normalized.length > 0 ? normalized : DEFAULT_VOICE_PILL_SPEAKER\n}\n\nexport function getVoicePillSpeakerLabel(speaker?: VoicePillSpeaker): string {\n  const raw = getRawSpeaker(speaker)\n  const key = getVoicePillSpeakerKey(raw)\n\n  if (key === 'ai') return 'AI'\n  if (key === 'user') return 'User'\n\n  return raw\n}\n\nexport function getVoicePillInitials(speaker?: VoicePillSpeaker): string {\n  const key = getVoicePillSpeakerKey(speaker)\n\n  if (key === 'ai') return 'AI'\n  if (key === 'user') return 'U'\n\n  const initials = getVoicePillSpeakerLabel(speaker)\n    .split(/[\\s_-]+/)\n    .map((part) => part.charAt(0))\n    .filter(Boolean)\n    .join('')\n    .slice(0, 2)\n    .toUpperCase()\n\n  return initials.length > 0 ? initials : 'V'\n}\n\nexport function getVoicePillPosition(\n  position?: VoicePillPosition,\n): VoicePillPosition {\n  return position ?? DEFAULT_VOICE_PILL_POSITION\n}\n\nexport function getVoicePillAriaLabel(props: {\n  speaker?: VoicePillSpeaker\n  label: string\n  sub?: string\n  muted?: boolean\n}): string {\n  const parts = [`${getVoicePillSpeakerLabel(props.speaker)}: ${props.label}`]\n\n  if (props.sub) {\n    parts.push(props.sub)\n  }\n\n  if (props.muted) {\n    parts.push('muted')\n  }\n\n  return parts.join(', ')\n}\n\nexport function getVoicePillPulseStyle(\n  intensity?: number,\n  muted = false,\n): VoicePillStyleVars {\n  const clamped = clampVoicePillIntensity(intensity)\n  const visualIntensity = muted ? 0 : clamped\n  const ringOpacity = visualIntensity === 0 ? 0 : 0.12 + visualIntensity * 0.42\n  const ringScale = 1 + visualIntensity * 0.35\n  const duration = visualIntensity === 0\n    ? 1800\n    : Math.round(1700 - visualIntensity * 700)\n\n  return {\n    '--rfr-voice-pill-intensity': formatNumber(clamped),\n    '--rfr-voice-pill-visual-intensity': formatNumber(visualIntensity),\n    '--rfr-voice-pill-ring-opacity': formatNumber(ringOpacity),\n    '--rfr-voice-pill-ring-scale': formatNumber(ringScale),\n    '--rfr-voice-pill-pulse-duration': `${duration}ms`,\n    '--rfr-voice-pill-pulse-delay': `-${Math.round(duration / 2)}ms`,\n  }\n}\n\nexport function createVoicePill(props: VoicePillProps): VoicePillAPI {\n  const {\n    speaker: speakerProp,\n    label,\n    sub,\n    intensity: intensityProp,\n    muted: mutedProp = false,\n    onToggleMute,\n    position: positionProp,\n  } = props\n\n  const speaker = getVoicePillSpeakerLabel(speakerProp)\n  const speakerKey = getVoicePillSpeakerKey(speakerProp)\n  const intensity = clampVoicePillIntensity(intensityProp)\n  const muted = Boolean(mutedProp)\n  const visualIntensity = muted ? 0 : intensity\n  const position = getVoicePillPosition(positionProp)\n\n  function toggleMute(): void {\n    onToggleMute?.()\n  }\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-live': 'polite',\n    'aria-atomic': true,\n    'aria-label': getVoicePillAriaLabel({ speaker: speakerProp, label, sub, muted }),\n  }\n\n  const toggleMuteAriaProps: Record<string, unknown> = {\n    'aria-label': muted ? 'Unmute voice' : 'Mute voice',\n    'aria-pressed': muted,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-speaker': speakerKey,\n    'data-muted': String(muted),\n    'data-position': position,\n    'data-intensity': formatNumber(intensity),\n    'data-active': String(visualIntensity > 0),\n  }\n\n  return {\n    speaker,\n    speakerKey,\n    label,\n    sub,\n    intensity,\n    visualIntensity,\n    muted,\n    position,\n    initials: getVoicePillInitials(speakerProp),\n    toggleMute,\n    ariaProps,\n    toggleMuteAriaProps,\n    dataAttributes,\n    style: getVoicePillPulseStyle(intensity, muted),\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const voicePillTokens: TokenContract = {\n  name: 'voice-pill',\n  tokens: {\n    bg: { variable: '--rfr-voice-pill-bg', fallback: 'hsl(var(--background))' },\n    fg: { variable: '--rfr-voice-pill-fg', fallback: 'hsl(var(--foreground))' },\n    border: { variable: '--rfr-voice-pill-border', fallback: 'hsl(var(--border))' },\n    accent: { variable: '--rfr-voice-pill-accent', fallback: 'hsl(var(--primary))' },\n    accentFg: {\n      variable: '--rfr-voice-pill-accent-foreground',\n      fallback: 'hsl(var(--primary-foreground))',\n    },\n  },\n}\n\nexport const voicePillRootStyles =\n  'inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80'\n\nexport const voicePillSpeakerStyles =\n  '[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]'\n\nexport const voicePillPositionVariants = cva({\n  base: 'z-50',\n  variants: {\n    position: {\n      inline: 'relative',\n      'top-start':\n        'fixed top-[calc(env(safe-area-inset-top)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]',\n      'top-center':\n        'fixed top-[calc(env(safe-area-inset-top)+1rem)] left-1/2 -translate-x-1/2',\n      'top-end':\n        'fixed top-[calc(env(safe-area-inset-top)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]',\n      'bottom-start':\n        'fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-[calc(env(safe-area-inset-left)+1rem)]',\n      'bottom-center':\n        'fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] left-1/2 -translate-x-1/2',\n      'bottom-end':\n        'fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] right-[calc(env(safe-area-inset-right)+1rem)]',\n      'left-start':\n        'fixed left-[calc(env(safe-area-inset-left)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]',\n      'left-center':\n        'fixed left-[calc(env(safe-area-inset-left)+1rem)] top-1/2 -translate-y-1/2',\n      'left-end':\n        'fixed left-[calc(env(safe-area-inset-left)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]',\n      'right-start':\n        'fixed right-[calc(env(safe-area-inset-right)+1rem)] top-[calc(env(safe-area-inset-top)+1rem)]',\n      'right-center':\n        'fixed right-[calc(env(safe-area-inset-right)+1rem)] top-1/2 -translate-y-1/2',\n      'right-end':\n        'fixed right-[calc(env(safe-area-inset-right)+1rem)] bottom-[calc(env(safe-area-inset-bottom)+1rem)]',\n    },\n  },\n  defaultVariants: {\n    position: 'bottom-center',\n  },\n})\n\nexport const voicePillAvatarWrapStyles =\n  'relative flex h-10 w-10 shrink-0 items-center justify-center'\n\nexport const voicePillPulseRingStyles =\n  'pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none'\n\nexport const voicePillAvatarStyles =\n  'relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase'\n\nexport const voicePillTextStyles = 'min-w-0 flex-1'\n\nexport const voicePillLabelStyles =\n  'block truncate text-sm font-medium leading-tight'\n\nexport const voicePillSubStyles =\n  'block truncate text-xs leading-tight text-muted-foreground'\n\nexport const voicePillMuteButtonStyles =\n  'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'\n", "import * as React from 'react'\nimport {\n  createVoicePill,\n  voicePillAvatarStyles,\n  voicePillAvatarWrapStyles,\n  voicePillLabelStyles,\n  voicePillMuteButtonStyles,\n  voicePillPositionVariants,\n  voicePillPulseRingStyles,\n  voicePillRootStyles,\n  voicePillSpeakerStyles,\n  voicePillSubStyles,\n  voicePillTextStyles,\n  type VoicePillProps as CoreVoicePillProps,\n} from '@refraction-ui/voice-pill'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface VoicePillProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    CoreVoicePillProps {\n  avatar?: React.ReactNode\n}\n\nexport const VoicePill = React.forwardRef<HTMLDivElement, VoicePillProps>(\n  function VoicePill(\n    {\n      speaker,\n      label,\n      sub,\n      intensity,\n      muted,\n      onToggleMute,\n      position,\n      avatar,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createVoicePill({\n      speaker,\n      label,\n      sub,\n      intensity,\n      muted,\n      onToggleMute,\n      position,\n    })\n\n    const mergedStyle = {\n      ...api.style,\n      ...style,\n    } as React.CSSProperties\n\n    const pulseStyle = {\n      animationDuration: 'var(--rfr-voice-pill-pulse-duration)',\n      transform: 'scale(var(--rfr-voice-pill-ring-scale))',\n    } as React.CSSProperties\n\n    const delayedPulseStyle = {\n      ...pulseStyle,\n      animationDelay: 'var(--rfr-voice-pill-pulse-delay)',\n    } as React.CSSProperties\n\n    return React.createElement(\n      'div',\n      {\n        ...props,\n        ...api.ariaProps,\n        ...api.dataAttributes,\n        ref,\n        className: cn(\n          voicePillPositionVariants({ position: api.position }),\n          voicePillRootStyles,\n          voicePillSpeakerStyles,\n          className,\n        ),\n        style: mergedStyle,\n      },\n      React.createElement(\n        'span',\n        {\n          className: voicePillAvatarWrapStyles,\n          'aria-hidden': true,\n        },\n        api.visualIntensity > 0 &&\n          React.createElement('span', {\n            className: voicePillPulseRingStyles,\n            style: pulseStyle,\n          }),\n        api.visualIntensity > 0 &&\n          React.createElement('span', {\n            className: voicePillPulseRingStyles,\n            style: delayedPulseStyle,\n          }),\n        React.createElement(\n          'span',\n          { className: voicePillAvatarStyles },\n          avatar ?? api.initials,\n        ),\n      ),\n      React.createElement(\n        'span',\n        { className: voicePillTextStyles },\n        React.createElement('span', { className: voicePillLabelStyles }, api.label),\n        api.sub &&\n          React.createElement('span', { className: voicePillSubStyles }, api.sub),\n      ),\n      onToggleMute &&\n        React.createElement(\n          'button',\n          {\n            type: 'button',\n            className: voicePillMuteButtonStyles,\n            onClick: api.toggleMute,\n            ...api.toggleMuteAriaProps,\n          },\n          renderMuteIcon(api.muted),\n        ),\n    )\n  },\n)\n\nfunction renderMuteIcon(muted: boolean): React.ReactElement {\n  return React.createElement(\n    'svg',\n    {\n      'aria-hidden': true,\n      className: 'h-4 w-4',\n      fill: 'none',\n      stroke: 'currentColor',\n      strokeLinecap: 'round',\n      strokeLinejoin: 'round',\n      strokeWidth: 2,\n      viewBox: '0 0 24 24',\n    },\n    React.createElement('path', {\n      d: 'M4 9v6h4l5 4V5L8 9H4Z',\n    }),\n    muted\n      ? React.createElement(\n          React.Fragment,\n          null,\n          React.createElement('path', { d: 'm19 9-4 4' }),\n          React.createElement('path', { d: 'm15 9 4 4' }),\n        )\n      : React.createElement(\n          React.Fragment,\n          null,\n          React.createElement('path', { d: 'M16 8.5a4 4 0 0 1 0 7' }),\n          React.createElement('path', { d: 'M18.5 6a7 7 0 0 1 0 12' }),\n        ),\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["VoicePill"]
+}