@refraction-ui/astro 0.11.1 → 0.13.0

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

@@ -2,8 +2,10 @@
 export * from './astro-accordion/index.ts';
 export * from './shared/index.ts';
 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';
@@ -12,14 +14,21 @@ 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';
 export * from './astro-command/index.ts';
-export * from './astro-conversation/index.ts';
+export * from './astro-command-input/index.ts';
 export * from './astro-content-protection/index.ts';
+export * from './astro-conversation/index.ts';
 export * from './astro-cookie-consent/index.ts';
 export * from './astro-data-table/index.ts';
 export * from './astro-date-picker/index.ts';
@@ -27,57 +36,76 @@ 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';
 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';
+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';
 export * from './astro-search-bar/index.ts';
+export * from './astro-segmented-control/index.ts';
 export * from './astro-select/index.ts';
+export * from './astro-separator/index.ts';
 export * from './astro-sidebar/index.ts';
 export * from './astro-skeleton/index.ts';
+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-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-table-of-contents/index.ts';
-export * from './astro-carousel/index.ts';
-export * from './astro-slider/index.ts';
-export * from './astro-pagination/index.ts';
-export * from './astro-callout/index.ts';
-export * from './astro-steps/index.ts';
-export * from './astro-file-tree/index.ts';
-export * from './astro-icon-system/index.ts';
-export * from './astro-skip-to-content/index.ts';
-export * from './astro-code-block/index.ts';
-export * from './astro-link-card/index.ts';
-export * from './astro-card-grid/index.ts';
-export * from './astro-payment/index.ts';
-export * from './astro-command-input/index.ts';
-export * from './astro-logger/index.ts';
-export * from './astro-analytics/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/input/index.ts

@@ -1,7 +1,9 @@
 export {
   createInput,
   getInputAriaProps,
+  resolveAriaInvalid,
   type InputType,
+  type InputValidationState,
   type InputProps,
   type InputAPI,
 } from './input.js'

package/dist/input/input.styles.ts

@@ -8,6 +8,10 @@ export const inputVariants = cva({
       default: 'h-9',
       lg: 'h-10 text-base',
     },
+    validationState: {
+      valid: 'border-green-500 focus-visible:ring-green-500',
+      invalid: 'border-destructive focus-visible:ring-destructive',
+    },
   },
   defaultVariants: {
     size: 'default',

package/dist/input/input.ts

@@ -2,6 +2,9 @@ import type { AccessibilityProps } from '../shared/index.ts'
 
 export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
 
+/** High-level validation affordance for an input. */
+export type InputValidationState = 'valid' | 'invalid'
+
 export interface InputProps {
   type?: InputType
   disabled?: boolean
@@ -9,6 +12,14 @@ export interface InputProps {
   required?: boolean
   placeholder?: string
   'aria-invalid'?: boolean
+  /**
+   * Validation affordance. The core derives `aria-invalid` from this:
+   * - `'valid'` → `aria-invalid={false}`
+   * - `'invalid'` → `aria-invalid={true}`
+   *
+   * An explicit `aria-invalid` prop always takes precedence.
+   */
+  validationState?: InputValidationState
 }
 
 export interface InputAPI {
@@ -18,22 +29,47 @@ export interface InputAPI {
   dataAttributes: Record<string, string>
 }
 
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+export function resolveAriaInvalid(
+  ariaInvalid: boolean | undefined,
+  validationState: InputValidationState | undefined,
+): boolean | undefined {
+  if (ariaInvalid !== undefined) {
+    return ariaInvalid
+  }
+  if (validationState === 'invalid') {
+    return true
+  }
+  if (validationState === 'valid') {
+    return false
+  }
+  return undefined
+}
+
 export function createInput(props: InputProps = {}): InputAPI {
   const {
     disabled = false,
     readOnly = false,
     required = false,
     'aria-invalid': ariaInvalid,
+    validationState,
   } = props
 
+  const resolvedInvalid = resolveAriaInvalid(ariaInvalid, validationState)
+
   const ariaProps: InputAPI['ariaProps'] = {}
 
   if (disabled) {
     ariaProps['aria-disabled'] = true
   }
 
-  if (ariaInvalid) {
-    ariaProps['aria-invalid'] = true
+  if (resolvedInvalid !== undefined) {
+    ariaProps['aria-invalid'] = resolvedInvalid
   }
 
   if (required) {
@@ -50,7 +86,7 @@ export function createInput(props: InputProps = {}): InputAPI {
     dataAttributes['data-readonly'] = ''
   }
 
-  if (ariaInvalid) {
+  if (resolvedInvalid === true) {
     dataAttributes['data-invalid'] = ''
   }
 

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'