@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/astro-graph-view/GraphView.astro

@@ -0,0 +1,109 @@
+---
+import {
+  createGraphView,
+  graphEdgePath,
+  summarizeStates,
+  graphViewVariants,
+  graphNodeVariants,
+  graphNodeLabelClass,
+  graphEdgeClass,
+  graphLegendChipVariants,
+  type GraphNode,
+  type GraphEdge,
+  type GraphNodeState,
+} from '../graph-view/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Nodes to render. */
+  nodes: GraphNode[]
+  /** Directed edges connecting nodes. */
+  edges: GraphEdge[]
+  /** Show a legend summarising mastery-state counts. */
+  showLegend?: boolean
+}
+
+const { nodes, edges, showLegend = false, class: className, ...rest } = Astro.props
+
+const api = createGraphView()
+const summary = summarizeStates(nodes)
+
+const STATE_LABELS: Record<GraphNodeState, string> = {
+  mastered: 'Mastered',
+  'in-progress': 'In Progress',
+  'not-started': 'Not Started',
+  highlight: 'Highlight',
+}
+
+const LEGEND_ORDER: GraphNodeState[] = ['mastered', 'in-progress', 'not-started', 'highlight']
+
+const padding = 80
+const xs = nodes.map((n) => n.x)
+const ys = nodes.map((n) => n.y)
+const svgWidth = nodes.length === 0 ? 400 : Math.max(...xs) + padding * 2
+const svgHeight = nodes.length === 0 ? 300 : Math.max(...ys) + padding * 2
+
+// Build node lookup for edge resolution
+const nodeMap = new Map<string, GraphNode>(nodes.map((n) => [n.id, n]))
+---
+
+<div
+  class={cn(graphViewVariants(), className)}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...rest}
+>
+  <div class="relative" style={`width:${svgWidth}px;height:${svgHeight}px;`}>
+    <!-- SVG edge layer -->
+    <svg
+      width={svgWidth}
+      height={svgHeight}
+      aria-hidden="true"
+      style="position:absolute;top:0;left:0;pointer-events:none;"
+    >
+      {
+        edges.map((edge) => {
+          const source = nodeMap.get(edge.source)
+          const target = nodeMap.get(edge.target)
+          if (!source || !target) return null
+          return <path d={graphEdgePath(source, target)} class={graphEdgeClass} />
+        })
+      }
+    </svg>
+
+    <!-- Node chips -->
+    {
+      nodes.map((node) => {
+        const state: GraphNodeState = node.state ?? 'not-started'
+        return (
+          <span
+            data-state={state}
+            aria-label={node.label}
+            class={graphNodeVariants({ state, interactive: 'false' })}
+            style={`left:${node.x}px;top:${node.y}px;`}
+          >
+            <span class={graphNodeLabelClass}>{node.label}</span>
+          </span>
+        )
+      })
+    }
+  </div>
+
+  <!-- Optional legend -->
+  {
+    showLegend && (
+      <div
+        role="list"
+        aria-label="Graph legend"
+        class="flex flex-wrap gap-1.5 p-3"
+      >
+        {LEGEND_ORDER.filter((s) => summary[s] > 0).map((s) => (
+          <span role="listitem" class={graphLegendChipVariants({ state: s })}>
+            {STATE_LABELS[s]}
+            <span class="opacity-70">{summary[s]}</span>
+          </span>
+        ))}
+      </div>
+    )
+  }
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-infinite-canvas/InfiniteCanvas.astro

@@ -0,0 +1,43 @@
+---
+import {
+  createInfiniteCanvas,
+  transformToCss,
+  infiniteCanvasVariants,
+  canvasContentClass,
+} from '../infinite-canvas/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Zoom level (default 1). */
+  zoom?: number
+  /** Pan offset x (default 0). */
+  x?: number
+  /** Pan offset y (default 0). */
+  y?: number
+  /** Show a dot-grid background. */
+  showGrid?: boolean
+}
+
+const {
+  zoom = 1,
+  x = 0,
+  y = 0,
+  showGrid = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createInfiniteCanvas({ zoom })
+const transform = transformToCss({ zoom, x, y })
+---
+
+<div
+  class={cn(infiniteCanvasVariants({ grid: showGrid ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  <div class={canvasContentClass} style={`transform:${transform};transform-origin:0 0`}>
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-input/Input.astro

@@ -3,6 +3,7 @@ import {
   createInput,
   inputVariants,
   type InputType,
+  type InputValidationState,
 } from '../input/index.ts'
 import { cn } from '../shared/index.ts'
 
@@ -13,6 +14,7 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
   readonly?: boolean
   required?: boolean
   'aria-invalid'?: boolean
+  validationState?: InputValidationState
 }
 
 const {
@@ -23,6 +25,7 @@ const {
   readonly,
   required,
   'aria-invalid': ariaInvalid,
+  validationState,
   ...props
 } = Astro.props
 
@@ -32,9 +35,10 @@ const api = createInput({
   readOnly: readonly,
   required,
   'aria-invalid': ariaInvalid === true ? true : undefined,
+  validationState,
 })
 
-const classes = cn(inputVariants({ size }), className)
+const classes = cn(inputVariants({ size, validationState }), className)
 ---
 
 <input

package/dist/astro-live-captions/LiveCaptions.astro

@@ -0,0 +1,54 @@
+---
+import {
+  visibleCues,
+  createLiveCaptions,
+  liveCaptionsVariants,
+  liveCaptionsCueVariants,
+  liveCaptionsSpeakerClass,
+  type CaptionCue,
+} from '../live-captions/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The full ordered list of caption cues. */
+  cues: CaptionCue[]
+  /**
+   * Maximum number of cue lines to display at once.
+   * @default 2
+   */
+  maxLines?: number
+  /**
+   * How the container is positioned in the layout.
+   * @default 'static'
+   */
+  position?: 'static' | 'absolute'
+}
+
+const {
+  cues,
+  maxLines = 2,
+  position = 'static',
+  class: className,
+  ...rest
+} = Astro.props
+
+const shown = visibleCues(cues, maxLines)
+const { ariaProps, dataAttributes } = createLiveCaptions()
+---
+
+<div class={cn(liveCaptionsVariants({ position }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    shown.map((cue) => (
+      <p class={liveCaptionsCueVariants({ interim: cue.final === false ? 'true' : 'false' })}>
+        {cue.speaker ? (
+          <>
+            <span class={liveCaptionsSpeakerClass}>{cue.speaker}</span>
+            {`: ${cue.text}`}
+          </>
+        ) : (
+          cue.text
+        )}
+      </p>
+    ))
+  }
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-live-cursors/LiveCursors.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createLiveCursors,
+  assignCursorColor,
+  liveCursorsVariants,
+  cursorWrapperClass,
+  cursorArrowClass,
+  cursorLabelClass,
+  type CursorData,
+} from '../live-cursors/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Array of collaborator cursor data to render. */
+  cursors: CursorData[]
+}
+
+const { cursors, class: className, ...rest } = Astro.props
+
+const { ariaProps, dataAttributes } = createLiveCursors()
+---
+
+<div class={cn(liveCursorsVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    cursors.map((cursor, index) => {
+      const color = cursor.color ?? assignCursorColor(cursor.id, index)
+      return (
+        <div
+          class={cursorWrapperClass}
+          style={`left:${cursor.x}px;top:${cursor.y}px`}
+          data-cursor-name={cursor.name}
+        >
+          <svg
+            class={cursorArrowClass}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            style={`fill:${color}`}
+          >
+            <path
+              d="M3 2L17 9.5L10.5 11.5L8 18L3 2Z"
+              stroke="white"
+              stroke-width="1.5"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class={cursorLabelClass} style={`background-color:${color}`}>
+            {cursor.name}
+          </span>
+        </div>
+      )
+    })
+  }
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-live-transcript/LiveTranscript.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createLiveTranscript,
+  groupConsecutiveBySpeaker,
+  liveTranscriptVariants,
+  transcriptBlockVariants,
+  transcriptSpeakerRowClass,
+  transcriptSpeakerNameClass,
+  transcriptTimestampClass,
+  transcriptTextLineClass,
+  type TranscriptEntry,
+} from '../live-transcript/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The ordered list of transcript entries to display. */
+  entries: TranscriptEntry[]
+  /** Tightens spacing between speaker blocks. */
+  compact?: boolean
+}
+
+const { entries, compact = false, class: className, ...rest } = Astro.props
+
+const compactVariant = compact ? 'true' : 'false'
+const blocks = groupConsecutiveBySpeaker(entries)
+const { ariaProps, dataAttributes } = createLiveTranscript()
+---
+
+<div
+  class={cn(liveTranscriptVariants({ compact: compactVariant }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    blocks.map((block, blockIndex) => (
+      <div class={transcriptBlockVariants({ compact: compactVariant })}>
+        <div class={transcriptSpeakerRowClass}>
+          <span
+            class={transcriptSpeakerNameClass}
+            style={block.speakerColor ? `color:${block.speakerColor}` : undefined}
+          >
+            {block.speaker}
+          </span>
+          {block.timestamp && (
+            <span class={transcriptTimestampClass}>{block.timestamp}</span>
+          )}
+        </div>
+        {block.texts.map((text) => (
+          <p class={transcriptTextLineClass}>{text}</p>
+        ))}
+      </div>
+    ))
+  }
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-mini-map/MiniMap.astro

@@ -0,0 +1,74 @@
+---
+import {
+  contentBounds,
+  miniScale,
+  worldToMini,
+  viewportRectInMini,
+  createMiniMap,
+  miniMapVariants,
+  miniMapDotClass,
+  miniMapViewportClass,
+  type MiniMapItem,
+  type Rect,
+} from '../mini-map/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Items to render as dots on the minimap. */
+  items: MiniMapItem[]
+  /** Current viewport in world coordinates. Renders a viewport indicator rect. */
+  viewport?: Rect
+  /** Width of the minimap box in px. */
+  width?: number
+  /** Height of the minimap box in px. */
+  height?: number
+  /** Padding inset in px (applied to all sides). */
+  padding?: number
+}
+
+const {
+  items,
+  viewport,
+  width = 200,
+  height = 140,
+  padding = 8,
+  class: className,
+  ...rest
+} = Astro.props
+
+const bounds = contentBounds(items)
+const scale = miniScale(bounds, width, height, padding)
+const { ariaProps, dataAttributes } = createMiniMap()
+
+const viewportRect = viewport != null
+  ? viewportRectInMini(viewport, bounds, scale, padding)
+  : null
+---
+
+<div
+  class={cn(miniMapVariants({ interactive: 'false' }), className)}
+  style={`width:${width}px;height:${height}px;position:relative`}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {items.map((item) => {
+    const pos = worldToMini(item, bounds, scale, padding)
+    const w = Math.max(4, (item.width ?? 8) * scale)
+    const h = Math.max(4, (item.height ?? 8) * scale)
+    return (
+      <span
+        class={miniMapDotClass}
+        style={`position:absolute;left:${pos.x}px;top:${pos.y}px;width:${w}px;height:${h}px`}
+        aria-hidden="true"
+      />
+    )
+  })}
+  {viewportRect != null && (
+    <span
+      class={miniMapViewportClass}
+      style={`position:absolute;left:${viewportRect.x}px;top:${viewportRect.y}px;width:${viewportRect.width}px;height:${viewportRect.height}px`}
+      aria-hidden="true"
+    />
+  )}
+</div>

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

@@ -0,0 +1 @@
+export {}

package/dist/astro-password-input/PasswordInput.astro

@@ -0,0 +1,102 @@
+---
+import { inputVariants, type InputValidationState } from '../input/index.ts'
+import {
+  createPasswordInput,
+  passwordToggleVariants,
+} from '../password-input/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: 'sm' | 'default' | 'lg'
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  validationState?: InputValidationState
+  revealLabel?: string
+  hideLabel?: string
+}
+
+const {
+  size,
+  class: className,
+  disabled,
+  readonly,
+  required,
+  validationState,
+  revealLabel = 'Show password',
+  hideLabel = 'Hide password',
+  ...props
+} = Astro.props
+
+// Render masked initially; progressive enhancement toggles it client-side.
+const { inputType, toggleLabel, togglePressed } = createPasswordInput({
+  revealed: false,
+  revealLabel,
+  hideLabel,
+})
+
+const inputClasses = cn(inputVariants({ size, validationState }), 'pr-10', className)
+const ariaInvalid =
+  validationState === 'invalid' ? true : validationState === 'valid' ? false : undefined
+---
+
+<div class="relative" data-rfr-password-input>
+  <input
+    type={inputType}
+    class={inputClasses}
+    disabled={disabled}
+    readonly={readonly}
+    required={required}
+    aria-invalid={ariaInvalid}
+    data-rfr-password-field
+    {...props}
+  />
+  <button
+    type="button"
+    aria-label={toggleLabel}
+    aria-pressed={togglePressed}
+    class={passwordToggleVariants()}
+    data-rfr-password-toggle
+    data-reveal-label={revealLabel}
+    data-hide-label={hideLabel}
+  >
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4"
+    >
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+
+<script>
+  document
+    .querySelectorAll<HTMLElement>('[data-rfr-password-input]')
+    .forEach((root) => {
+      const field = root.querySelector<HTMLInputElement>(
+        '[data-rfr-password-field]',
+      )
+      const toggle = root.querySelector<HTMLButtonElement>(
+        '[data-rfr-password-toggle]',
+      )
+      if (!field || !toggle) return
+
+      const revealLabel = toggle.dataset.revealLabel ?? 'Show password'
+      const hideLabel = toggle.dataset.hideLabel ?? 'Hide password'
+
+      toggle.addEventListener('click', () => {
+        const revealed = field.type === 'text'
+        const next = !revealed
+        field.type = next ? 'text' : 'password'
+        toggle.setAttribute('aria-pressed', String(next))
+        toggle.setAttribute('aria-label', next ? hideLabel : revealLabel)
+      })
+    })
+</script>

package/dist/astro-password-input/index.ts

@@ -0,0 +1 @@
+export {}