@refraction-ui/astro 0.12.0 → 0.13.0

package/dist/astro-audio-room/AudioRoom.astro

@@ -0,0 +1,81 @@
+---
+import {
+  createAudioRoom,
+  getInitials,
+  orbColumns,
+  audioRoomVariants,
+  audioRoomOrbCellVariants,
+  speakingOrbVariants,
+  audioRoomNameLabelClass,
+  audioRoomMutedBadgeClass,
+  audioRoomHandBadgeClass,
+  type AudioParticipant,
+} from '../audio-room/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Participants to render as speaking orbs. */
+  participants: AudioParticipant[]
+}
+
+const { participants, class: className, ...rest } = Astro.props
+
+const cols = orbColumns(participants.length)
+const { ariaProps, dataAttributes } = createAudioRoom()
+---
+
+<div
+  class={cn(audioRoomVariants(), className)}
+  style={`grid-template-columns: repeat(${cols}, minmax(0, 1fr))`}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    participants.map((participant) => {
+      const initials = getInitials(participant.name)
+      const speaking = participant.speaking ?? false
+      const muted = participant.muted ?? false
+      const handRaised = participant.handRaised ?? false
+
+      return (
+        <div class={audioRoomOrbCellVariants()}>
+          <div
+            role="img"
+            aria-label={participant.name}
+            data-speaking={speaking ? 'true' : 'false'}
+            data-muted={muted ? 'true' : 'false'}
+            data-hand-raised={handRaised ? 'true' : 'false'}
+            class={speakingOrbVariants({
+              speaking: speaking ? 'true' : 'false',
+              muted: muted ? 'true' : 'false',
+            })}
+          >
+            {participant.avatarUrl ? (
+              <img
+                src={participant.avatarUrl}
+                alt={participant.name}
+                class="absolute inset-0 size-full object-cover"
+              />
+            ) : (
+              <span aria-hidden="true">{initials}</span>
+            )}
+
+            {muted && (
+              <span class={audioRoomMutedBadgeClass} aria-label="Muted">
+                🔇
+              </span>
+            )}
+
+            {handRaised && (
+              <span class={audioRoomHandBadgeClass} aria-label="Hand raised">
+                ✋
+              </span>
+            )}
+          </div>
+          <span class={audioRoomNameLabelClass}>{participant.name}</span>
+        </div>
+      )
+    })
+  }
+</div>

package/dist/astro-audio-room/index.ts

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

package/dist/astro-call-controls/CallControls.astro

@@ -0,0 +1,57 @@
+---
+import {
+  createCallControls,
+  callControlsVariants,
+  callControlButtonVariants,
+  callControlLabelClass,
+  type CallControlTone,
+  type CallControlItem,
+} from '../call-controls/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Array of control descriptors to render as buttons.
+   * If omitted, the default <slot /> is used instead (composable usage).
+   */
+  controls?: CallControlItem[]
+  /** Visual size of the toolbar and its buttons. */
+  size?: 'sm' | 'md'
+}
+
+const {
+  controls,
+  size = 'md',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createCallControls({ controls })
+
+function toneClass(tone: CallControlTone | undefined): string {
+  return callControlButtonVariants({ tone: tone ?? 'default', size })
+}
+---
+
+<div
+  class={cn(callControlsVariants({ size }), className)}
+  role={ariaProps.role}
+  aria-label={ariaProps['aria-label']}
+  {...dataAttributes}
+  {...rest}
+>
+  {controls
+    ? controls.map((ctrl) => (
+        <button
+          type="button"
+          aria-label={ctrl.label}
+          aria-pressed={ctrl.pressed !== undefined ? ctrl.pressed : undefined}
+          class={toneClass(ctrl.tone)}
+        >
+          {ctrl.icon && <span aria-hidden="true">{ctrl.icon}</span>}
+          <span class={callControlLabelClass}>{ctrl.label}</span>
+        </button>
+      ))
+    : <slot />
+  }
+</div>

package/dist/astro-call-controls/index.ts

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

package/dist/astro-checklist/Checklist.astro

@@ -0,0 +1,76 @@
+---
+import {
+  createChecklist,
+  checklistProgress,
+  checklistContainerClass,
+  checklistListClass,
+  checklistItemVariants,
+  checklistBoxVariants,
+  checklistLabelWrapClass,
+  checklistLabelVariants,
+  checklistDescriptionClass,
+  checklistProgressClass,
+  type ChecklistItemData,
+} from '../checklist/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** List of checklist items. */
+  items: ChecklistItemData[]
+  /** Show a "{completed}/{total}" progress summary below the list. */
+  showProgress?: boolean
+}
+
+const { items, showProgress = false, class: className, ...rest } = Astro.props
+
+const { ariaProps, dataAttributes } = createChecklist()
+const progress = showProgress ? checklistProgress(items) : null
+---
+
+<div class={cn(checklistContainerClass, className)} {...dataAttributes} {...rest}>
+  <ul class={checklistListClass} {...ariaProps}>
+    {
+      items.map((item) => {
+        const checked = Boolean(item.checked)
+        return (
+          <li role="presentation">
+            <button
+              type="button"
+              role="checkbox"
+              aria-checked={checked}
+              data-state={checked ? 'checked' : 'unchecked'}
+              class={checklistItemVariants({ checked: checked ? 'true' : 'false' })}
+            >
+              <span aria-hidden="true" class={checklistBoxVariants({ checked: checked ? 'true' : 'false' })}>
+                {checked && (
+                  <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3" aria-hidden="true">
+                    <path
+                      d="M2 6l3 3 5-5"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                )}
+              </span>
+              <span class={checklistLabelWrapClass}>
+                <span class={checklistLabelVariants({ checked: checked ? 'true' : 'false' })}>{item.label}</span>
+                {item.description && (
+                  <span class={checklistDescriptionClass}>{item.description}</span>
+                )}
+              </span>
+            </button>
+          </li>
+        )
+      })
+    }
+  </ul>
+  {
+    progress !== null && (
+      <p class={checklistProgressClass}>
+        {progress.completed}/{progress.total} completed
+      </p>
+    )
+  }
+</div>

package/dist/astro-checklist/index.ts

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

package/dist/astro-editor-status-bar/EditorStatusBar.astro

@@ -0,0 +1,92 @@
+---
+import {
+  createEditorStatusBar,
+  formatCursorPosition,
+  partitionSegments,
+  editorStatusBarVariants,
+  statusBarGroupClass,
+  statusBarSegmentVariants,
+  type StatusSegment,
+  type StatusSegmentTone,
+} from '../editor-status-bar/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Explicit list of segments. When provided, all convenience props are
+   * ignored.
+   */
+  segments?: StatusSegment[]
+  /** Current line number (1-indexed). */
+  line?: number
+  /** Current column number (1-indexed). */
+  col?: number
+  /** Indentation descriptor, e.g. `'Spaces: 4'`. */
+  indentation?: string
+  /** Language / runtime label, e.g. `'Python 3.11.4'`. */
+  language?: string
+  /** File encoding, e.g. `'UTF-8'`. */
+  encoding?: string
+  /** End-of-line sequence, e.g. `'LF'` or `'CRLF'`. */
+  eol?: string
+  /** Persistence status label, e.g. `'Auto-saved'`. */
+  status?: string
+}
+
+const {
+  segments: segmentsProp,
+  line,
+  col,
+  indentation,
+  language,
+  encoding,
+  eol,
+  status,
+  class: className,
+  ...rest
+} = Astro.props
+
+function buildSegments(): StatusSegment[] {
+  const segs: StatusSegment[] = []
+  if (line !== undefined && col !== undefined) {
+    segs.push({ id: 'cursor', label: formatCursorPosition(line, col), align: 'left', tone: 'default' })
+  }
+  if (indentation) {
+    segs.push({ id: 'indentation', label: indentation, align: 'left', tone: 'muted' })
+  }
+  if (language) {
+    segs.push({ id: 'language', label: language, align: 'right', tone: 'accent' })
+  }
+  if (encoding) {
+    segs.push({ id: 'encoding', label: encoding, align: 'right', tone: 'muted' })
+  }
+  if (eol) {
+    segs.push({ id: 'eol', label: eol, align: 'right', tone: 'muted' })
+  }
+  if (status) {
+    segs.push({ id: 'status', label: status, align: 'right', tone: 'muted' })
+  }
+  return segs
+}
+
+const segments = segmentsProp ?? buildSegments()
+const { left, right } = partitionSegments(segments)
+const { ariaProps, dataAttributes } = createEditorStatusBar()
+---
+
+<div class={cn(editorStatusBarVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <div class={statusBarGroupClass}>
+    {left.map((seg) => (
+      <span class={statusBarSegmentVariants({ tone: (seg.tone ?? 'default') as StatusSegmentTone })}>
+        {seg.label}
+      </span>
+    ))}
+  </div>
+  <div class={statusBarGroupClass}>
+    {right.map((seg) => (
+      <span class={statusBarSegmentVariants({ tone: (seg.tone ?? 'default') as StatusSegmentTone })}>
+        {seg.label}
+      </span>
+    ))}
+  </div>
+</div>

package/dist/astro-editor-status-bar/index.ts

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

package/dist/astro-editor-tabs/EditorTabs.astro

@@ -0,0 +1,74 @@
+---
+import {
+  createEditorTabs,
+  editorTabsVariants,
+  editorTabVariants,
+  editorTabDirtyDotClass,
+  editorTabCloseButtonClass,
+  editorTabIconClass,
+  type EditorTabData,
+} from '../editor-tabs/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The list of tab entries to render. */
+  tabs: EditorTabData[]
+  /** The id of the currently active tab. */
+  activeId: string
+}
+
+const {
+  tabs,
+  activeId,
+  class: className,
+  ...rest
+} = Astro.props
+
+const activeIndex = tabs.findIndex((t) => t.id === activeId)
+const tabbableIndex = activeIndex === -1 ? 0 : activeIndex
+const { ariaProps, dataAttributes } = createEditorTabs({ activeId })
+---
+
+<div class={cn(editorTabsVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    tabs.map((tab, index) => {
+      const isActive = tab.id === activeId
+      return (
+        <button
+          type="button"
+          role="tab"
+          aria-selected={isActive}
+          aria-controls={`tabpanel-${tab.id}`}
+          id={`tab-${tab.id}`}
+          tabindex={index === tabbableIndex ? 0 : -1}
+          data-state={isActive ? 'active' : 'inactive'}
+          class={editorTabVariants({ state: isActive ? 'active' : 'inactive' })}
+        >
+          {tab.icon && (
+            <span class={editorTabIconClass} aria-hidden="true">
+              {tab.icon}
+            </span>
+          )}
+          <span>{tab.label}</span>
+          {tab.dirty && (
+            <span
+              class={editorTabDirtyDotClass}
+              aria-label="unsaved changes"
+              role="status"
+            />
+          )}
+          {tab.closable && (
+            <span
+              role="button"
+              aria-label={`Close ${tab.label}`}
+              tabindex="-1"
+              class={editorTabCloseButtonClass}
+            >
+              ×
+            </span>
+          )}
+        </button>
+      )
+    })
+  }
+</div>

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

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

package/dist/astro-floating-reactions/FloatingReactions.astro

@@ -0,0 +1,56 @@
+---
+import {
+  createFloatingReactions,
+  laneOffsetPercent,
+  floatingReactionsVariants,
+  floatingReactionItemClass,
+  floatingReactionLabelClass,
+  type FloatingReaction,
+} from '../floating-reactions/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Reactions to render at SSR time. For animated runtime usage, use the
+   * React adapter which manages auto-expiry via useFloatingReactions().
+   */
+  reactions?: FloatingReaction[]
+  /**
+   * Total number of horizontal lane buckets used to spread reactions.
+   * @default 5
+   */
+  lanes?: number
+}
+
+const {
+  reactions = [],
+  lanes = 5,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createFloatingReactions()
+---
+
+<div
+  class={cn(floatingReactionsVariants({ active: reactions.length > 0 ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    reactions.map((reaction) => {
+      const left = laneOffsetPercent(reaction.lane ?? 0, lanes)
+      return (
+        <span
+          class={floatingReactionItemClass}
+          style={`left:${left}%`}
+          aria-hidden="true"
+        >
+          {reaction.emoji}
+          <span class={floatingReactionLabelClass}>{reaction.emoji}</span>
+        </span>
+      )
+    })
+  }
+</div>

package/dist/astro-floating-reactions/index.ts

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

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 {}