@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-link-card.js

@@ -0,0 +1,48 @@
+import {
+  Slot
+} from "./chunk-WSPJTQAV.js";
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-link-card/dist/index.js
+import * as React from "react";
+
+// ../link-card/dist/index.js
+function createLinkCard(_props = {}) {
+  return {
+    dataAttributes: { "data-slot": "link-card" }
+  };
+}
+
+// ../react-link-card/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var LinkCard = React.forwardRef(
+  function LinkCard2({ className, asChild = false, ...props }, ref) {
+    const api = createLinkCard(props);
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          className: cn(className),
+          ...api.dataAttributes,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        className: cn(className),
+        ...api.dataAttributes,
+        ...props
+      }
+    );
+  }
+);
+export {
+  LinkCard
+};
+//# sourceMappingURL=react-link-card.js.map

package/dist/react-link-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../link-card/src/link-card.ts", "../../react-link-card/src/link-card.tsx"],
+  "sourcesContent": ["export interface LinkCardProps {\n  href?: string\n}\n\nexport function createLinkCard(_props: LinkCardProps = {}) {\n  return {\n    dataAttributes: { 'data-slot': 'link-card' }\n  }\n}", "import * as React from 'react'\nimport { createLinkCard } from '@refraction-ui/link-card'\nimport { cn } from '@refraction-ui/shared'\nimport { Slot } from '@refraction-ui/react-slot'\n\nexport interface LinkCardProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Merge the link card's classes/props onto the single child element\n   * instead of rendering an `<a>` (Radix-style `asChild`) — e.g. compose with\n   * a router `<Link>`. Expects exactly one React element child. */\n  asChild?: boolean\n}\n\nexport const LinkCard = React.forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard({ className, asChild = false, ...props }, ref) {\n    const api = createLinkCard(props)\n\n    if (asChild) {\n      return (\n        <Slot\n          ref={ref as React.Ref<HTMLElement>}\n          className={cn(className)}\n          {...api.dataAttributes}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <a\n        ref={ref}\n        className={cn(className)}\n        {...api.dataAttributes}\n        {...props}\n      />\n    )\n  }\n)\n"],
+  "mappings": ";;;;;;;;;;;AAIO,SAAS,eAAe,SAAwB,CAAA,GAAI;AACzD,SAAO;IACL,gBAAgB,EAAE,aAAa,YAAA;EAAY;AAE/C;;;;ACIO,IAAM,WAAiB;EAC5B,SAASA,UAAS,EAAE,WAAW,UAAU,OAAO,GAAG,MAAA,GAAS,KAAK;AAC/D,UAAM,MAAM,eAAe,KAAK;AAEhC,QAAI,SAAS;AACX,aACE;QAAC;QAAA;UACC;UACA,WAAW,GAAG,SAAS;UACtB,GAAG,IAAI;UACP,GAAG;QAAA;MAAA;IAGV;AAEA,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,SAAS;QACtB,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["LinkCard"]
+}

package/dist/react-live-captions.js

@@ -0,0 +1,92 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-live-captions/dist/index.js
+import * as React from "react";
+
+// ../live-captions/dist/index.js
+function visibleCues(cues, maxLines = 2) {
+  if (maxLines <= 0) return [];
+  return cues.slice(-maxLines);
+}
+function createLiveCaptions() {
+  const ariaProps = {
+    role: "log",
+    "aria-live": "polite",
+    "aria-atomic": false
+  };
+  const dataAttributes = {
+    "data-component": "live-captions"
+  };
+  return { ariaProps, dataAttributes };
+}
+var liveCaptionsVariants = cva({
+  base: [
+    "relative mx-auto w-full max-w-2xl rounded-xl",
+    "bg-card/80 backdrop-blur-sm",
+    "px-4 py-3 space-y-1"
+  ].join(" "),
+  variants: {
+    /** Controls how the container is positioned in the layout. */
+    position: {
+      /** Sits in normal document flow (default). */
+      static: "",
+      /** Absolutely positioned — consumer places it with inset utilities. */
+      absolute: "absolute"
+    }
+  },
+  defaultVariants: {
+    position: "static"
+  }
+});
+var liveCaptionsCueVariants = cva({
+  base: "text-sm leading-snug text-foreground",
+  variants: {
+    interim: {
+      true: "opacity-60 italic",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    interim: "false"
+  }
+});
+var liveCaptionsSpeakerClass = "font-medium text-muted-foreground";
+
+// ../react-live-captions/dist/index.js
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var LiveCaptions = React.forwardRef(
+  function LiveCaptions2({ cues, maxLines = 2, position = "static", className, ...props }, ref) {
+    const { ariaProps, dataAttributes } = createLiveCaptions();
+    const shown = visibleCues(cues, maxLines);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(liveCaptionsVariants({ position }), className),
+        ...ariaProps,
+        ...dataAttributes,
+        ...props,
+        children: shown.map((cue) => /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: liveCaptionsCueVariants({
+              interim: cue.final === false ? "true" : "false"
+            }),
+            children: cue.speaker ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: liveCaptionsSpeakerClass, children: cue.speaker }),
+              `: ${cue.text}`
+            ] }) : cue.text
+          },
+          cue.id
+        ))
+      }
+    );
+  }
+);
+export {
+  LiveCaptions
+};
+//# sourceMappingURL=react-live-captions.js.map

package/dist/react-live-captions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../live-captions/src/live-captions.ts", "../../live-captions/src/live-captions.styles.ts", "../../react-live-captions/src/live-captions.tsx"],
+  "sourcesContent": ["/** A single caption cue — may be interim (non-final) while speech is in flight. */\nexport interface CaptionCue {\n  /** Unique identifier for this cue. */\n  id: string\n  /** Speaker name, shown as a prefix when present. */\n  speaker?: string\n  /** The caption text. */\n  text: string\n  /** Whether this cue is finalised (true) or still being transcribed (false/absent). */\n  final?: boolean\n}\n\n/**\n * Return the last `maxLines` cues to display in the caption overlay.\n * Preserves ordering (oldest first within the slice) so the overlay reads top-to-bottom.\n */\nexport function visibleCues(cues: CaptionCue[], maxLines = 2): CaptionCue[] {\n  if (maxLines <= 0) return []\n  return cues.slice(-maxLines)\n}\n\n/**\n * Format a single cue for display.\n * When `speaker` is present the result is `'Maya: the bottleneck is review capacity'`.\n * Without a speaker it is just the text.\n */\nexport function formatCue(cue: CaptionCue): string {\n  return cue.speaker ? `${cue.speaker}: ${cue.text}` : cue.text\n}\n\nexport interface LiveCaptionsAPI {\n  /** ARIA attributes to spread on the caption container element. */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic accessibility props for a live-caption overlay.\n *\n * Returns `role=\"log\"` with `aria-live=\"polite\"` and `aria-atomic=false` so\n * screen readers announce individual cues as they arrive without re-reading the\n * whole log. Adapters spread these onto the container element.\n */\nexport function createLiveCaptions(): LiveCaptionsAPI {\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'log',\n    'aria-live': 'polite',\n    'aria-atomic': false,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'live-captions',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Caption overlay container — an absolute-friendly, translucent dark surface\n * centred over its positioned ancestor (e.g. a video element).\n */\nexport const liveCaptionsVariants = cva({\n  base: [\n    'relative mx-auto w-full max-w-2xl rounded-xl',\n    'bg-card/80 backdrop-blur-sm',\n    'px-4 py-3 space-y-1',\n  ].join(' '),\n  variants: {\n    /** Controls how the container is positioned in the layout. */\n    position: {\n      /** Sits in normal document flow (default). */\n      static: '',\n      /** Absolutely positioned — consumer places it with inset utilities. */\n      absolute: 'absolute',\n    },\n  },\n  defaultVariants: {\n    position: 'static',\n  },\n})\n\n/**\n * A single cue line inside the overlay.\n * Non-final (interim) cues get a dimmed italic treatment to signal they may change.\n */\nexport const liveCaptionsCueVariants = cva({\n  base: 'text-sm leading-snug text-foreground',\n  variants: {\n    interim: {\n      true: 'opacity-60 italic',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    interim: 'false',\n  },\n})\n\n/** Speaker-name prefix — rendered slightly muted to distinguish it from the speech text. */\nexport const liveCaptionsSpeakerClass = 'font-medium text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  visibleCues,\n  createLiveCaptions,\n  liveCaptionsVariants,\n  liveCaptionsCueVariants,\n  liveCaptionsSpeakerClass,\n  type CaptionCue,\n} from '@refraction-ui/live-captions'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { CaptionCue }\n\nexport interface LiveCaptionsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {\n  /** The full ordered list of caption cues. */\n  cues: CaptionCue[]\n  /**\n   * Maximum number of cue lines to display at once.\n   * @default 2\n   */\n  maxLines?: number\n  /**\n   * How the container is positioned in the layout.\n   * @default 'static'\n   */\n  position?: 'static' | 'absolute'\n}\n\n/**\n * LiveCaptions — a rolling caption overlay for meeting / video surfaces.\n *\n * Renders `role=\"log\"` with `aria-live=\"polite\"` so screen readers announce\n * incoming cues without replaying the full history. Only the last `maxLines`\n * cues are shown; non-final (interim) cues are rendered dimmed and italic.\n * Logic and styles come from the headless `@refraction-ui/live-captions` core.\n */\nexport const LiveCaptions = React.forwardRef<HTMLDivElement, LiveCaptionsProps>(\n  function LiveCaptions({ cues, maxLines = 2, position = 'static', className, ...props }, ref) {\n    const { ariaProps, dataAttributes } = createLiveCaptions()\n    const shown = visibleCues(cues, maxLines)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(liveCaptionsVariants({ position }), className)}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {shown.map((cue) => (\n          <p\n            key={cue.id}\n            className={liveCaptionsCueVariants({\n              interim: cue.final === false ? 'true' : 'false',\n            })}\n          >\n            {cue.speaker ? (\n              <>\n                <span className={liveCaptionsSpeakerClass}>{cue.speaker}</span>\n                {`: ${cue.text}`}\n              </>\n            ) : (\n              cue.text\n            )}\n          </p>\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAgBO,SAAS,YAAY,MAAoB,WAAW,GAAiB;AAC1E,MAAI,YAAY,EAAG,QAAO,CAAA;AAC1B,SAAO,KAAK,MAAM,CAAC,QAAQ;AAC7B;AAyBO,SAAS,qBAAsC;AACpD,QAAM,YAAuD;IAC3D,MAAM;IACN,aAAa;IACb,eAAe;EAAA;AAGjB,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;AClDO,IAAM,uBAAuB,IAAI;EACtC,MAAM;IACJ;IACA;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;;IAER,UAAU;;MAER,QAAQ;;MAER,UAAU;IAAA;EACZ;EAEF,iBAAiB;IACf,UAAU;EAAA;AAEd,CAAC;AAMM,IAAM,0BAA0B,IAAI;EACzC,MAAM;EACN,UAAU;IACR,SAAS;MACP,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,2BAA2B;;;;ACPjC,IAAM,eAAqB;EAChC,SAASA,cAAa,EAAE,MAAM,WAAW,GAAG,WAAW,UAAU,WAAW,GAAG,MAAA,GAAS,KAAK;AAC3F,UAAM,EAAE,WAAW,eAAA,IAAmB,mBAAA;AACtC,UAAM,QAAQ,YAAY,MAAM,QAAQ;AAExC,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,qBAAqB,EAAE,SAAA,CAAU,GAAG,SAAS;QAC1D,GAAG;QACH,GAAG;QACH,GAAG;QAEH,UAAA,MAAM,IAAI,CAAC,QACV;UAAC;UAAA;YAEC,WAAW,wBAAwB;cACjC,SAAS,IAAI,UAAU,QAAQ,SAAS;YAAA,CACzC;YAEA,UAAA,IAAI,UACH,qBAAA,UAAA,EACE,UAAA;cAAA,oBAAC,QAAA,EAAK,WAAW,0BAA2B,UAAA,IAAI,QAAA,CAAQ;cACvD,KAAK,IAAI,IAAI;YAAA,EAAA,CAChB,IAEA,IAAI;UAAA;UAXD,IAAI;QAAA,CAcZ;MAAA;IAAA;EAGP;AACF;",
+  "names": ["LiveCaptions"]
+}

package/dist/react-live-cursors.js

@@ -0,0 +1,145 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-live-cursors/dist/index.js
+import * as React from "react";
+
+// ../live-cursors/dist/index.js
+var CURSOR_COLORS = [
+  "#E94560",
+  // red
+  "#F57C00",
+  // orange
+  "#F9C840",
+  // yellow
+  "#4CAF50",
+  // green
+  "#00ACC1",
+  // cyan
+  "#5C6BC0",
+  // indigo
+  "#AB47BC",
+  // purple
+  "#EC407A"
+  // pink
+];
+function assignCursorColor(id, index) {
+  if (index !== void 0) {
+    return CURSOR_COLORS[index % CURSOR_COLORS.length];
+  }
+  let hash = 5381;
+  for (let i = 0; i < id.length; i++) {
+    hash = (hash << 5) + hash ^ id.charCodeAt(i);
+    hash = hash >>> 0;
+  }
+  return CURSOR_COLORS[hash % CURSOR_COLORS.length];
+}
+function createLiveCursors() {
+  const ariaProps = {
+    role: "group",
+    "aria-label": "Collaborators",
+    "aria-hidden": true
+  };
+  const dataAttributes = {
+    "data-live-cursors": ""
+  };
+  return { ariaProps, dataAttributes };
+}
+var liveCursorsVariants = cva({
+  base: "absolute inset-0 overflow-hidden pointer-events-none",
+  variants: {
+    /** Future variant hook — reserved for theming overrides. */
+    hidden: {
+      true: "invisible",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    hidden: "false"
+  }
+});
+var cursorWrapperClass = "absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear";
+var cursorArrowClass = "h-5 w-5 drop-shadow-sm";
+var cursorLabelClass = "mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap";
+
+// ../react-live-cursors/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var Cursor = React.memo(function Cursor2({
+  name,
+  x,
+  y,
+  color
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cursorWrapperClass,
+      style: { left: `${x}px`, top: `${y}px` },
+      "data-cursor-name": name,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cursorArrowClass,
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            style: { fill: color },
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M3 2L17 9.5L10.5 11.5L8 18L3 2Z",
+                stroke: "white",
+                strokeWidth: "1.5",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cursorLabelClass,
+            style: { backgroundColor: color },
+            children: name
+          }
+        )
+      ]
+    }
+  );
+});
+var LiveCursors = React.forwardRef(
+  function LiveCursors2({ cursors, className, ...props }, ref) {
+    const api = createLiveCursors();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(liveCursorsVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: cursors.map((cursor, index) => /* @__PURE__ */ jsx(
+          Cursor,
+          {
+            name: cursor.name,
+            x: cursor.x,
+            y: cursor.y,
+            color: cursor.color ?? assignCursorColor(cursor.id, index)
+          },
+          cursor.id
+        ))
+      }
+    );
+  }
+);
+export {
+  CURSOR_COLORS,
+  Cursor,
+  LiveCursors,
+  assignCursorColor
+};
+//# sourceMappingURL=react-live-cursors.js.map

package/dist/react-live-cursors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../live-cursors/src/live-cursors.ts", "../../live-cursors/src/live-cursors.styles.ts", "../../react-live-cursors/src/live-cursors.tsx"],
+  "sourcesContent": ["/** Data for a single collaborator cursor. */\nexport type CursorData = {\n  id: string\n  name: string\n  x: number\n  y: number\n  color?: string\n}\n\n/**\n * A fixed palette of 8 hex colors for distinguishing collaborator cursors.\n * Each color is vivid enough to be visible against both light and dark surfaces.\n */\nexport const CURSOR_COLORS: string[] = [\n  '#E94560', // red\n  '#F57C00', // orange\n  '#F9C840', // yellow\n  '#4CAF50', // green\n  '#00ACC1', // cyan\n  '#5C6BC0', // indigo\n  '#AB47BC', // purple\n  '#EC407A', // pink\n]\n\n/**\n * Assign a stable color to a cursor.\n *\n * When `index` is supplied the color is simply `CURSOR_COLORS[index % length]`\n * (deterministic for ordered participant lists). Otherwise a lightweight\n * djb2-style hash of the `id` string is used so the same id always maps to the\n * same color across renders without using Math.random or Date.now.\n */\nexport function assignCursorColor(id: string, index?: number): string {\n  if (index !== undefined) {\n    return CURSOR_COLORS[index % CURSOR_COLORS.length]\n  }\n\n  // djb2 hash — deterministic, no side-effects\n  let hash = 5381\n  for (let i = 0; i < id.length; i++) {\n    hash = ((hash << 5) + hash) ^ id.charCodeAt(i)\n    hash = hash >>> 0 // keep unsigned 32-bit\n  }\n  return CURSOR_COLORS[hash % CURSOR_COLORS.length]\n}\n\nexport interface LiveCursorsAPI {\n  /** ARIA attributes to spread on the overlay container. */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic props for the live-cursors overlay.\n *\n * Cursors are purely decorative real-time presence indicators — aria-hidden\n * true keeps them out of the accessibility tree. The group role is present for\n * semantic correctness should a developer choose to un-hide it.\n */\nexport function createLiveCursors(): LiveCursorsAPI {\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'group',\n    'aria-label': 'Collaborators',\n    'aria-hidden': true,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-live-cursors': '',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Full-bleed overlay that contains all cursor elements.\n * `pointer-events-none` and `overflow-hidden` ensure cursors are decorative\n * and don't interfere with the underlying canvas interactions.\n */\nexport const liveCursorsVariants = cva({\n  base: 'absolute inset-0 overflow-hidden pointer-events-none',\n  variants: {\n    /** Future variant hook — reserved for theming overrides. */\n    hidden: {\n      true: 'invisible',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    hidden: 'false',\n  },\n})\n\n/**\n * Wrapper for a single cursor (SVG + label). Absolutely positioned via inline\n * `left`/`top` style; the transition provides smooth movement when coordinates\n * update.\n */\nexport const cursorWrapperClass =\n  'absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear'\n\n/**\n * The SVG cursor arrow container. Fill is applied via inline style (per\n * collaborator color) so no utility class is needed here.\n */\nexport const cursorArrowClass = 'h-5 w-5 drop-shadow-sm'\n\n/**\n * Name-label chip that appears below the cursor arrow. Background is applied\n * via inline style (per collaborator color); text is always white for contrast.\n */\nexport const cursorLabelClass =\n  'mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap'\n", "import * as React from 'react'\nimport {\n  createLiveCursors,\n  assignCursorColor,\n  liveCursorsVariants,\n  cursorWrapperClass,\n  cursorArrowClass,\n  cursorLabelClass,\n  type CursorData,\n} from '@refraction-ui/live-cursors'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { CursorData }\n\nexport interface CursorProps {\n  /** Collaborator display name shown in the label chip. */\n  name: string\n  /** Horizontal position in pixels from the left of the container. */\n  x: number\n  /** Vertical position in pixels from the top of the container. */\n  y: number\n  /** Hex color applied to both the SVG arrow and the label chip. */\n  color: string\n}\n\n/**\n * Cursor — a single labeled collaborator cursor (SVG arrow + name chip).\n *\n * Positioned absolutely via inline `left`/`top` style so it can be placed\n * anywhere within its containing overlay. Color is applied via inline style\n * (not a utility class) so each collaborator gets a unique hue without\n * generating a CSS class per color.\n */\nexport const Cursor = React.memo(function Cursor({\n  name,\n  x,\n  y,\n  color,\n}: CursorProps) {\n  return (\n    <div\n      className={cursorWrapperClass}\n      style={{ left: `${x}px`, top: `${y}px` }}\n      data-cursor-name={name}\n    >\n      {/* SVG cursor arrow — fill via inline style for per-user color */}\n      <svg\n        className={cursorArrowClass}\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n        style={{ fill: color }}\n      >\n        <path\n          d=\"M3 2L17 9.5L10.5 11.5L8 18L3 2Z\"\n          stroke=\"white\"\n          strokeWidth=\"1.5\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      {/* Name label chip */}\n      <span\n        className={cursorLabelClass}\n        style={{ backgroundColor: color }}\n      >\n        {name}\n      </span>\n    </div>\n  )\n})\n\nexport interface LiveCursorsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {\n  /** Array of collaborator cursor data to render. */\n  cursors: CursorData[]\n}\n\n/**\n * LiveCursors — an absolutely-positioned overlay that renders one `<Cursor>`\n * per collaborator.\n *\n * Drop this as a direct child of a `position: relative` container (e.g. a\n * canvas or whiteboard surface). It fills the container via `absolute inset-0`\n * and is `pointer-events-none` so it never blocks interaction.\n *\n * Colors are resolved via `assignCursorColor` when a cursor entry has no\n * explicit `color`. The overlay is marked `aria-hidden` — cursors are\n * decorative presence indicators, not interactive elements.\n */\nexport const LiveCursors = React.forwardRef<HTMLDivElement, LiveCursorsProps>(\n  function LiveCursors({ cursors, className, ...props }, ref) {\n    const api = createLiveCursors()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(liveCursorsVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {cursors.map((cursor, index) => (\n          <Cursor\n            key={cursor.id}\n            name={cursor.name}\n            x={cursor.x}\n            y={cursor.y}\n            color={cursor.color ?? assignCursorColor(cursor.id, index)}\n          />\n        ))}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAaO,IAAM,gBAA0B;EACrC;;EACA;;EACA;;EACA;;EACA;;EACA;;EACA;;EACA;;AACF;AAUO,SAAS,kBAAkB,IAAY,OAAwB;AACpE,MAAI,UAAU,QAAW;AACvB,WAAO,cAAc,QAAQ,cAAc,MAAM;EACnD;AAGA,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,GAAG,QAAQ,KAAK;AAClC,YAAS,QAAQ,KAAK,OAAQ,GAAG,WAAW,CAAC;AAC7C,WAAO,SAAS;EAClB;AACA,SAAO,cAAc,OAAO,cAAc,MAAM;AAClD;AAgBO,SAAS,oBAAoC;AAClD,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;IACd,eAAe;EAAA;AAGjB,QAAM,iBAAyC;IAC7C,qBAAqB;EAAA;AAGvB,SAAO,EAAE,WAAW,eAAA;AACtB;ACjEO,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;;IAER,QAAQ;MACN,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,QAAQ;EAAA;AAEZ,CAAC;AAOM,IAAM,qBACX;AAMK,IAAM,mBAAmB;AAMzB,IAAM,mBACX;;;;ACPK,IAAM,SAAe,WAAK,SAASA,QAAO;EAC/C;EACA;EACA;EACA;AACF,GAAgB;AACd,SACE;IAAC;IAAA;MACC,WAAW;MACX,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,KAAA;MAClC,oBAAkB;MAGlB,UAAA;QAAA;UAAC;UAAA;YACC,WAAW;YACX,SAAQ;YACR,MAAK;YACL,OAAM;YACN,eAAY;YACZ,OAAO,EAAE,MAAM,MAAA;YAEf,UAAA;cAAC;cAAA;gBACC,GAAE;gBACF,QAAO;gBACP,aAAY;gBACZ,gBAAe;cAAA;YAAA;UACjB;QAAA;QAGF;UAAC;UAAA;YACC,WAAW;YACX,OAAO,EAAE,iBAAiB,MAAA;YAEzB,UAAA;UAAA;QAAA;MACH;IAAA;EAAA;AAGN,CAAC;AAoBM,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,SAAS,WAAW,GAAG,MAAA,GAAS,KAAK;AAC1D,UAAM,MAAM,kBAAA;AAEZ,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,oBAAA,GAAuB,SAAS;QAC7C,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UACpB;UAAC;UAAA;YAEC,MAAM,OAAO;YACb,GAAG,OAAO;YACV,GAAG,OAAO;YACV,OAAO,OAAO,SAAS,kBAAkB,OAAO,IAAI,KAAK;UAAA;UAJpD,OAAO;QAAA,CAMf;MAAA;IAAA;EAGP;AACF;",
+  "names": ["Cursor", "LiveCursors"]
+}

package/dist/react-live-transcript.js

@@ -0,0 +1,117 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-live-transcript/dist/index.js
+import * as React from "react";
+
+// ../live-transcript/dist/index.js
+function groupConsecutiveBySpeaker(entries) {
+  const blocks = [];
+  for (const entry of entries) {
+    const last = blocks[blocks.length - 1];
+    if (last && last.speaker === entry.speaker) {
+      last.texts.push(entry.text);
+    } else {
+      blocks.push({
+        speaker: entry.speaker,
+        timestamp: entry.timestamp,
+        speakerColor: entry.speakerColor,
+        texts: [entry.text]
+      });
+    }
+  }
+  return blocks;
+}
+function createLiveTranscript() {
+  const ariaProps = {
+    role: "log",
+    "aria-live": "polite"
+  };
+  const dataAttributes = {
+    "data-component": "live-transcript"
+  };
+  return { ariaProps, dataAttributes };
+}
+var liveTranscriptVariants = cva({
+  base: "flex flex-col overflow-y-auto p-4 gap-4",
+  variants: {
+    compact: {
+      true: "gap-2 p-3",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    compact: "false"
+  }
+});
+var transcriptBlockVariants = cva({
+  base: "flex flex-col gap-1",
+  variants: {
+    compact: {
+      true: "gap-0.5",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    compact: "false"
+  }
+});
+var transcriptSpeakerRowClass = "flex items-baseline gap-2";
+var transcriptSpeakerNameClass = "text-sm font-semibold text-foreground leading-snug";
+var transcriptTimestampClass = "text-xs text-muted-foreground tabular-nums";
+var transcriptTextLineClass = "text-sm text-foreground/80 leading-relaxed";
+
+// ../react-live-transcript/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var LiveTranscript = React.forwardRef(function LiveTranscript2({ entries, compact = false, className, ...props }, ref) {
+  const api = createLiveTranscript();
+  const blocks = React.useMemo(
+    () => groupConsecutiveBySpeaker(entries),
+    [entries]
+  );
+  const compactVariant = compact ? "true" : "false";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(liveTranscriptVariants({ compact: compactVariant }), className),
+      ...api.ariaProps,
+      ...api.dataAttributes,
+      ...props,
+      children: blocks.map((block, blockIndex) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: transcriptBlockVariants({ compact: compactVariant }),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: transcriptSpeakerRowClass, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: transcriptSpeakerNameClass,
+                  style: block.speakerColor ? { color: block.speakerColor } : void 0,
+                  children: block.speaker
+                }
+              ),
+              block.timestamp && /* @__PURE__ */ jsx("span", { className: transcriptTimestampClass, children: block.timestamp })
+            ] }),
+            block.texts.map((text, textIndex) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: transcriptTextLineClass,
+                children: text
+              },
+              textIndex
+            ))
+          ]
+        },
+        `${block.speaker}-${blockIndex}`
+      ))
+    }
+  );
+});
+export {
+  LiveTranscript
+};
+//# sourceMappingURL=react-live-transcript.js.map

package/dist/react-live-transcript.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../live-transcript/src/live-transcript.ts", "../../live-transcript/src/live-transcript.styles.ts", "../../react-live-transcript/src/live-transcript.tsx"],
+  "sourcesContent": ["/** A single transcript entry from one speaker at a point in time. */\nexport interface TranscriptEntry {\n  /** Unique identifier for this entry. */\n  id: string\n  /** Display name of the speaker. */\n  speaker: string\n  /** The spoken text. */\n  text: string\n  /** Optional formatted timestamp string (e.g. \"0:42\"). */\n  timestamp?: string\n  /** Optional CSS color for the speaker's name (e.g. \"#3b82f6\"). */\n  speakerColor?: string\n}\n\n/** A merged block of consecutive entries from the same speaker. */\nexport interface TranscriptBlock {\n  /** Speaker display name. */\n  speaker: string\n  /** Timestamp of the first entry in the run (if present). */\n  timestamp?: string\n  /** Optional CSS color for the speaker name. */\n  speakerColor?: string\n  /** All text segments from the consecutive run, in order. */\n  texts: string[]\n}\n\n/**\n * Merge consecutive `TranscriptEntry` items from the same speaker into\n * `TranscriptBlock` objects. A new block is started whenever the speaker\n * changes; the block uses the timestamp of the *first* entry in that run.\n */\nexport function groupConsecutiveBySpeaker(\n  entries: TranscriptEntry[],\n): TranscriptBlock[] {\n  const blocks: TranscriptBlock[] = []\n\n  for (const entry of entries) {\n    const last = blocks[blocks.length - 1]\n    if (last && last.speaker === entry.speaker) {\n      last.texts.push(entry.text)\n    } else {\n      blocks.push({\n        speaker: entry.speaker,\n        timestamp: entry.timestamp,\n        speakerColor: entry.speakerColor,\n        texts: [entry.text],\n      })\n    }\n  }\n\n  return blocks\n}\n\nexport interface LiveTranscriptAPI {\n  /**\n   * ARIA attributes to spread on the scroll container.\n   * Typed as a plain record so frameworks can spread without fighting their\n   * aria-* type narrowing.\n   */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic container props for a live transcript panel.\n *\n * Returns `role=\"log\"` and `aria-live=\"polite\"` so screen readers announce\n * new transcript entries without interrupting the user.\n */\nexport function createLiveTranscript(): LiveTranscriptAPI {\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'log',\n    'aria-live': 'polite',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-component': 'live-transcript',\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Scroll container that wraps all speaker blocks.\n * The `compact` variant tightens the gap between blocks.\n */\nexport const liveTranscriptVariants = cva({\n  base: 'flex flex-col overflow-y-auto p-4 gap-4',\n  variants: {\n    compact: {\n      true: 'gap-2 p-3',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    compact: 'false',\n  },\n})\n\n/** A single grouped speaker block (header + text lines). */\nexport const transcriptBlockVariants = cva({\n  base: 'flex flex-col gap-1',\n  variants: {\n    compact: {\n      true: 'gap-0.5',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    compact: 'false',\n  },\n})\n\n/** The row containing the speaker name and optional timestamp. */\nexport const transcriptSpeakerRowClass =\n  'flex items-baseline gap-2'\n\n/** Speaker name badge / label. */\nexport const transcriptSpeakerNameClass =\n  'text-sm font-semibold text-foreground leading-snug'\n\n/** Timestamp displayed beside the speaker name. */\nexport const transcriptTimestampClass =\n  'text-xs text-muted-foreground tabular-nums'\n\n/** A single line of transcript text. */\nexport const transcriptTextLineClass =\n  'text-sm text-foreground/80 leading-relaxed'\n", "import * as React from 'react'\nimport {\n  createLiveTranscript,\n  groupConsecutiveBySpeaker,\n  liveTranscriptVariants,\n  transcriptBlockVariants,\n  transcriptSpeakerRowClass,\n  transcriptSpeakerNameClass,\n  transcriptTimestampClass,\n  transcriptTextLineClass,\n  type TranscriptEntry,\n} from '@refraction-ui/live-transcript'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { TranscriptEntry }\n\nexport interface LiveTranscriptProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {\n  /** The ordered list of transcript entries to display. */\n  entries: TranscriptEntry[]\n  /** Tightens spacing between speaker blocks. */\n  compact?: boolean\n}\n\n/**\n * LiveTranscript — a speaker-attributed transcript panel for audio rooms and\n * meetings.\n *\n * Consecutive entries from the same speaker are merged into a single block\n * (one speaker header followed by all their text lines) so the panel stays\n * readable. The container carries `role=\"log\"` and `aria-live=\"polite\"` so\n * screen readers announce new entries without interrupting the user.\n */\nexport const LiveTranscript = React.forwardRef<\n  HTMLDivElement,\n  LiveTranscriptProps\n>(function LiveTranscript({ entries, compact = false, className, ...props }, ref) {\n  const api = createLiveTranscript()\n  const blocks = React.useMemo(\n    () => groupConsecutiveBySpeaker(entries),\n    [entries],\n  )\n  const compactVariant = compact ? 'true' : 'false'\n\n  return (\n    <div\n      ref={ref}\n      className={cn(liveTranscriptVariants({ compact: compactVariant }), className)}\n      {...api.ariaProps}\n      {...api.dataAttributes}\n      {...props}\n    >\n      {blocks.map((block, blockIndex) => (\n        <div\n          key={`${block.speaker}-${blockIndex}`}\n          className={transcriptBlockVariants({ compact: compactVariant })}\n        >\n          <div className={transcriptSpeakerRowClass}>\n            <span\n              className={transcriptSpeakerNameClass}\n              style={block.speakerColor ? { color: block.speakerColor } : undefined}\n            >\n              {block.speaker}\n            </span>\n            {block.timestamp && (\n              <span className={transcriptTimestampClass}>{block.timestamp}</span>\n            )}\n          </div>\n          {block.texts.map((text, textIndex) => (\n            <p\n              key={textIndex}\n              className={transcriptTextLineClass}\n            >\n              {text}\n            </p>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n})\n"],
+  "mappings": ";;;;;;;;;AA+BO,SAAS,0BACd,SACmB;AACnB,QAAM,SAA4B,CAAA;AAElC,aAAW,SAAS,SAAS;AAC3B,UAAM,OAAO,OAAO,OAAO,SAAS,CAAC;AACrC,QAAI,QAAQ,KAAK,YAAY,MAAM,SAAS;AAC1C,WAAK,MAAM,KAAK,MAAM,IAAI;IAC5B,OAAO;AACL,aAAO,KAAK;QACV,SAAS,MAAM;QACf,WAAW,MAAM;QACjB,cAAc,MAAM;QACpB,OAAO,CAAC,MAAM,IAAI;MAAA,CACnB;IACH;EACF;AAEA,SAAO;AACT;AAmBO,SAAS,uBAA0C;AACxD,QAAM,YAAuD;IAC3D,MAAM;IACN,aAAa;EAAA;AAGf,QAAM,iBAAyC;IAC7C,kBAAkB;EAAA;AAGpB,SAAO,EAAE,WAAW,eAAA;AACtB;AC3EO,IAAM,yBAAyB,IAAI;EACxC,MAAM;EACN,UAAU;IACR,SAAS;MACP,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,0BAA0B,IAAI;EACzC,MAAM;EACN,UAAU;IACR,SAAS;MACP,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;AAGM,IAAM,4BACX;AAGK,IAAM,6BACX;AAGK,IAAM,2BACX;AAGK,IAAM,0BACX;;;;ACdK,IAAM,iBAAuB,iBAGlC,SAASA,gBAAe,EAAE,SAAS,UAAU,OAAO,WAAW,GAAG,MAAA,GAAS,KAAK;AAChF,QAAM,MAAM,qBAAA;AACZ,QAAM,SAAe;IACnB,MAAM,0BAA0B,OAAO;IACvC,CAAC,OAAO;EAAA;AAEV,QAAM,iBAAiB,UAAU,SAAS;AAE1C,SACE;IAAC;IAAA;MACC;MACA,WAAW,GAAG,uBAAuB,EAAE,SAAS,eAAA,CAAgB,GAAG,SAAS;MAC3E,GAAG,IAAI;MACP,GAAG,IAAI;MACP,GAAG;MAEH,UAAA,OAAO,IAAI,CAAC,OAAO,eAClB;QAAC;QAAA;UAEC,WAAW,wBAAwB,EAAE,SAAS,eAAA,CAAgB;UAE9D,UAAA;YAAA,qBAAC,OAAA,EAAI,WAAW,2BACd,UAAA;cAAA;gBAAC;gBAAA;kBACC,WAAW;kBACX,OAAO,MAAM,eAAe,EAAE,OAAO,MAAM,aAAA,IAAiB;kBAE3D,UAAA,MAAM;gBAAA;cAAA;cAER,MAAM,aACL,oBAAC,QAAA,EAAK,WAAW,0BAA2B,UAAA,MAAM,UAAA,CAAU;YAAA,EAAA,CAEhE;YACC,MAAM,MAAM,IAAI,CAAC,MAAM,cACtB;cAAC;cAAA;gBAEC,WAAW;gBAEV,UAAA;cAAA;cAHI;YAAA,CAKR;UAAA;QAAA;QArBI,GAAG,MAAM,OAAO,IAAI,UAAU;MAAA,CAuBtC;IAAA;EAAA;AAGP,CAAC;",
+  "names": ["LiveTranscript"]
+}