@refraction-ui/astro 0.12.0 → 0.13.0

package/dist/live-transcript/live-transcript.styles.ts

@@ -0,0 +1,48 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Scroll container that wraps all speaker blocks.
+ * The `compact` variant tightens the gap between blocks.
+ */
+export const liveTranscriptVariants = cva({
+  base: 'flex flex-col overflow-y-auto p-4 gap-4',
+  variants: {
+    compact: {
+      true: 'gap-2 p-3',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    compact: 'false',
+  },
+})
+
+/** A single grouped speaker block (header + text lines). */
+export const transcriptBlockVariants = cva({
+  base: 'flex flex-col gap-1',
+  variants: {
+    compact: {
+      true: 'gap-0.5',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    compact: 'false',
+  },
+})
+
+/** The row containing the speaker name and optional timestamp. */
+export const transcriptSpeakerRowClass =
+  'flex items-baseline gap-2'
+
+/** Speaker name badge / label. */
+export const transcriptSpeakerNameClass =
+  'text-sm font-semibold text-foreground leading-snug'
+
+/** Timestamp displayed beside the speaker name. */
+export const transcriptTimestampClass =
+  'text-xs text-muted-foreground tabular-nums'
+
+/** A single line of transcript text. */
+export const transcriptTextLineClass =
+  'text-sm text-foreground/80 leading-relaxed'

package/dist/live-transcript/live-transcript.ts

@@ -0,0 +1,82 @@
+/** A single transcript entry from one speaker at a point in time. */
+export interface TranscriptEntry {
+  /** Unique identifier for this entry. */
+  id: string
+  /** Display name of the speaker. */
+  speaker: string
+  /** The spoken text. */
+  text: string
+  /** Optional formatted timestamp string (e.g. "0:42"). */
+  timestamp?: string
+  /** Optional CSS color for the speaker's name (e.g. "#3b82f6"). */
+  speakerColor?: string
+}
+
+/** A merged block of consecutive entries from the same speaker. */
+export interface TranscriptBlock {
+  /** Speaker display name. */
+  speaker: string
+  /** Timestamp of the first entry in the run (if present). */
+  timestamp?: string
+  /** Optional CSS color for the speaker name. */
+  speakerColor?: string
+  /** All text segments from the consecutive run, in order. */
+  texts: string[]
+}
+
+/**
+ * Merge consecutive `TranscriptEntry` items from the same speaker into
+ * `TranscriptBlock` objects. A new block is started whenever the speaker
+ * changes; the block uses the timestamp of the *first* entry in that run.
+ */
+export function groupConsecutiveBySpeaker(
+  entries: TranscriptEntry[],
+): TranscriptBlock[] {
+  const blocks: TranscriptBlock[] = []
+
+  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
+}
+
+export interface LiveTranscriptAPI {
+  /**
+   * ARIA attributes to spread on the scroll container.
+   * Typed as a plain record so frameworks can spread without fighting their
+   * aria-* type narrowing.
+   */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic container props for a live transcript panel.
+ *
+ * Returns `role="log"` and `aria-live="polite"` so screen readers announce
+ * new transcript entries without interrupting the user.
+ */
+export function createLiveTranscript(): LiveTranscriptAPI {
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'log',
+    'aria-live': 'polite',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'live-transcript',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/mini-map/index.ts

@@ -0,0 +1,16 @@
+export {
+  contentBounds,
+  miniScale,
+  worldToMini,
+  viewportRectInMini,
+  createMiniMap,
+  type Rect,
+  type MiniMapItem,
+  type MiniMapAPI,
+} from './mini-map.js'
+
+export {
+  miniMapVariants,
+  miniMapDotClass,
+  miniMapViewportClass,
+} from './mini-map.styles.js'

package/dist/mini-map/mini-map.styles.ts

@@ -0,0 +1,32 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * The outer minimap box: small, rounded, bordered, card background.
+ * The `interactive` variant switches to grab cursor for clickable minimaps.
+ */
+export const miniMapVariants = cva({
+  base: [
+    'relative overflow-hidden rounded-md border border-border bg-card',
+    'select-none',
+  ].join(' '),
+  variants: {
+    interactive: {
+      true: 'cursor-grab active:cursor-grabbing',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    interactive: 'false',
+  },
+})
+
+/** A single node dot in the minimap (represents one `MiniMapItem`). */
+export const miniMapDotClass =
+  'absolute rounded-sm bg-muted'
+
+/**
+ * The draggable viewport indicator rectangle.
+ * Uses a semi-transparent primary fill with a primary ring/border.
+ */
+export const miniMapViewportClass =
+  'absolute rounded-sm border border-primary ring-1 ring-primary bg-primary/10'

package/dist/mini-map/mini-map.ts

@@ -0,0 +1,122 @@
+/** A rectangle in 2-D space. */
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** A single item to be represented as a dot on the minimap. */
+export interface MiniMapItem {
+  id: string
+  x: number
+  y: number
+  width?: number
+  height?: number
+}
+
+export interface MiniMapAPI {
+  /** ARIA attributes to spread on the minimap container element. */
+  ariaProps: { role: 'img'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Compute the bounding box that encloses all items (using their x/y + optional
+ * width/height). Returns a zero-size rect at the origin when `items` is empty.
+ */
+export function contentBounds(items: MiniMapItem[]): Rect {
+  if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const item of items) {
+    const right = item.x + (item.width ?? 0)
+    const bottom = item.y + (item.height ?? 0)
+    if (item.x < minX) minX = item.x
+    if (item.y < minY) minY = item.y
+    if (right > maxX) maxX = right
+    if (bottom > maxY) maxY = bottom
+  }
+
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}
+
+/**
+ * Compute the uniform scale factor that fits `contentRect` into the minimap
+ * box (after subtracting `padding` on each side). Returns 1 when the content
+ * has zero area (nothing to scale).
+ */
+export function miniScale(
+  contentRect: Rect,
+  miniW: number,
+  miniH: number,
+  padding = 8,
+): number {
+  const availW = miniW - padding * 2
+  const availH = miniH - padding * 2
+  if (availW <= 0 || availH <= 0) return 1
+  if (contentRect.width === 0 || contentRect.height === 0) return 1
+  return Math.min(availW / contentRect.width, availH / contentRect.height)
+}
+
+/**
+ * Map a world-space point `{ x, y }` to minimap pixel coordinates.
+ *
+ * @param point       World coordinate
+ * @param contentRect Bounding box of all content (from `contentBounds`)
+ * @param scale       Scale factor (from `miniScale`)
+ * @param padding     Padding inset in px (must match the value passed to `miniScale`)
+ */
+export function worldToMini(
+  point: { x: number; y: number },
+  contentRect: Rect,
+  scale: number,
+  padding = 8,
+): { x: number; y: number } {
+  return {
+    x: (point.x - contentRect.x) * scale + padding,
+    y: (point.y - contentRect.y) * scale + padding,
+  }
+}
+
+/**
+ * Compute the position and size of the viewport indicator rectangle in
+ * minimap coordinates, ready to be applied as CSS `left/top/width/height`.
+ */
+export function viewportRectInMini(
+  viewport: Rect,
+  contentRect: Rect,
+  scale: number,
+  padding = 8,
+): Rect {
+  const { x, y } = worldToMini(
+    { x: viewport.x, y: viewport.y },
+    contentRect,
+    scale,
+    padding,
+  )
+  return {
+    x,
+    y,
+    width: viewport.width * scale,
+    height: viewport.height * scale,
+  }
+}
+
+/**
+ * Build the framework-agnostic ARIA props for the minimap container.
+ *
+ * Every adapter spreads `ariaProps` onto its outermost element; `dataAttributes`
+ * are available for CSS hooks.
+ */
+export function createMiniMap(): MiniMapAPI {
+  return {
+    ariaProps: { role: 'img', 'aria-label': 'Minimap' },
+    dataAttributes: { 'data-component': 'mini-map' },
+  }
+}

package/dist/pre-call-lobby/index.ts

@@ -0,0 +1,22 @@
+export {
+  createPreCallLobby,
+  micLevelToBars,
+  type MediaDeviceOption,
+  type DeviceKind,
+  type PreCallLobbyProps,
+  type PreCallLobbyAPI,
+} from './pre-call-lobby.js'
+
+export {
+  preCallLobbyVariants,
+  preCallCameraVariants,
+  preCallCameraPlaceholderClass,
+  preCallDeviceRowClass,
+  preCallDeviceLabelClass,
+  preCallDeviceSelectClass,
+  preCallMicMeterClass,
+  preCallMicBarVariants,
+  preCallControlsRowClass,
+  preCallToggleVariants,
+  preCallJoinButtonClass,
+} from './pre-call-lobby.styles.js'

package/dist/pre-call-lobby/pre-call-lobby.styles.ts

@@ -0,0 +1,108 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Outer lobby card — a centered panel that holds all preflight controls.
+ */
+export const preCallLobbyVariants = cva({
+  base: [
+    'flex flex-col gap-6 rounded-2xl border border-border bg-card p-6 shadow-sm',
+    'w-full max-w-lg mx-auto',
+  ].join(' '),
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * Camera preview area. The `camera` variant switches between the live preview
+ * slot and an avatar / placeholder shown when the camera is off.
+ */
+export const preCallCameraVariants = cva({
+  base: [
+    'relative flex items-center justify-center overflow-hidden rounded-xl',
+    'aspect-video w-full bg-muted',
+  ].join(' '),
+  variants: {
+    camera: {
+      on: '',
+      off: 'bg-muted',
+    },
+  },
+  defaultVariants: {
+    camera: 'on',
+  },
+})
+
+/** Placeholder shown inside the camera area when the camera is off. */
+export const preCallCameraPlaceholderClass = [
+  'flex flex-col items-center justify-center gap-2',
+  'text-muted-foreground select-none',
+].join(' ')
+
+/** Row that holds the label and the <select> for a device picker. */
+export const preCallDeviceRowClass = 'flex flex-col gap-1'
+
+/** Label text above a device picker. */
+export const preCallDeviceLabelClass = 'text-xs font-medium text-muted-foreground'
+
+/** The <select> element used for device selection. */
+export const preCallDeviceSelectClass = [
+  'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1',
+  'text-sm text-foreground shadow-sm',
+  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ')
+
+/**
+ * Mic level meter container. Renders a row of bars.
+ */
+export const preCallMicMeterClass = 'flex items-end gap-0.5 h-5'
+
+/**
+ * An individual bar in the mic level meter.
+ * The `lit` variant distinguishes active (lit) from inactive bars.
+ */
+export const preCallMicBarVariants = cva({
+  base: 'w-1.5 rounded-sm transition-colors',
+  variants: {
+    lit: {
+      true: 'bg-primary',
+      false: 'bg-muted-foreground/30',
+    },
+  },
+  defaultVariants: {
+    lit: 'false',
+  },
+})
+
+/** Row holding the camera-toggle and mic-toggle buttons. */
+export const preCallControlsRowClass = 'flex items-center gap-3'
+
+/**
+ * Toggle button for camera or microphone.
+ * The `active` variant styles the enabled vs disabled states.
+ */
+export const preCallToggleVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-full p-2.5',
+    'transition-colors focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-ring focus-visible:ring-offset-2',
+  ].join(' '),
+  variants: {
+    active: {
+      true: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      false: 'bg-destructive/10 text-destructive hover:bg-destructive/20',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
+
+/** Primary "Join" button. */
+export const preCallJoinButtonClass = [
+  'inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5',
+  'bg-primary text-primary-foreground text-sm font-semibold',
+  'shadow transition-colors hover:bg-primary/90',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  'disabled:pointer-events-none disabled:opacity-50',
+].join(' ')

package/dist/pre-call-lobby/pre-call-lobby.ts

@@ -0,0 +1,61 @@
+/** A single selectable media device (camera, microphone, or speaker). */
+export interface MediaDeviceOption {
+  id: string
+  label: string
+}
+
+/** The kind of media device. */
+export type DeviceKind = 'camera' | 'microphone' | 'speaker'
+
+export interface PreCallLobbyProps {
+  /** Whether the camera is currently enabled. */
+  cameraOn: boolean
+  /** Whether the microphone is currently enabled. */
+  micOn: boolean
+}
+
+export interface PreCallLobbyAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: { role: 'group'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: { 'data-camera': string; 'data-mic': string }
+}
+
+/**
+ * Build the framework-agnostic group props for a pre-call lobby / device-check panel.
+ *
+ * Returns `role="group"` plus data attributes reflecting camera and mic state.
+ * Adapters spread these onto their container and render the device pickers,
+ * preview, and join button themselves.
+ */
+export function createPreCallLobby(props: PreCallLobbyProps): PreCallLobbyAPI {
+  const { cameraOn, micOn } = props
+
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Device setup',
+    },
+    dataAttributes: {
+      'data-camera': cameraOn ? 'on' : 'off',
+      'data-mic': micOn ? 'on' : 'off',
+    },
+  }
+}
+
+/**
+ * Convert a microphone level (0..1) to a count of lit bars.
+ *
+ * Pure function — no side effects, no JSX. Adapters use this to render
+ * the mic level meter by iterating `0..barCount` and lighting bars up to
+ * the returned value.
+ *
+ * @param level    Current mic level in the range [0, 1].
+ * @param barCount Total number of bars in the meter.
+ * @returns        Number of bars that should appear "lit" (0..barCount).
+ */
+export function micLevelToBars(level: number, barCount: number): number {
+  if (barCount <= 0) return 0
+  const clamped = Math.min(1, Math.max(0, level))
+  return Math.round(clamped * barCount)
+}

package/dist/radial-gauge/index.ts

@@ -0,0 +1,26 @@
+export {
+  clampValue,
+  valueToFraction,
+  polarToCartesian,
+  describeArc,
+  gaugeStrokeDashoffset,
+  resolveZoneTone,
+  createRadialGauge,
+  GAUGE_SIZE_PX,
+  type GaugeSize,
+  type GaugeTone,
+  type GaugeZone,
+  type RadialGaugeProps,
+  type RadialGaugeAPI,
+} from './radial-gauge.js'
+
+export {
+  radialGaugeRootVariants,
+  gaugeTrackClass,
+  gaugeArcClass,
+  gaugeArcToneVariants,
+  gaugeLabelClass,
+  gaugeSublabelClass,
+  GAUGE_LABEL_FONT_SIZE,
+  GAUGE_SUBLABEL_FONT_SIZE,
+} from './radial-gauge.styles.js'

package/dist/radial-gauge/radial-gauge.styles.ts

@@ -0,0 +1,75 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root SVG element variants — controls the rendered size via an inline
+ * width/height (adapters use GAUGE_SIZE_PX) and sets up the color context.
+ */
+export const radialGaugeRootVariants = cva({
+  base: 'inline-block shrink-0',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * Track (background) circle stroke class.
+ * Uses a muted foreground so it sits behind the value arc without competing.
+ */
+export const gaugeTrackClass = 'fill-none stroke-muted-foreground/20'
+
+/**
+ * Value arc stroke class — resolved per tone via {@link gaugeArcToneVariants}.
+ * `currentColor` stroke picks up the Tailwind text-* class applied by the
+ * tone variant so we only need one class-generating helper.
+ */
+export const gaugeArcClass = 'fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out'
+
+/**
+ * Tone variants for the value arc.  Adapters combine this with `gaugeArcClass`.
+ */
+export const gaugeArcToneVariants = cva({
+  base: '',
+  variants: {
+    tone: {
+      default: 'text-foreground',
+      success: 'text-emerald-500',
+      warning: 'text-amber-500',
+      danger: 'text-destructive',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+})
+
+/** Center label (primary text) classes. */
+export const gaugeLabelClass = 'fill-foreground text-center font-semibold'
+
+/** Center sub-label (secondary text) classes. */
+export const gaugeSublabelClass = 'fill-muted-foreground'
+
+/**
+ * Font size for the primary label by size variant.
+ * Expressed as SVG `font-size` values (px) for use in the `<text>` element.
+ */
+export const GAUGE_LABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 14,
+  md: 20,
+  lg: 26,
+}
+
+/**
+ * Font size for the sub-label by size variant.
+ */
+export const GAUGE_SUBLABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 9,
+  md: 11,
+  lg: 13,
+}