@toolr/ui-design 0.1.0

package/components/ui/tooltip.tsx

@@ -0,0 +1,326 @@
+import { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import type { ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+export interface TooltipContent {
+  title?: string
+  /** Description can be a string or React node for rich content with icons/colors */
+  description: string | ReactNode
+  extra?: string
+}
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto'
+export type TooltipAlign = 'start' | 'center' | 'end'
+type ResolvedPosition = 'top' | 'bottom' | 'left' | 'right'
+
+interface TooltipProps {
+  children: ReactNode
+  /** Tooltip content with required title and description */
+  content: TooltipContent
+  position?: TooltipPosition
+  align?: TooltipAlign
+  /** Allow multi-line content (disables whitespace-nowrap) */
+  multiline?: boolean
+  /** Maximum width for multiline tooltips (number for px, string for CSS value, default '80vw') */
+  maxWidth?: number | string
+  /** Maximum height for scrollable tooltips (only when interactive) */
+  maxHeight?: number
+  /** Allow hovering into the tooltip and scrolling its content */
+  interactive?: boolean
+  /** Trigger mode: 'hover' (default) or 'click' (toggle on click, dismiss on click-outside) */
+  trigger?: 'hover' | 'click'
+  /** Additional classes for the wrapper element (e.g., 'h-full' for flex containers) */
+  wrapperClassName?: string
+}
+
+const TOOLTIP_GAP = 8
+const VIEWPORT_PADDING = 8
+const AUTO_POSITION_THRESHOLD = 16
+
+/** Resolve auto position based on available space */
+function resolveAutoPosition(
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect
+): ResolvedPosition {
+  const spaceAbove = triggerRect.top
+  const spaceBelow = window.innerHeight - triggerRect.bottom
+  const requiredSpace = tooltipRect.height + AUTO_POSITION_THRESHOLD
+
+  if (spaceAbove >= requiredSpace) return 'top'
+  if (spaceBelow >= requiredSpace) return 'bottom'
+  return 'top'
+}
+
+/** Calculate initial position based on trigger and resolved position */
+function calculateBasePosition(
+  triggerRect: DOMRect,
+  resolvedPosition: ResolvedPosition,
+  align: TooltipAlign
+): { top: number; left: number } {
+  let top = 0
+  let left = 0
+
+  switch (resolvedPosition) {
+    case 'top':
+      top = triggerRect.top - TOOLTIP_GAP
+      left = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right : triggerRect.left + triggerRect.width / 2
+      break
+    case 'bottom':
+      top = triggerRect.bottom + TOOLTIP_GAP
+      left = align === 'start' ? triggerRect.left : align === 'end' ? triggerRect.right : triggerRect.left + triggerRect.width / 2
+      break
+    case 'left':
+      top = triggerRect.top + triggerRect.height / 2
+      left = triggerRect.left - TOOLTIP_GAP
+      break
+    case 'right':
+      top = triggerRect.top + triggerRect.height / 2
+      left = triggerRect.right + TOOLTIP_GAP
+      break
+  }
+
+  return { top, left }
+}
+
+/** Adjust position based on tooltip dimensions */
+function adjustForTooltipSize(
+  coords: { top: number; left: number },
+  tooltipRect: DOMRect,
+  resolvedPosition: ResolvedPosition,
+  align: TooltipAlign
+): { top: number; left: number } {
+  let { top, left } = coords
+
+  if (resolvedPosition === 'top') {
+    top -= tooltipRect.height
+  }
+
+  const isVertical = resolvedPosition === 'top' || resolvedPosition === 'bottom'
+  if (isVertical) {
+    if (align === 'center') {
+      left -= tooltipRect.width / 2
+    } else if (align === 'end') {
+      left -= tooltipRect.width
+    }
+  }
+
+  if (resolvedPosition === 'left') {
+    left -= tooltipRect.width
+    top -= tooltipRect.height / 2
+  }
+
+  if (resolvedPosition === 'right') {
+    top -= tooltipRect.height / 2
+  }
+
+  return { top, left }
+}
+
+/** Clamp position to viewport bounds */
+function clampToViewport(
+  coords: { top: number; left: number },
+  tooltipRect: DOMRect
+): { top: number; left: number } {
+  let { top, left } = coords
+
+  if (left < VIEWPORT_PADDING) left = VIEWPORT_PADDING
+  if (left + tooltipRect.width > window.innerWidth - VIEWPORT_PADDING) {
+    left = window.innerWidth - tooltipRect.width - VIEWPORT_PADDING
+  }
+  if (top < VIEWPORT_PADDING) top = VIEWPORT_PADDING
+  if (top + tooltipRect.height > window.innerHeight - VIEWPORT_PADDING) {
+    top = window.innerHeight - tooltipRect.height - VIEWPORT_PADDING
+  }
+
+  return { top, left }
+}
+
+const ARROW_BASE_CLASSES = 'absolute w-3 h-3 bg-neutral-800 border-neutral-600 rotate-45'
+
+function getAlignmentClass(align: TooltipAlign): string {
+  if (align === 'start') return 'left-2'
+  if (align === 'end') return 'right-2'
+  return 'left-1/2 -translate-x-1/2'
+}
+
+/** Get CSS classes for the tooltip arrow based on position and alignment */
+function getArrowClasses(pos: ResolvedPosition, align: TooltipAlign): string {
+  switch (pos) {
+    case 'top':
+      return `${ARROW_BASE_CLASSES} -bottom-1.5 border-r border-b ${getAlignmentClass(align)}`
+    case 'bottom':
+      return `${ARROW_BASE_CLASSES} -top-1.5 border-l border-t ${getAlignmentClass(align)}`
+    case 'left':
+      return `${ARROW_BASE_CLASSES} -right-1.5 border-r border-t top-1/2 -translate-y-1/2`
+    case 'right':
+      return `${ARROW_BASE_CLASSES} -left-1.5 border-l border-b top-1/2 -translate-y-1/2`
+    default:
+      return ARROW_BASE_CLASSES
+  }
+}
+
+/**
+ * Portal-based tooltip that renders at document body level.
+ * This ensures tooltips always appear above all other elements,
+ * regardless of parent overflow or z-index settings.
+ */
+export function Tooltip({
+  children,
+  content,
+  position = 'top',
+  align = 'start',
+  multiline = false,
+  maxWidth,
+  maxHeight,
+  trigger = 'hover',
+  interactive = false,
+  wrapperClassName = '',
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const [coords, setCoords] = useState({ top: 0, left: 0 })
+  const [actualPosition, setActualPosition] = useState<ResolvedPosition>(position === 'auto' ? 'top' : position)
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const show = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current)
+      hideTimeoutRef.current = null
+    }
+    setIsVisible(true)
+  }
+
+  const hide = () => {
+    if (interactive) {
+      // Small delay so the user can move from trigger to tooltip
+      hideTimeoutRef.current = setTimeout(() => setIsVisible(false), 150)
+    } else {
+      setIsVisible(false)
+    }
+  }
+
+  // Click-outside dismissal for click trigger mode
+  useEffect(() => {
+    if (trigger !== 'click' || !isVisible) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
+        tooltipRef.current && !tooltipRef.current.contains(e.target as Node)
+      ) {
+        setIsVisible(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [trigger, isVisible])
+
+  const updatePosition = () => {
+    if (!triggerRef.current) return
+    const triggerRect = triggerRef.current.getBoundingClientRect()
+    const tooltipEl = tooltipRef.current
+
+    let resolvedPosition: ResolvedPosition = position === 'auto' ? 'top' : position
+
+    if (position === 'auto' && tooltipEl) {
+      const tooltipRect = tooltipEl.getBoundingClientRect()
+      resolvedPosition = resolveAutoPosition(triggerRect, tooltipRect)
+      setActualPosition(resolvedPosition)
+    }
+
+    let newCoords = calculateBasePosition(triggerRect, resolvedPosition, align)
+
+    if (tooltipEl) {
+      const tooltipRect = tooltipEl.getBoundingClientRect()
+      newCoords = adjustForTooltipSize(newCoords, tooltipRect, resolvedPosition, align)
+      newCoords = clampToViewport(newCoords, tooltipRect)
+    }
+
+    setCoords(newCoords)
+  }
+
+  useLayoutEffect(() => {
+    if (!isVisible) return
+    updatePosition()
+  }, [isVisible, position, align])
+
+  // Reposition on scroll for click-triggered tooltips so they follow the trigger
+  useEffect(() => {
+    if (trigger !== 'click' || !isVisible) return
+    const handleScroll = () => updatePosition()
+    window.addEventListener('scroll', handleScroll, true)
+    return () => window.removeEventListener('scroll', handleScroll, true)
+  }, [trigger, isVisible, position, align])
+
+  const resolvedPos = position === 'auto' ? actualPosition : position
+  const arrowClasses = getArrowClasses(resolvedPos, align)
+
+  const tooltipContent = (
+    <div
+      ref={tooltipRef}
+      className={`fixed px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      style={{
+        top: coords.top,
+        left: coords.left,
+        opacity: isVisible ? 1 : 0,
+        visibility: isVisible ? 'visible' : 'hidden',
+        transition: 'opacity 150ms, visibility 150ms',
+        ...(multiline ? { maxWidth: maxWidth ?? '80vw' } : {}),
+        ...(maxHeight ? { maxHeight, overflowY: 'auto' as const } : {}),
+      }}
+      onMouseEnter={interactive && trigger !== 'click' ? show : undefined}
+      onMouseLeave={interactive && trigger !== 'click' ? hide : undefined}
+    >
+      {content.title && <p className="text-sm text-neutral-200 font-medium">{content.title}</p>}
+      <div className={`text-xs text-neutral-400 ${content.title ? 'mt-0.5' : ''}`}>{content.description}</div>
+      {content.extra && <p className="text-xs text-orange-400/70 mt-0.5">{content.extra}</p>}
+      <div className={arrowClasses} />
+    </div>
+  )
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={trigger === 'hover' ? show : undefined}
+        onMouseLeave={trigger === 'hover' ? hide : undefined}
+        onMouseDown={trigger === 'hover' ? () => setIsVisible(false) : undefined}
+        onClick={trigger === 'click' ? () => setIsVisible((v) => !v) : undefined}
+        className={wrapperClassName || 'inline-flex'}
+      >
+        {children}
+      </div>
+      {createPortal(tooltipContent, document.body)}
+    </>
+  )
+}
+
+/**
+ * Simple tooltip wrapper for icon buttons.
+ * Provides consistent styling for action button tooltips.
+ */
+export function TooltipButton({
+  children,
+  content,
+  onClick,
+  className,
+  disabled,
+}: {
+  children: ReactNode
+  content: TooltipContent
+  onClick?: () => void
+  className?: string
+  disabled?: boolean
+}) {
+  return (
+    <Tooltip content={content} position="top" align="start">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        className={className}
+      >
+        {children}
+      </button>
+    </Tooltip>
+  )
+}

package/dist/content.d.ts

@@ -0,0 +1,110 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare function P({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function SectionHeader({ color, children }: {
+    color?: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DL({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DLRow({ term, children, even }: {
+    term: ReactNode;
+    children: ReactNode;
+    even?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function UL({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function LI({ color, children }: {
+    color: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function OL({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function OLI({ n, color, children }: {
+    n: number;
+    color: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function getCalloutColors(color: string): {
+    borderL: string;
+    borderY: string;
+    bg: string;
+    text: string;
+    codeText: string;
+    dimText: string;
+};
+declare function Callout({ color, children }: {
+    color: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function CalloutCode({ color, children }: {
+    color: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function CalloutDim({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function CodeBlock({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function CK({ color, children }: {
+    color?: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function ExternalLink({ href, children }: {
+    href: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function LocationList({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function LocationItem({ color, label, children, even, }: {
+    color: string;
+    label: string;
+    children: ReactNode;
+    even?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function TitledLI({ color, title, children }: {
+    color: string;
+    title: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function CalloutDialog({ color, lines }: {
+    color: string;
+    lines: {
+        speaker: string;
+        text: string;
+    }[];
+}): react_jsx_runtime.JSX.Element;
+declare function TagGrid({ color, tags }: {
+    color: string;
+    tags: string[];
+}): react_jsx_runtime.JSX.Element;
+declare function StatusBadge({ value, badgeColor, label, children, even }: {
+    value: string;
+    badgeColor: string;
+    label: string;
+    children: ReactNode;
+    even?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function BulletGridRow({ color, term, children, even }: {
+    color: string;
+    term: string;
+    children: ReactNode;
+    even?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function NumberGridRow({ color, n, term, children, even }: {
+    color: string;
+    n: number;
+    term: string;
+    children: ReactNode;
+    even?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { BulletGridRow, CK, Callout, CalloutCode, CalloutDialog, CalloutDim, CodeBlock, DL, DLRow, ExternalLink, LI, LocationItem, LocationList, NumberGridRow, OL, OLI, P, SectionHeader, StatusBadge, TagGrid, TitledLI, UL, getCalloutColors };

package/dist/content.js

@@ -0,0 +1,195 @@
+// components/content/info-panel-primitives.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function P({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-400 leading-relaxed mb-5", children });
+}
+function SectionHeader({ color, children }) {
+  const textColor = color ? `text-${color}-500/70` : "text-neutral-500";
+  return /* @__PURE__ */ jsx("p", { className: `${textColor} text-xs uppercase font-semibold pb-0.5 border-b border-neutral-700/50 mb-2.5`, style: { letterSpacing: "0.8px" }, children });
+}
+function DL({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-4", children }) });
+}
+function DLRow({ term, children, even }) {
+  const bg = even ? "bg-white/[0.015]" : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-sm whitespace-nowrap`, children: term }),
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+  ] });
+}
+function UL({ children }) {
+  return /* @__PURE__ */ jsx("ul", { className: "text-sm text-neutral-400 space-y-2 mb-5", children });
+}
+function LI({ color, children }) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: `text-${color}-400 shrink-0`, style: { marginTop: "3px", fontSize: "18px", lineHeight: "14px" }, children: "\u2022" }),
+    /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+function OL({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-5", children });
+}
+function OLI({ n, color, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 text-sm", children: [
+    /* @__PURE__ */ jsxs("span", { className: `text-${color}-400 shrink-0 w-4 text-right font-bold`, children: [
+      n,
+      "."
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-neutral-400", children })
+  ] });
+}
+var CALLOUT_COLORS = {
+  amber: { borderL: "border-amber-500/40", borderY: "border-y-amber-500/15", bg: "bg-amber-500/5", text: "text-amber-400", codeText: "text-amber-300/80", dimText: "text-amber-400/60" },
+  blue: { borderL: "border-blue-500/40", borderY: "border-y-blue-500/15", bg: "bg-blue-500/5", text: "text-blue-400", codeText: "text-blue-300/80", dimText: "text-blue-400/60" },
+  cyan: { borderL: "border-cyan-500/40", borderY: "border-y-cyan-500/15", bg: "bg-cyan-500/5", text: "text-cyan-400", codeText: "text-cyan-300/80", dimText: "text-cyan-400/60" },
+  emerald: { borderL: "border-emerald-500/40", borderY: "border-y-emerald-500/15", bg: "bg-emerald-500/5", text: "text-emerald-400", codeText: "text-emerald-300/80", dimText: "text-emerald-400/60" },
+  fuchsia: { borderL: "border-fuchsia-500/40", borderY: "border-y-fuchsia-500/15", bg: "bg-fuchsia-500/5", text: "text-fuchsia-400", codeText: "text-fuchsia-300/80", dimText: "text-fuchsia-400/60" },
+  green: { borderL: "border-green-500/40", borderY: "border-y-green-500/15", bg: "bg-green-500/5", text: "text-green-400", codeText: "text-green-300/80", dimText: "text-green-400/60" },
+  indigo: { borderL: "border-indigo-500/40", borderY: "border-y-indigo-500/15", bg: "bg-indigo-500/5", text: "text-indigo-400", codeText: "text-indigo-300/80", dimText: "text-indigo-400/60" },
+  lime: { borderL: "border-lime-500/40", borderY: "border-y-lime-500/15", bg: "bg-lime-500/5", text: "text-lime-400", codeText: "text-lime-300/80", dimText: "text-lime-400/60" },
+  orange: { borderL: "border-orange-500/40", borderY: "border-y-orange-500/15", bg: "bg-orange-500/5", text: "text-orange-400", codeText: "text-orange-300/80", dimText: "text-orange-400/60" },
+  pink: { borderL: "border-pink-500/40", borderY: "border-y-pink-500/15", bg: "bg-pink-500/5", text: "text-pink-400", codeText: "text-pink-300/80", dimText: "text-pink-400/60" },
+  purple: { borderL: "border-purple-500/40", borderY: "border-y-purple-500/15", bg: "bg-purple-500/5", text: "text-purple-400", codeText: "text-purple-300/80", dimText: "text-purple-400/60" },
+  red: { borderL: "border-red-500/40", borderY: "border-y-red-500/15", bg: "bg-red-500/5", text: "text-red-400", codeText: "text-red-300/80", dimText: "text-red-400/60" },
+  rose: { borderL: "border-rose-500/40", borderY: "border-y-rose-500/15", bg: "bg-rose-500/5", text: "text-rose-400", codeText: "text-rose-300/80", dimText: "text-rose-400/60" },
+  sky: { borderL: "border-sky-500/40", borderY: "border-y-sky-500/15", bg: "bg-sky-500/5", text: "text-sky-400", codeText: "text-sky-300/80", dimText: "text-sky-400/60" },
+  teal: { borderL: "border-teal-500/40", borderY: "border-y-teal-500/15", bg: "bg-teal-500/5", text: "text-teal-400", codeText: "text-teal-300/80", dimText: "text-teal-400/60" },
+  violet: { borderL: "border-violet-500/40", borderY: "border-y-violet-500/15", bg: "bg-violet-500/5", text: "text-violet-400", codeText: "text-violet-300/80", dimText: "text-violet-400/60" }
+};
+function getCalloutColors(color) {
+  return CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
+}
+function Callout({ color, children }) {
+  const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
+  return /* @__PURE__ */ jsx("div", { className: `border-l-4 ${c.borderL} border-y ${c.borderY} ${c.bg} px-3 py-2.5 rounded-r mb-5 text-sm text-neutral-400`, children });
+}
+function CalloutCode({ color, children }) {
+  const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-[13px] ${c.codeText}`, children });
+}
+function CalloutDim({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
+}
+function CodeBlock({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-xs text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
+}
+function CK({ color, children }) {
+  const textColor = color ? `text-${color}-400` : "";
+  return /* @__PURE__ */ jsx("code", { className: `bg-neutral-800/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`, children });
+}
+function ExternalLink({ href, children }) {
+  return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline cursor-pointer", children });
+}
+function LocationList({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-5", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[auto_1fr] gap-x-4", children }) });
+}
+function LocationItem({
+  color,
+  label,
+  children,
+  even
+}) {
+  const bg = even ? "bg-white/[0.015]" : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: `py-2 border-b border-neutral-800/60 ${bg} flex items-center gap-1.5`, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `w-2 h-2 rounded-full bg-${color}-500/50 border border-${color}-500 shrink-0`
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-sm font-semibold`, children: label })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-sm text-neutral-400`, children })
+  ] });
+}
+function TitledLI({ color, title, children }) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-neutral-400", children: [
+    /* @__PURE__ */ jsx("span", { className: `text-${color}-400 shrink-0`, style: { marginTop: "3px", fontSize: "18px", lineHeight: "14px" }, children: "\u2022" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: `text-${color}-300 font-semibold`, children: title }),
+      " ",
+      "\u2014 ",
+      children
+    ] })
+  ] });
+}
+function CalloutDialog({ color, lines }) {
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-[13px]", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
+      line.speaker,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-neutral-400", children: line.text })
+  ] }, idx)) });
+}
+function TagGrid({ color, tags }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mb-5", children: tags.map((tag) => /* @__PURE__ */ jsx(CK, { color, children: tag }, tag)) });
+}
+function StatusBadge({ value, badgeColor, label, children, even }) {
+  return /* @__PURE__ */ jsx(
+    DLRow,
+    {
+      term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-[11px] font-bold shrink-0`, children: value }),
+        /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
+      ] }),
+      even,
+      children
+    }
+  );
+}
+function BulletGridRow({ color, term, children, even }) {
+  return /* @__PURE__ */ jsx(
+    DLRow,
+    {
+      term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: `text-${color}-400`, style: { fontSize: "18px", lineHeight: "14px" }, children: "\u2022" }),
+        /* @__PURE__ */ jsx("span", { className: `text-${color}-400 font-semibold`, children: term })
+      ] }),
+      even,
+      children
+    }
+  );
+}
+function NumberGridRow({ color, n, term, children, even }) {
+  return /* @__PURE__ */ jsx(
+    DLRow,
+    {
+      term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: `text-${color}-400 font-bold w-4 text-right shrink-0`, children: [
+          n,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `text-${color}-400 font-semibold`, children: term })
+      ] }),
+      even,
+      children
+    }
+  );
+}
+export {
+  BulletGridRow,
+  CK,
+  Callout,
+  CalloutCode,
+  CalloutDialog,
+  CalloutDim,
+  CodeBlock,
+  DL,
+  DLRow,
+  ExternalLink,
+  LI,
+  LocationItem,
+  LocationList,
+  NumberGridRow,
+  OL,
+  OLI,
+  P,
+  SectionHeader,
+  StatusBadge,
+  TagGrid,
+  TitledLI,
+  UL,
+  getCalloutColors
+};