@refraction-ui/astro 0.12.0 → 0.13.0

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-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-pre-call-lobby/PreCallLobby.astro

@@ -0,0 +1,202 @@
+---
+import {
+  createPreCallLobby,
+  micLevelToBars,
+  preCallLobbyVariants,
+  preCallCameraVariants,
+  preCallCameraPlaceholderClass,
+  preCallDeviceRowClass,
+  preCallDeviceLabelClass,
+  preCallDeviceSelectClass,
+  preCallMicMeterClass,
+  preCallMicBarVariants,
+  preCallControlsRowClass,
+  preCallToggleVariants,
+  preCallJoinButtonClass,
+  type MediaDeviceOption,
+} from '../pre-call-lobby/index.ts'
+import { cn } from '../shared/index.ts'
+
+const MIC_BAR_COUNT = 8
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the camera is on. */
+  cameraOn?: boolean
+  /** Whether the microphone is on. */
+  micOn?: boolean
+  /** Current microphone level (0..1). */
+  micLevel?: number
+  /** Available cameras. */
+  cameras?: MediaDeviceOption[]
+  /** Available microphones. */
+  microphones?: MediaDeviceOption[]
+  /** Available speakers. */
+  speakers?: MediaDeviceOption[]
+  /** Currently selected camera id. */
+  selectedCamera?: string
+  /** Currently selected microphone id. */
+  selectedMicrophone?: string
+  /** Currently selected speaker id. */
+  selectedSpeaker?: string
+  /** Label for the join button. */
+  joinLabel?: string
+}
+
+const {
+  cameraOn = true,
+  micOn = true,
+  micLevel = 0,
+  cameras = [],
+  microphones = [],
+  speakers = [],
+  selectedCamera,
+  selectedMicrophone,
+  selectedSpeaker,
+  joinLabel = 'Join',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createPreCallLobby({ cameraOn, micOn })
+const litBars = micLevelToBars(micLevel, MIC_BAR_COUNT)
+---
+
+<div class={cn(preCallLobbyVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Camera preview -->
+  <div class={preCallCameraVariants({ camera: cameraOn ? 'on' : 'off' })}>
+    {cameraOn ? (
+      <slot name="preview">
+        <div class={preCallCameraPlaceholderClass}>
+          <span class="text-xs">No preview</span>
+        </div>
+      </slot>
+    ) : (
+      <div class={preCallCameraPlaceholderClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <line x1="2" y1="2" x2="22" y2="22" />
+        </svg>
+        <span class="text-xs">Camera is off</span>
+      </div>
+    )}
+  </div>
+
+  <!-- Mic level meter -->
+  <div class="flex items-center gap-2">
+    <span class="text-xs text-muted-foreground">Mic</span>
+    <div class={preCallMicMeterClass} aria-label={`Mic level: ${litBars} of ${MIC_BAR_COUNT}`}>
+      {Array.from({ length: MIC_BAR_COUNT }, (_, i) => {
+        const isLit = i < litBars
+        const heightClass = i < 2 ? 'h-2' : i < 4 ? 'h-3' : i < 6 ? 'h-4' : 'h-5'
+        return (
+          <div
+            class={`${preCallMicBarVariants({ lit: isLit ? 'true' : 'false' })} ${heightClass}`}
+            data-lit={isLit ? 'true' : 'false'}
+          />
+        )
+      })}
+    </div>
+  </div>
+
+  <!-- Device selectors -->
+  {cameras.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-camera-select" class={preCallDeviceLabelClass}>Camera</label>
+      <select id="pcl-camera-select" class={preCallDeviceSelectClass} value={selectedCamera}>
+        {cameras.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  {microphones.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-mic-select" class={preCallDeviceLabelClass}>Microphone</label>
+      <select id="pcl-mic-select" class={preCallDeviceSelectClass} value={selectedMicrophone}>
+        {microphones.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  {speakers.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-speaker-select" class={preCallDeviceLabelClass}>Speaker</label>
+      <select id="pcl-speaker-select" class={preCallDeviceSelectClass} value={selectedSpeaker}>
+        {speakers.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  <!-- Controls row -->
+  <div class={preCallControlsRowClass}>
+    <button
+      type="button"
+      aria-label={cameraOn ? 'Turn camera off' : 'Turn camera on'}
+      aria-pressed={cameraOn}
+      class={preCallToggleVariants({ active: cameraOn ? 'true' : 'false' })}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M23 7l-7 5 7 5V7z" />
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+      </svg>
+    </button>
+
+    <button
+      type="button"
+      aria-label={micOn ? 'Mute microphone' : 'Unmute microphone'}
+      aria-pressed={micOn}
+      class={preCallToggleVariants({ active: micOn ? 'true' : 'false' })}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+        <line x1="12" y1="19" x2="12" y2="23" />
+        <line x1="8" y1="23" x2="16" y2="23" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Join button -->
+  <button type="button" class={preCallJoinButtonClass}>
+    {joinLabel}
+  </button>
+</div>

package/dist/astro-pre-call-lobby/index.ts

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

package/dist/astro-radial-gauge/RadialGauge.astro

@@ -0,0 +1,144 @@
+---
+import {
+  clampValue,
+  valueToFraction,
+  gaugeStrokeDashoffset,
+  resolveZoneTone,
+  createRadialGauge,
+  radialGaugeRootVariants,
+  gaugeTrackClass,
+  gaugeArcClass,
+  gaugeArcToneVariants,
+  gaugeLabelClass,
+  gaugeSublabelClass,
+  GAUGE_SIZE_PX,
+  GAUGE_LABEL_FONT_SIZE,
+  GAUGE_SUBLABEL_FONT_SIZE,
+  type GaugeSize,
+  type GaugeZone,
+} from '../radial-gauge/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.SVGAttributes {
+  /** Current value. */
+  value: number
+  /** Minimum value. Defaults to 0. */
+  min?: number
+  /** Maximum value. Defaults to 100. */
+  max?: number
+  /** Visual size of the gauge. Defaults to 'md'. */
+  size?: GaugeSize
+  /** Stroke thickness in px. Defaults to 8. */
+  thickness?: number
+  /** Primary center label. When omitted and `showValue` is true, the numeric value is shown. */
+  label?: string
+  /** Secondary label shown below the primary label. */
+  sublabel?: string
+  /**
+   * Threshold zones that colour the arc based on the current value.
+   * List in ascending `upTo` order for clarity (internally sorted).
+   */
+  zones?: GaugeZone[]
+  /** Show the numeric value in the center when no explicit label is given. Defaults to true. */
+  showValue?: boolean
+}
+
+const {
+  value,
+  min = 0,
+  max = 100,
+  size = 'md',
+  thickness = 8,
+  label,
+  sublabel,
+  zones,
+  showValue = true,
+  class: className,
+  ...rest
+} = Astro.props
+
+const diameter = GAUGE_SIZE_PX[size]
+const cx = diameter / 2
+const cy = diameter / 2
+const r = cx - thickness / 2
+
+const clamped = clampValue(value, min, max)
+const fraction = valueToFraction(clamped, min, max)
+
+const circumference = 2 * Math.PI * r
+const dashoffset = gaugeStrokeDashoffset(fraction, circumference)
+
+const tone = zones && zones.length > 0 ? resolveZoneTone(clamped, zones, max) : 'default'
+
+const { ariaProps, dataAttributes } = createRadialGauge({ value, min, max, size })
+
+const centerLabel = label ?? (showValue ? String(clamped) : null)
+const labelFontSize = GAUGE_LABEL_FONT_SIZE[size]
+const sublabelFontSize = GAUGE_SUBLABEL_FONT_SIZE[size]
+const labelDy = sublabel ? -sublabelFontSize * 0.8 : 0
+---
+
+<svg
+  width={diameter}
+  height={diameter}
+  viewBox={`0 0 ${diameter} ${diameter}`}
+  role="meter"
+  aria-valuenow={ariaProps['aria-valuenow']}
+  aria-valuemin={ariaProps['aria-valuemin']}
+  aria-valuemax={ariaProps['aria-valuemax']}
+  class={cn(radialGaugeRootVariants({ size }), className)}
+  {...dataAttributes}
+  {...rest}
+>
+  {/* Background track */}
+  <circle
+    cx={cx}
+    cy={cy}
+    r={r}
+    stroke-width={thickness}
+    class={gaugeTrackClass}
+  />
+
+  {/* Value arc */}
+  <circle
+    cx={cx}
+    cy={cy}
+    r={r}
+    stroke-width={thickness}
+    stroke-dasharray={`${circumference} ${circumference}`}
+    stroke-dashoffset={dashoffset}
+    stroke-linecap="round"
+    transform={`rotate(-90 ${cx} ${cy})`}
+    class={cn(gaugeArcClass, gaugeArcToneVariants({ tone }))}
+  />
+
+  {/* Center label */}
+  {centerLabel != null && (
+    <text
+      x={cx}
+      y={cy}
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-size={labelFontSize}
+      dy={labelDy}
+      class={gaugeLabelClass}
+    >
+      {centerLabel}
+    </text>
+  )}
+
+  {/* Sub-label */}
+  {sublabel != null && (
+    <text
+      x={cx}
+      y={cy}
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-size={sublabelFontSize}
+      dy={labelDy + labelFontSize * 1.1}
+      class={gaugeSublabelClass}
+    >
+      {sublabel}
+    </text>
+  )}
+</svg>

package/dist/astro-radial-gauge/index.ts

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