@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/flow-editor/flow-editor.ts

@@ -0,0 +1,126 @@
+/** A node in the flow editor canvas. */
+export type FlowNode = {
+  id: string
+  x: number
+  y: number
+  width?: number
+  height?: number
+  label: string
+  selected?: boolean
+}
+
+/** A directed edge connecting two nodes. */
+export type FlowEdge = {
+  id: string
+  source: string
+  target: string
+  label?: string
+}
+
+/** Default node dimensions used when width/height are not specified. */
+const DEFAULT_NODE_WIDTH = 160
+const DEFAULT_NODE_HEIGHT = 48
+
+/**
+ * Compute the center point of a node in canvas coordinates.
+ * Uses the node's explicit dimensions when available, otherwise falls back to
+ * the default box size.
+ */
+export function nodeCenter(node: FlowNode): { x: number; y: number } {
+  const w = node.width ?? DEFAULT_NODE_WIDTH
+  const h = node.height ?? DEFAULT_NODE_HEIGHT
+  return { x: node.x + w / 2, y: node.y + h / 2 }
+}
+
+/**
+ * Find a node by id. Returns `undefined` when not found; callers must guard.
+ */
+export function nodeById(
+  nodes: FlowNode[],
+  id: string,
+): FlowNode | undefined {
+  return nodes.find((n) => n.id === id)
+}
+
+/**
+ * Produce an SVG cubic-bezier path `d` string between the anchor points of two
+ * nodes. The control handles extend horizontally from each anchor so the curve
+ * is smooth regardless of relative position — matching the easyloops
+ * architecture-editor style.
+ *
+ * Source anchor: right-center of the source node.
+ * Target anchor: left-center of the target node.
+ */
+export function edgePath(source: FlowNode, target: FlowNode): string {
+  const sw = source.width ?? DEFAULT_NODE_WIDTH
+  const sh = source.height ?? DEFAULT_NODE_HEIGHT
+  const th = target.height ?? DEFAULT_NODE_HEIGHT
+
+  const x1 = source.x + sw
+  const y1 = source.y + sh / 2
+  const x2 = target.x
+  const y2 = target.y + th / 2
+
+  const dx = Math.abs(x2 - x1)
+  const handleLen = Math.max(dx * 0.5, 40)
+
+  const cx1 = x1 + handleLen
+  const cy1 = y1
+  const cx2 = x2 - handleLen
+  const cy2 = y2
+
+  return `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`
+}
+
+/**
+ * Compute the bounding box that contains all nodes. Useful for fitting the
+ * viewport to content. Returns zeros when the node list is empty.
+ */
+export function contentBounds(nodes: FlowNode[]): {
+  minX: number
+  minY: number
+  maxX: number
+  maxY: number
+} {
+  if (nodes.length === 0) {
+    return { minX: 0, minY: 0, maxX: 0, maxY: 0 }
+  }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const node of nodes) {
+    const w = node.width ?? DEFAULT_NODE_WIDTH
+    const h = node.height ?? DEFAULT_NODE_HEIGHT
+    if (node.x < minX) minX = node.x
+    if (node.y < minY) minY = node.y
+    if (node.x + w > maxX) maxX = node.x + w
+    if (node.y + h > maxY) maxY = node.y + h
+  }
+
+  return { minX, minY, maxX, maxY }
+}
+
+/** Accessibility and data attributes for the root flow editor container. */
+export interface FlowEditorAPI {
+  ariaProps: Record<string, string | number | boolean>
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Return the framework-agnostic root attributes for a FlowEditor.
+ * Adapters spread `ariaProps` and `dataAttributes` on the outermost element.
+ */
+export function createFlowEditor(): FlowEditorAPI {
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Flow editor',
+    },
+    dataAttributes: {
+      'data-flow-editor': 'true',
+    },
+  }
+}

package/dist/flow-editor/index.ts

@@ -0,0 +1,18 @@
+export {
+  nodeCenter,
+  nodeById,
+  edgePath,
+  contentBounds,
+  createFlowEditor,
+  type FlowNode,
+  type FlowEdge,
+  type FlowEditorAPI,
+} from './flow-editor.js'
+
+export {
+  flowEditorVariants,
+  flowNodeVariants,
+  flowNodeLabelClass,
+  flowEdgePathClass,
+  flowEdgeLabelClass,
+} from './flow-editor.styles.js'

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

@@ -0,0 +1,66 @@
+import { cva } from '../shared/index.ts'
+
+/** Outer wrapper for the graph canvas area. */
+export const graphViewVariants = cva({
+  base: 'relative w-full overflow-hidden rounded-lg border border-border bg-background',
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * Node chip: a positioned, clickable concept node colored by mastery state.
+ *
+ * `state` variant drives the visual treatment:
+ * - mastered      → filled primary (bg-primary / text-primary-foreground)
+ * - in-progress   → accent ring (ring-2 ring-ring bg-accent text-accent-foreground)
+ * - not-started   → muted (bg-muted text-muted-foreground)
+ * - highlight     → border-primary accent outline (border-primary bg-background text-foreground)
+ */
+export const graphNodeVariants = cva({
+  base: [
+    'absolute inline-flex items-center justify-center rounded-md border px-2 py-1',
+    'text-xs font-medium leading-none -translate-x-1/2 -translate-y-1/2',
+    'transition-colors focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'cursor-default select-none',
+  ].join(' '),
+  variants: {
+    state: {
+      mastered: 'border-transparent bg-primary text-primary-foreground',
+      'in-progress': 'border-transparent bg-accent text-accent-foreground ring-2 ring-ring',
+      'not-started': 'border-transparent bg-muted text-muted-foreground',
+      highlight: 'border-primary bg-background text-foreground',
+    },
+    interactive: {
+      true: 'cursor-pointer hover:opacity-90',
+      false: 'cursor-default',
+    },
+  },
+  defaultVariants: {
+    state: 'not-started',
+    interactive: 'false',
+  },
+})
+
+/** Label text rendered inside each node chip (already embedded in the chip). */
+export const graphNodeLabelClass = 'pointer-events-none whitespace-nowrap'
+
+/** SVG edge line/path classes. */
+export const graphEdgeClass =
+  'fill-none stroke-border stroke-[1.5] opacity-60'
+
+/** Legend chip: a small colored indicator + label for a single mastery state. */
+export const graphLegendChipVariants = cva({
+  base: 'inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium',
+  variants: {
+    state: {
+      mastered: 'border-transparent bg-primary text-primary-foreground',
+      'in-progress': 'border-transparent bg-accent text-accent-foreground ring-1 ring-ring',
+      'not-started': 'border-transparent bg-muted text-muted-foreground',
+      highlight: 'border-primary bg-background text-foreground',
+    },
+  },
+  defaultVariants: {
+    state: 'not-started',
+  },
+})

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,20 +5,26 @@ 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-audience-feature-card/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';
 export * from './astro-badge/index.ts';
 export * from './astro-bottom-nav/index.ts';
+export * from './astro-brand-network-cell/index.ts';
 export * from './astro-breadcrumbs/index.ts';
+export * from './astro-browser-chrome-mock/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 +39,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,22 +59,34 @@ 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-marquee-strip/index.ts';
+export * from './astro-mastery-bar/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-numbered-steps/index.ts';
 export * from './astro-otp-input/index.ts';
 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-pricing-card/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';
 export * from './astro-search-bar/index.ts';
+export * from './astro-section-head/index.ts';
 export * from './astro-segmented-control/index.ts';
 export * from './astro-select/index.ts';
 export * from './astro-separator/index.ts';
@@ -72,17 +96,25 @@ export * from './astro-skip-to-content/index.ts';
 export * from './astro-slide-viewer/index.ts';
 export * from './astro-slider/index.ts';
 export * from './astro-social-auth-button/index.ts';
+export * from './astro-stat-grid/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'