@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/astro-flow-editor/FlowEditor.astro

@@ -0,0 +1,99 @@
+---
+import {
+  createFlowEditor,
+  edgePath,
+  nodeById,
+  flowEditorVariants,
+  flowNodeVariants,
+  flowNodeLabelClass,
+  flowEdgePathClass,
+  flowEdgeLabelClass,
+  type FlowNode,
+  type FlowEdge,
+} from '../flow-editor/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The nodes to render. */
+  nodes: FlowNode[]
+  /** The directed edges connecting nodes. */
+  edges: FlowEdge[]
+  /** Id of the selected node. */
+  selectedId?: string
+}
+
+const {
+  nodes,
+  edges,
+  selectedId,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createFlowEditor()
+
+const DEFAULT_W = 160
+const DEFAULT_H = 48
+---
+
+<!--
+  Astro renders a static snapshot of the graph. The outer div uses a relative
+  bg-grid container (no InfiniteCanvas import — the .astro canvas is not trivial
+  to SSR without its own island machinery). Pan/zoom is a React-only feature.
+-->
+<div
+  class={cn(flowEditorVariants(), 'bg-[size:24px_24px] bg-[image:linear-gradient(to_right,hsl(var(--border))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border))_1px,transparent_1px)]', className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  <!-- SVG edge layer -->
+  <svg
+    class="absolute inset-0 w-full h-full overflow-visible text-muted-foreground pointer-events-none"
+    aria-hidden="true"
+  >
+    {
+      edges.map((edge) => {
+        const src = nodeById(nodes, edge.source)
+        const tgt = nodeById(nodes, edge.target)
+        if (!src || !tgt) return null
+        const d = edgePath(src, tgt)
+        const midX = (src.x + (src.width ?? DEFAULT_W) + tgt.x) / 2
+        const midY = (src.y + (src.height ?? DEFAULT_H) / 2 + tgt.y + (tgt.height ?? DEFAULT_H) / 2) / 2
+        return (
+          <g>
+            <path d={d} class={flowEdgePathClass} />
+            {edge.label != null && (
+              <text
+                x={midX}
+                y={midY - 4}
+                text-anchor="middle"
+                class={flowEdgeLabelClass}
+              >
+                {edge.label}
+              </text>
+            )}
+          </g>
+        )
+      })
+    }
+  </svg>
+
+  <!-- Node layer -->
+  {
+    nodes.map((node) => {
+      const isSelected = node.selected || node.id === selectedId
+      const w = node.width ?? DEFAULT_W
+      const h = node.height ?? DEFAULT_H
+      return (
+        <div
+          class={cn(flowNodeVariants({ selected: isSelected ? 'true' : 'false' }))}
+          style={`left:${node.x}px;top:${node.y}px;width:${w}px;height:${h}px`}
+          aria-label={node.label}
+        >
+          <span class={flowNodeLabelClass}>{node.label}</span>
+        </div>
+      )
+    })
+  }
+</div>

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

@@ -0,0 +1,3 @@
+// Astro components are imported directly as .astro files; this barrel is a
+// conventional entry-point placeholder for the package.
+export {}

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-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-marquee-strip/MarqueeStrip.astro

@@ -0,0 +1,63 @@
+---
+import {
+  createMarqueeStrip,
+  marqueeStripVariants,
+  marqueeStripInnerClass,
+  marqueeStripScrollOuterClass,
+  marqueeStripScrollTrackClass,
+  marqueeStripLabelClass,
+  marqueeStripItemClass,
+} from '../marquee-strip/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Eyebrow label shown before the items (static mode only). */
+  label?: string
+  /** List of text items to display. */
+  items: string[]
+  /**
+   * When `true` the items scroll continuously using a CSS `marquee` keyframe.
+   * Define the keyframe in your global CSS:
+   *
+   * ```css
+   * @keyframes marquee {
+   *   from { transform: translateX(0); }
+   *   to   { transform: translateX(-50%); }
+   * }
+   * ```
+   *
+   * @default false
+   */
+  scroll?: boolean
+}
+
+const {
+  label,
+  items,
+  scroll = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createMarqueeStrip({ scroll })
+const scrollVariant = scroll ? 'true' : 'false'
+---
+
+<div class={cn(marqueeStripVariants({ scroll: scrollVariant }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {scroll ? (
+    <div class={marqueeStripScrollOuterClass}>
+      <div class={marqueeStripScrollTrackClass}>
+        {[...items, ...items].map((item) => (
+          <span class={marqueeStripItemClass}>{item}</span>
+        ))}
+      </div>
+    </div>
+  ) : (
+    <div class={marqueeStripInnerClass}>
+      {label && <span class={marqueeStripLabelClass}>{label}</span>}
+      {items.map((item) => (
+        <span class={marqueeStripItemClass}>{item}</span>
+      ))}
+    </div>
+  )}
+</div>

package/dist/astro-marquee-strip/index.ts

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

package/dist/astro-mastery-bar/MasteryBar.astro

@@ -0,0 +1,56 @@
+---
+import {
+  clampPercent,
+  createMasteryBar,
+  masteryBarVariants,
+  masteryBarFillVariants,
+  masteryBarLabelClass,
+  masteryBarLeadingLabelClass,
+  masteryBarHeaderClass,
+  type MasteryBarSize,
+} from '../mastery-bar/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Progress value (0–100). Values outside this range are clamped. */
+  value: number
+  /** Label shown on the right side of the header row. */
+  label?: string
+  /** Label shown on the left side of the header row. */
+  leadingLabel?: string
+  /** Visual size of the track. */
+  size?: MasteryBarSize
+  /** Renders the fill at reduced opacity to indicate a muted/secondary state. */
+  muted?: boolean
+}
+
+const {
+  value,
+  label,
+  leadingLabel,
+  size = 'md',
+  muted = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const clamped = clampPercent(value)
+const { ariaProps, dataAttributes } = createMasteryBar({ value })
+const hasHeader = leadingLabel != null || label != null
+const fillWidth = `${clamped}%`
+---
+
+<div class={cn('w-full', className)} {...rest}>
+  {hasHeader && (
+    <div class={masteryBarHeaderClass}>
+      {leadingLabel != null && <span class={masteryBarLeadingLabelClass}>{leadingLabel}</span>}
+      {label != null && <span class={masteryBarLabelClass}>{label}</span>}
+    </div>
+  )}
+  <div class={masteryBarVariants({ size })} {...ariaProps} {...dataAttributes}>
+    <div
+      class={masteryBarFillVariants({ muted: muted ? 'true' : 'false' })}
+      style={`width:${fillWidth}`}
+    />
+  </div>
+</div>

package/dist/astro-mastery-bar/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-numbered-steps/NumberedSteps.astro

@@ -0,0 +1,47 @@
+---
+import {
+  createNumberedSteps,
+  padOrdinal,
+  stepColumns,
+  numberedStepsItemClass,
+  numberedStepsOrdinalClass,
+  numberedStepsTitleClass,
+  numberedStepsBodyClass,
+  type NumberedStepItem,
+} from '../numbered-steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The step items to display (3–5 recommended). */
+  items: NumberedStepItem[]
+  /**
+   * Override the number of grid columns. Defaults to clamping item count to
+   * 2–5 via `stepColumns`.
+   */
+  columns?: number
+}
+
+const { items, columns, class: className, ...rest } = Astro.props
+
+const cols = columns ?? stepColumns(items.length)
+const gridStyle = `grid-template-columns:repeat(${cols},minmax(0,1fr))`
+const { ariaProps, dataAttributes } = createNumberedSteps()
+---
+
+<div
+  class={cn('grid gap-6', className)}
+  style={gridStyle}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    items.map((item, index) => (
+      <div role="listitem" class={numberedStepsItemClass}>
+        <span class={numberedStepsOrdinalClass}>{padOrdinal(index + 1)}</span>
+        <p class={numberedStepsTitleClass}>{item.title}</p>
+        <p class={numberedStepsBodyClass}>{item.body}</p>
+      </div>
+    ))
+  }
+</div>

package/dist/astro-numbered-steps/index.ts

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