@refraction-ui/astro 0.12.0 → 0.13.0

package/dist/graph-view/graph-view.ts

@@ -0,0 +1,130 @@
+/** Visual mastery state of a node in the knowledge graph. */
+export type GraphNodeState = 'mastered' | 'in-progress' | 'not-started' | 'highlight'
+
+/** A concept node in the knowledge / dependency graph. */
+export interface GraphNode {
+  /** Unique identifier. */
+  id: string
+  /** X position in the graph canvas (pixels). */
+  x: number
+  /** Y position in the graph canvas (pixels). */
+  y: number
+  /** Human-readable label shown in the node chip. */
+  label: string
+  /** Visual mastery state. Defaults to `'not-started'`. */
+  state?: GraphNodeState
+}
+
+/** A directed edge connecting two nodes. */
+export interface GraphEdge {
+  /** Unique identifier. */
+  id: string
+  /** ID of the source node. */
+  source: string
+  /** ID of the target node. */
+  target: string
+}
+
+/** Axis-aligned bounding box of a set of nodes. */
+export interface GraphBounds {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+  width: number
+  height: number
+}
+
+/** Per-state counts returned by {@link summarizeStates}. */
+export type GraphStateSummary = Record<GraphNodeState, number>
+
+export interface GraphViewAPI {
+  /** ARIA/role attributes to spread on the graph container. */
+  ariaProps: { role: string; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build framework-agnostic container props for a GraphView.
+ *
+ * The graph is a read-only knowledge / dependency visualisation. It uses
+ * `role="group"` (not `role="img"`) so that interactive node chips inside it
+ * remain in the accessibility tree and keyboard reachable.
+ */
+export function createGraphView(): GraphViewAPI {
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Knowledge graph',
+    },
+    dataAttributes: {},
+  }
+}
+
+/**
+ * Look up a node by id. Returns `undefined` when not found.
+ */
+export function nodeById(nodes: GraphNode[], id: string): GraphNode | undefined {
+  return nodes.find((n) => n.id === id)
+}
+
+/**
+ * Build an SVG cubic-bezier path `d` string between two node positions.
+ *
+ * The control points bend the curve vertically so edges arc gracefully between
+ * horizontally or vertically offset nodes. Works for any pair of positions.
+ */
+export function graphEdgePath(source: GraphNode, target: GraphNode): string {
+  const sx = source.x
+  const sy = source.y
+  const tx = target.x
+  const ty = target.y
+
+  // Control-point offset: half the vertical distance, minimum 40px.
+  const dy = Math.abs(ty - sy)
+  const offset = Math.max(dy * 0.5, 40)
+
+  return `M ${sx} ${sy} C ${sx} ${sy + offset}, ${tx} ${ty - offset}, ${tx} ${ty}`
+}
+
+/**
+ * Compute the axis-aligned bounding box of a set of nodes.
+ *
+ * Returns zero-area bounds centred at the origin when the array is empty.
+ */
+export function graphBounds(nodes: GraphNode[]): GraphBounds {
+  if (nodes.length === 0) {
+    return { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0 }
+  }
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  for (const n of nodes) {
+    if (n.x < minX) minX = n.x
+    if (n.y < minY) minY = n.y
+    if (n.x > maxX) maxX = n.x
+    if (n.y > maxY) maxY = n.y
+  }
+  return { minX, minY, maxX, maxY, width: maxX - minX, height: maxY - minY }
+}
+
+/**
+ * Count nodes per mastery state.
+ *
+ * Nodes without an explicit `state` are counted as `'not-started'`.
+ */
+export function summarizeStates(nodes: GraphNode[]): GraphStateSummary {
+  const counts: GraphStateSummary = {
+    mastered: 0,
+    'in-progress': 0,
+    'not-started': 0,
+    highlight: 0,
+  }
+  for (const n of nodes) {
+    const s: GraphNodeState = n.state ?? 'not-started'
+    counts[s] += 1
+  }
+  return counts
+}

package/dist/graph-view/index.ts

@@ -0,0 +1,21 @@
+export {
+  createGraphView,
+  nodeById,
+  graphEdgePath,
+  graphBounds,
+  summarizeStates,
+  type GraphNodeState,
+  type GraphNode,
+  type GraphEdge,
+  type GraphBounds,
+  type GraphStateSummary,
+  type GraphViewAPI,
+} from './graph-view.js'
+
+export {
+  graphViewVariants,
+  graphNodeVariants,
+  graphNodeLabelClass,
+  graphEdgeClass,
+  graphLegendChipVariants,
+} from './graph-view.styles.js'

package/dist/index.ts

@@ -5,6 +5,7 @@ export * from './astro-ai/index.ts';
 export * from './astro-analytics/index.ts';
 export * from './astro-animated-text/index.ts';
 export * from './astro-app-shell/index.ts';
+export * from './astro-audio-room/index.ts';
 export * from './astro-auth/index.ts';
 export * from './astro-avatar/index.ts';
 export * from './astro-avatar-group/index.ts';
@@ -13,12 +14,14 @@ export * from './astro-bottom-nav/index.ts';
 export * from './astro-breadcrumbs/index.ts';
 export * from './astro-button/index.ts';
 export * from './astro-calendar/index.ts';
+export * from './astro-call-controls/index.ts';
 export * from './astro-callout/index.ts';
 export * from './astro-card/index.ts';
 export * from './astro-card-grid/index.ts';
 export * from './astro-carousel/index.ts';
 export * from './astro-charts/index.ts';
 export * from './astro-checkbox/index.ts';
+export * from './astro-checklist/index.ts';
 export * from './astro-code-block/index.ts';
 export * from './astro-code-editor/index.ts';
 export * from './astro-collapsible/index.ts';
@@ -33,13 +36,19 @@ export * from './astro-device-frame/index.ts';
 export * from './astro-dialog/index.ts';
 export * from './astro-diff-viewer/index.ts';
 export * from './astro-dropdown-menu/index.ts';
+export * from './astro-editor-status-bar/index.ts';
+export * from './astro-editor-tabs/index.ts';
 export * from './astro-emoji-picker/index.ts';
 export * from './astro-empty-state/index.ts';
 export * from './astro-feedback-dialog/index.ts';
 export * from './astro-file-tree/index.ts';
 export * from './astro-file-upload/index.ts';
+export * from './astro-floating-reactions/index.ts';
+export * from './astro-flow-editor/index.ts';
 export * from './astro-footer/index.ts';
+export * from './astro-graph-view/index.ts';
 export * from './astro-icon-system/index.ts';
+export * from './astro-infinite-canvas/index.ts';
 export * from './astro-inline-editor/index.ts';
 export * from './astro-input/index.ts';
 export * from './astro-input-group/index.ts';
@@ -47,8 +56,12 @@ export * from './astro-install-prompt/index.ts';
 export * from './astro-keyboard-shortcut/index.ts';
 export * from './astro-language-selector/index.ts';
 export * from './astro-link-card/index.ts';
+export * from './astro-live-captions/index.ts';
+export * from './astro-live-cursors/index.ts';
+export * from './astro-live-transcript/index.ts';
 export * from './astro-logger/index.ts';
 export * from './astro-markdown-renderer/index.ts';
+export * from './astro-mini-map/index.ts';
 export * from './astro-mobile-nav/index.ts';
 export * from './astro-navbar/index.ts';
 export * from './astro-otp-input/index.ts';
@@ -56,9 +69,12 @@ export * from './astro-pagination/index.ts';
 export * from './astro-password-input/index.ts';
 export * from './astro-payment/index.ts';
 export * from './astro-popover/index.ts';
+export * from './astro-pre-call-lobby/index.ts';
 export * from './astro-presence-indicator/index.ts';
 export * from './astro-progress-display/index.ts';
+export * from './astro-radial-gauge/index.ts';
 export * from './astro-radio/index.ts';
+export * from './astro-rating-scale/index.ts';
 export * from './astro-reaction-bar/index.ts';
 export * from './astro-resizable-layout/index.ts';
 export * from './astro-rich-editor/index.ts';
@@ -74,15 +90,22 @@ export * from './astro-slider/index.ts';
 export * from './astro-social-auth-button/index.ts';
 export * from './astro-status-indicator/index.ts';
 export * from './astro-steps/index.ts';
+export * from './astro-sticky-note/index.ts';
 export * from './astro-switch/index.ts';
 export * from './astro-table-of-contents/index.ts';
 export * from './astro-tabs/index.ts';
+export * from './astro-terminal/index.ts';
+export * from './astro-test-results/index.ts';
 export * from './astro-textarea/index.ts';
 export * from './astro-theme/index.ts';
 export * from './astro-thread-view/index.ts';
+export * from './astro-timeline/index.ts';
 export * from './astro-toast/index.ts';
 export * from './astro-tooltip/index.ts';
 export * from './astro-version-selector/index.ts';
+export * from './astro-video-grid/index.ts';
 export * from './astro-video-player/index.ts';
+export * from './astro-video-tile/index.ts';
 export * from './astro-voice-pill/index.ts';
 export * from './astro-waveform/index.ts';
+export * from './astro-wizard/index.ts';

package/dist/infinite-canvas/index.ts

@@ -0,0 +1,17 @@
+export {
+  clampZoom,
+  fitTransform,
+  transformToCss,
+  createInfiniteCanvas,
+  type CanvasTransform,
+  type Bounds,
+  type CreateInfiniteCanvasOptions,
+  type InfiniteCanvasAPI,
+} from './infinite-canvas.js'
+
+export {
+  infiniteCanvasVariants,
+  canvasContentClass,
+  canvasControlsClass,
+  canvasZoomButtonVariants,
+} from './infinite-canvas.styles.js'

package/dist/infinite-canvas/infinite-canvas.styles.ts

@@ -0,0 +1,49 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * The outer viewport container. `overflow-hidden` clips panned content;
+ * `relative` anchors the absolute controls overlay.
+ *
+ * The `grid` variant adds a subtle dot-grid background rendered with a radial
+ * gradient using the `--border` semantic token so it respects the active theme.
+ */
+export const infiniteCanvasVariants = cva({
+  base: 'relative overflow-hidden bg-background',
+  variants: {
+    grid: {
+      'true': [
+        'bg-[radial-gradient(circle,hsl(var(--border))_1px,transparent_1px)]',
+        '[background-size:24px_24px]',
+      ].join(' '),
+      'false': '',
+    },
+  },
+  defaultVariants: {
+    grid: 'false',
+  },
+})
+
+/**
+ * The transformed content layer that wraps children.
+ * `transform-gpu` promotes the layer for smooth panning/zooming.
+ * `origin-top-left` matches `transformOrigin: '0 0'` in the React adapter.
+ */
+export const canvasContentClass =
+  'absolute inset-0 origin-top-left will-change-transform'
+
+/** Zoom-controls cluster — pinned to the bottom-right of the viewport. */
+export const canvasControlsClass =
+  'absolute bottom-4 right-4 z-10 flex items-center gap-1'
+
+/** Individual zoom button (+ / − / fit). */
+export const canvasZoomButtonVariants = cva({
+  base: [
+    'inline-flex h-8 w-8 items-center justify-center rounded-md border border-border',
+    'bg-card text-foreground text-sm font-medium',
+    'hover:bg-muted transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ].join(' '),
+  variants: {},
+  defaultVariants: {},
+})

package/dist/infinite-canvas/infinite-canvas.ts

@@ -0,0 +1,97 @@
+/** Transform state for an infinite canvas viewport. */
+export type CanvasTransform = {
+  zoom: number
+  x: number
+  y: number
+}
+
+/** Axis-aligned bounding box of canvas content. */
+export interface Bounds {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+}
+
+/**
+ * Clamp a zoom level to [min, max].
+ *
+ * Defaults match common design-tool conventions: 25 % (0.25) to 400 % (4).
+ */
+export function clampZoom(zoom: number, min = 0.25, max = 4): number {
+  return Math.min(Math.max(zoom, min), max)
+}
+
+/**
+ * Compute the transform that centers `bounds` inside a viewport of size
+ * `viewportW × viewportH` with optional uniform `padding` (default 32 px).
+ *
+ * Returns a `CanvasTransform` clamped to [0.25, 4].
+ */
+export function fitTransform(
+  bounds: Bounds,
+  viewportW: number,
+  viewportH: number,
+  padding = 32,
+): CanvasTransform {
+  const contentW = bounds.maxX - bounds.minX
+  const contentH = bounds.maxY - bounds.minY
+
+  if (contentW <= 0 || contentH <= 0 || viewportW <= 0 || viewportH <= 0) {
+    return { zoom: 1, x: 0, y: 0 }
+  }
+
+  const availW = viewportW - padding * 2
+  const availH = viewportH - padding * 2
+  const rawZoom = Math.min(availW / contentW, availH / contentH)
+  const zoom = clampZoom(rawZoom)
+
+  // Center the scaled content within the viewport.
+  const scaledW = contentW * zoom
+  const scaledH = contentH * zoom
+  const x = (viewportW - scaledW) / 2 - bounds.minX * zoom
+  const y = (viewportH - scaledH) / 2 - bounds.minY * zoom
+
+  return { zoom, x, y }
+}
+
+/**
+ * Convert a `CanvasTransform` to a CSS `transform` string suitable for the
+ * content layer (`transformOrigin: '0 0'`).
+ */
+export function transformToCss(t: CanvasTransform): string {
+  return `translate(${t.x}px, ${t.y}px) scale(${t.zoom})`
+}
+
+export interface CreateInfiniteCanvasOptions {
+  zoom?: number
+}
+
+export interface InfiniteCanvasAPI {
+  /** ARIA attributes to spread on the viewport element. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string | number | boolean>
+}
+
+/**
+ * Build the framework-agnostic props for an infinite canvas viewport.
+ *
+ * Returns `role="group"` plus data attributes; adapters spread these onto
+ * their container element.
+ */
+export function createInfiniteCanvas(
+  options: CreateInfiniteCanvasOptions = {},
+): InfiniteCanvasAPI {
+  const { zoom = 1 } = options
+
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Canvas',
+    },
+    dataAttributes: {
+      'data-zoom': zoom,
+    },
+  }
+}

package/dist/live-captions/index.ts

@@ -0,0 +1,13 @@
+export {
+  visibleCues,
+  formatCue,
+  createLiveCaptions,
+  type CaptionCue,
+  type LiveCaptionsAPI,
+} from './live-captions.js'
+
+export {
+  liveCaptionsVariants,
+  liveCaptionsCueVariants,
+  liveCaptionsSpeakerClass,
+} from './live-captions.styles.js'

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

@@ -0,0 +1,45 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Caption overlay container — an absolute-friendly, translucent dark surface
+ * centred over its positioned ancestor (e.g. a video element).
+ */
+export const 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',
+  },
+})
+
+/**
+ * A single cue line inside the overlay.
+ * Non-final (interim) cues get a dimmed italic treatment to signal they may change.
+ */
+export const liveCaptionsCueVariants = cva({
+  base: 'text-sm leading-snug text-foreground',
+  variants: {
+    interim: {
+      true: 'opacity-60 italic',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    interim: 'false',
+  },
+})
+
+/** Speaker-name prefix — rendered slightly muted to distinguish it from the speech text. */
+export const liveCaptionsSpeakerClass = 'font-medium text-muted-foreground'

package/dist/live-captions/live-captions.ts

@@ -0,0 +1,57 @@
+/** A single caption cue — may be interim (non-final) while speech is in flight. */
+export interface CaptionCue {
+  /** Unique identifier for this cue. */
+  id: string
+  /** Speaker name, shown as a prefix when present. */
+  speaker?: string
+  /** The caption text. */
+  text: string
+  /** Whether this cue is finalised (true) or still being transcribed (false/absent). */
+  final?: boolean
+}
+
+/**
+ * Return the last `maxLines` cues to display in the caption overlay.
+ * Preserves ordering (oldest first within the slice) so the overlay reads top-to-bottom.
+ */
+export function visibleCues(cues: CaptionCue[], maxLines = 2): CaptionCue[] {
+  if (maxLines <= 0) return []
+  return cues.slice(-maxLines)
+}
+
+/**
+ * Format a single cue for display.
+ * When `speaker` is present the result is `'Maya: the bottleneck is review capacity'`.
+ * Without a speaker it is just the text.
+ */
+export function formatCue(cue: CaptionCue): string {
+  return cue.speaker ? `${cue.speaker}: ${cue.text}` : cue.text
+}
+
+export interface LiveCaptionsAPI {
+  /** ARIA attributes to spread on the caption container element. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic accessibility props for a live-caption overlay.
+ *
+ * Returns `role="log"` with `aria-live="polite"` and `aria-atomic=false` so
+ * screen readers announce individual cues as they arrive without re-reading the
+ * whole log. Adapters spread these onto the container element.
+ */
+export function createLiveCaptions(): LiveCaptionsAPI {
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'log',
+    'aria-live': 'polite',
+    'aria-atomic': false,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'live-captions',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/live-cursors/index.ts

@@ -0,0 +1,14 @@
+export {
+  createLiveCursors,
+  assignCursorColor,
+  CURSOR_COLORS,
+  type CursorData,
+  type LiveCursorsAPI,
+} from './live-cursors.js'
+
+export {
+  liveCursorsVariants,
+  cursorWrapperClass,
+  cursorArrowClass,
+  cursorLabelClass,
+} from './live-cursors.styles.js'

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

@@ -0,0 +1,41 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Full-bleed overlay that contains all cursor elements.
+ * `pointer-events-none` and `overflow-hidden` ensure cursors are decorative
+ * and don't interfere with the underlying canvas interactions.
+ */
+export const 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',
+  },
+})
+
+/**
+ * Wrapper for a single cursor (SVG + label). Absolutely positioned via inline
+ * `left`/`top` style; the transition provides smooth movement when coordinates
+ * update.
+ */
+export const cursorWrapperClass =
+  'absolute flex flex-col items-start transition-[left,top] duration-100 ease-linear'
+
+/**
+ * The SVG cursor arrow container. Fill is applied via inline style (per
+ * collaborator color) so no utility class is needed here.
+ */
+export const cursorArrowClass = 'h-5 w-5 drop-shadow-sm'
+
+/**
+ * Name-label chip that appears below the cursor arrow. Background is applied
+ * via inline style (per collaborator color); text is always white for contrast.
+ */
+export const cursorLabelClass =
+  'mt-0.5 ml-2 rounded px-1.5 py-0.5 text-xs font-medium text-white shadow-sm whitespace-nowrap'

package/dist/live-cursors/live-cursors.ts

@@ -0,0 +1,73 @@
+/** Data for a single collaborator cursor. */
+export type CursorData = {
+  id: string
+  name: string
+  x: number
+  y: number
+  color?: string
+}
+
+/**
+ * A fixed palette of 8 hex colors for distinguishing collaborator cursors.
+ * Each color is vivid enough to be visible against both light and dark surfaces.
+ */
+export const CURSOR_COLORS: string[] = [
+  '#E94560', // red
+  '#F57C00', // orange
+  '#F9C840', // yellow
+  '#4CAF50', // green
+  '#00ACC1', // cyan
+  '#5C6BC0', // indigo
+  '#AB47BC', // purple
+  '#EC407A', // pink
+]
+
+/**
+ * Assign a stable color to a cursor.
+ *
+ * When `index` is supplied the color is simply `CURSOR_COLORS[index % length]`
+ * (deterministic for ordered participant lists). Otherwise a lightweight
+ * djb2-style hash of the `id` string is used so the same id always maps to the
+ * same color across renders without using Math.random or Date.now.
+ */
+export function assignCursorColor(id: string, index?: number): string {
+  if (index !== undefined) {
+    return CURSOR_COLORS[index % CURSOR_COLORS.length]
+  }
+
+  // djb2 hash — deterministic, no side-effects
+  let hash = 5381
+  for (let i = 0; i < id.length; i++) {
+    hash = ((hash << 5) + hash) ^ id.charCodeAt(i)
+    hash = hash >>> 0 // keep unsigned 32-bit
+  }
+  return CURSOR_COLORS[hash % CURSOR_COLORS.length]
+}
+
+export interface LiveCursorsAPI {
+  /** ARIA attributes to spread on the overlay container. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic props for the live-cursors overlay.
+ *
+ * Cursors are purely decorative real-time presence indicators — aria-hidden
+ * true keeps them out of the accessibility tree. The group role is present for
+ * semantic correctness should a developer choose to un-hide it.
+ */
+export function createLiveCursors(): LiveCursorsAPI {
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'group',
+    'aria-label': 'Collaborators',
+    'aria-hidden': true,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-live-cursors': '',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/live-transcript/index.ts

@@ -0,0 +1,16 @@
+export {
+  groupConsecutiveBySpeaker,
+  createLiveTranscript,
+  type TranscriptEntry,
+  type TranscriptBlock,
+  type LiveTranscriptAPI,
+} from './live-transcript.js'
+
+export {
+  liveTranscriptVariants,
+  transcriptBlockVariants,
+  transcriptSpeakerRowClass,
+  transcriptSpeakerNameClass,
+  transcriptTimestampClass,
+  transcriptTextLineClass,
+} from './live-transcript.styles.js'