@runcontext/uxd 0.5.3 → 0.6.0

package/dist/css/index.css

@@ -91,7 +91,10 @@
   justify-content: center;
   gap: var(--rc-space-2);
   font-family: var(--rc-font-sans);
+  font-size: var(--rc-text-sm);
   font-weight: var(--rc-font-weight-semibold);
+  padding: var(--rc-space-2) var(--rc-space-4);
+  height: 2.5rem;
   border-radius: var(--rc-radius-md);
   border: 1px solid transparent;
   cursor: pointer;
@@ -238,7 +241,7 @@
   gap: var(--rc-space-1);
   font-size: var(--rc-text-xs);
   font-weight: var(--rc-font-weight-medium);
-  padding: var(--rc-space-0_5) var(--rc-space-2);
+  padding: var(--rc-space-1) var(--rc-space-3);
   border-radius: var(--rc-radius-full);
   border: 1px solid transparent;
   line-height: var(--rc-leading-normal);
@@ -618,6 +621,288 @@
   font-size: var(--rc-text-sm);
   line-height: var(--rc-leading-normal);
 }
+/* ── Toast ── */
+.rc-toast-container {
+  position: fixed;
+  bottom: var(--rc-space-4);
+  right: var(--rc-space-4);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rc-space-2);
+  pointer-events: none;
+}
+
+.rc-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rc-space-3);
+  padding: var(--rc-space-3) var(--rc-space-4);
+  border-radius: var(--rc-radius-lg);
+  background: var(--rc-color-surface-card);
+  border: 1px solid var(--rc-color-surface-border);
+  color: var(--rc-color-text-primary);
+  font-family: var(--rc-font-sans);
+  font-size: var(--rc-text-sm);
+  line-height: var(--rc-line-height);
+  box-shadow: var(--rc-shadow-lg);
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 420px;
+  animation: rc-toast-in 0.2s ease-out;
+}
+
+.rc-toast--exiting {
+  animation: rc-toast-out 0.15s ease-in forwards;
+}
+
+.rc-toast__icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+}
+
+.rc-toast--success .rc-toast__icon { color: var(--rc-color-status-success); }
+.rc-toast--error .rc-toast__icon { color: var(--rc-color-status-error); }
+.rc-toast--warning .rc-toast__icon { color: var(--rc-color-status-warning); }
+.rc-toast--info .rc-toast__icon { color: var(--rc-color-status-info); }
+
+.rc-toast--success { border-left: 3px solid var(--rc-color-status-success); }
+.rc-toast--error { border-left: 3px solid var(--rc-color-status-error); }
+.rc-toast--warning { border-left: 3px solid var(--rc-color-status-warning); }
+.rc-toast--info { border-left: 3px solid var(--rc-color-status-info); }
+
+.rc-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rc-toast__dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--rc-color-text-muted);
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.rc-toast__dismiss:hover {
+  color: var(--rc-color-text-primary);
+}
+
+@keyframes rc-toast-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes rc-toast-out {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(20px); }
+}
+
+/* ── Tooltip ── */
+.rc-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.rc-tooltip {
+  position: fixed;
+  z-index: 9999;
+  padding: var(--rc-space-2) var(--rc-space-3);
+  border-radius: var(--rc-radius-md);
+  background: #f8f6f1;
+  border: 1px solid #d4cfc5;
+  color: #1e1e1e;
+  font-family: var(--rc-font-sans);
+  font-size: var(--rc-text-xs);
+  line-height: var(--rc-line-height);
+  max-width: 280px;
+  white-space: normal;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  animation: rc-tooltip-in 0.12s ease-out;
+}
+
+.rc-tooltip--info {
+  border-left: 3px solid var(--rc-color-brand-gold);
+}
+
+@keyframes rc-tooltip-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ── InfoCard ── */
+.rc-info-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rc-space-3);
+  padding: var(--rc-space-4);
+  border-radius: var(--rc-radius-lg);
+  background: var(--rc-color-surface-card);
+  border: 1px solid var(--rc-color-surface-border);
+  border-left: 3px solid var(--rc-color-brand-gold);
+  font-family: var(--rc-font-sans);
+  animation: rc-tooltip-in 0.2s ease-out;
+  margin-bottom: var(--rc-space-4, 16px);
+  overflow: visible;
+}
+
+.rc-info-card__icon {
+  flex-shrink: 0;
+  color: var(--rc-color-brand-gold);
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+}
+
+.rc-info-card__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rc-info-card__title {
+  font-size: var(--rc-text-sm);
+  font-weight: var(--rc-weight-semibold);
+  color: var(--rc-color-text-primary);
+  margin: 0 0 var(--rc-space-1) 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.rc-info-card__body {
+  font-size: var(--rc-text-sm);
+  color: var(--rc-color-text-secondary);
+  line-height: var(--rc-line-height);
+  margin: 0;
+}
+
+.rc-info-card__dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--rc-color-text-muted);
+  cursor: pointer;
+  padding: 2px;
+  transition: color 0.15s ease;
+}
+
+.rc-info-card__dismiss:hover {
+  color: var(--rc-color-text-primary);
+}
+
+/* ── Skeleton ── */
+.rc-skeleton {
+  background: var(--rc-color-surface-card);
+  border-radius: var(--rc-radius-md);
+  animation: rc-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.rc-skeleton--text {
+  height: 14px;
+  border-radius: var(--rc-radius-sm);
+}
+
+.rc-skeleton--card {
+  border-radius: var(--rc-radius-lg);
+}
+
+.rc-skeleton--circle {
+  border-radius: var(--rc-radius-full);
+}
+
+.rc-skeleton--stat {
+  border-radius: var(--rc-radius-lg);
+  height: 96px;
+}
+
+.rc-skeleton--table {
+  border-radius: var(--rc-radius-md);
+  height: 36px;
+  width: 100%;
+}
+
+@keyframes rc-skeleton-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.8; }
+}
+
+/* ── ConfirmModal ── */
+.rc-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rc-tooltip-in 0.12s ease-out;
+}
+
+.rc-modal {
+  background: var(--rc-color-surface-card);
+  border: 1px solid var(--rc-color-surface-border);
+  border-radius: var(--rc-radius-lg);
+  padding: var(--rc-space-6);
+  max-width: 440px;
+  width: 100%;
+  font-family: var(--rc-font-sans);
+  box-shadow: var(--rc-shadow-lg);
+}
+
+.rc-modal__title {
+  font-size: var(--rc-text-lg);
+  font-weight: var(--rc-weight-semibold);
+  color: var(--rc-color-text-primary);
+  margin: 0 0 var(--rc-space-2) 0;
+}
+
+.rc-modal__description {
+  font-size: var(--rc-text-sm);
+  color: var(--rc-color-text-secondary);
+  line-height: var(--rc-line-height);
+  margin: 0 0 var(--rc-space-4) 0;
+}
+
+.rc-modal__typing-label {
+  font-size: var(--rc-text-sm);
+  color: var(--rc-color-text-secondary);
+  margin: 0 0 var(--rc-space-2) 0;
+}
+
+.rc-modal__typing-label strong {
+  color: var(--rc-color-text-primary);
+  font-weight: var(--rc-weight-semibold);
+}
+
+.rc-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rc-space-3);
+  margin-top: var(--rc-space-4);
+}
+
+/* ── ConceptTerm ── */
+.rc-concept-term {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--rc-color-text-muted);
+  cursor: help;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.rc-concept-term__icon {
+  width: 14px;
+  height: 14px;
+  color: var(--rc-color-text-muted);
+}
 /* ============================================================
    RunContext UXD — Utility Classes
    All values reference CSS custom properties from tokens.css.

package/dist/react/index.d.ts

@@ -79,4 +79,66 @@ interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
 }
 declare function CodeBlock({ code, className, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
 
-export { type ActivityEvent, ActivityFeed, type ActivityFeedProps, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, CodeBlock, type CodeBlockProps, EmptyState, type EmptyStateProps, ErrorCard, type ErrorCardProps, Input, type InputProps, Select, type SelectProps, Spinner, StatCard, type StatCardProps, Textarea, type TextareaProps, TierBadge, type TierBadgeProps };
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+interface ToastMessage {
+    id: string;
+    variant: ToastVariant;
+    message: string;
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (variant: ToastVariant, message: string, duration?: number) => void;
+}
+declare function useToast(): ToastContextValue;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+declare function ToastProvider({ children }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+    content: string;
+    placement?: TooltipPlacement;
+    variant?: 'default' | 'info';
+    children: ReactNode;
+}
+declare function Tooltip({ content, placement, variant, children, className, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface InfoCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: string;
+    children: ReactNode;
+    storageKey: string;
+    icon?: ReactNode;
+}
+declare function resetInfoCards(): void;
+declare function InfoCard({ title, children, storageKey, icon, className, ...props }: InfoCardProps): react_jsx_runtime.JSX.Element | null;
+
+type SkeletonVariant = 'text' | 'card' | 'circle' | 'stat' | 'table';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+}
+declare function Skeleton({ variant, width, height, className, style: styleProp, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmModalProps {
+    open: boolean;
+    title: string;
+    description: string | ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'default' | 'danger';
+    requireTyping?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmModal({ open, title, description, confirmLabel, cancelLabel, variant, requireTyping, onConfirm, onCancel, }: ConfirmModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface ConceptTermProps extends HTMLAttributes<HTMLSpanElement> {
+    term: string;
+    definition: string;
+    children?: ReactNode;
+}
+declare function ConceptTerm({ term, definition, children, className, ...props }: ConceptTermProps): react_jsx_runtime.JSX.Element;
+
+export { type ActivityEvent, ActivityFeed, type ActivityFeedProps, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, CodeBlock, type CodeBlockProps, ConceptTerm, type ConceptTermProps, ConfirmModal, type ConfirmModalProps, EmptyState, type EmptyStateProps, ErrorCard, type ErrorCardProps, InfoCard, type InfoCardProps, Input, type InputProps, Select, type SelectProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, StatCard, type StatCardProps, Textarea, type TextareaProps, TierBadge, type TierBadgeProps, type ToastContextValue, type ToastMessage, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, resetInfoCards, useToast };

package/dist/react/index.js

@@ -56,9 +56,9 @@ function Badge({ variant, className, children, ...props }) {
 // src/react/TierBadge.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var tierLabels = {
-  gold: "AI-Ready",
-  silver: "Trusted",
-  bronze: "Discoverable"
+  gold: "Gold",
+  silver: "Silver",
+  bronze: "Bronze"
 };
 function TierBadge({ tier, ...props }) {
   return /* @__PURE__ */ jsx5(Badge, { variant: tier, ...props, children: tierLabels[tier] });
@@ -150,18 +150,324 @@ function CodeBlock({ code, className, ...props }) {
   const classes = ["rc-code", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx11("pre", { className: classes, ...props, children: /* @__PURE__ */ jsx11("code", { children: code }) });
 }
+
+// src/react/Toast.tsx
+import { createContext, useContext, useCallback, useState, useEffect, useRef } from "react";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
+var ICONS = {
+  success: "\u2713",
+  error: "\u2715",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+var DEFAULT_DURATION = {
+  success: 4e3,
+  error: 0,
+  // persist until dismissed
+  warning: 4e3,
+  info: 4e3
+};
+function ToastItem({ toast: t, onDismiss }) {
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(null);
+  const dismiss = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(t.id), 150);
+  }, [t.id, onDismiss]);
+  useEffect(() => {
+    const dur = t.duration ?? DEFAULT_DURATION[t.variant];
+    if (dur > 0) {
+      timerRef.current = setTimeout(dismiss, dur);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [t, dismiss]);
+  return /* @__PURE__ */ jsxs5("div", { className: `rc-toast rc-toast--${t.variant}${exiting ? " rc-toast--exiting" : ""}`, role: "alert", children: [
+    /* @__PURE__ */ jsx12("span", { className: "rc-toast__icon", "aria-hidden": "true", children: ICONS[t.variant] }),
+    /* @__PURE__ */ jsx12("span", { className: "rc-toast__content", children: t.message }),
+    /* @__PURE__ */ jsx12("button", { className: "rc-toast__dismiss", onClick: dismiss, "aria-label": "Dismiss notification", children: "\u2715" })
+  ] });
+}
+var toastCounter = 0;
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const toast = useCallback((variant, message, duration) => {
+    const id = `toast-${++toastCounter}`;
+    setToasts((prev) => [...prev, { id, variant, message, duration }]);
+  }, []);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs5(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    /* @__PURE__ */ jsx12("div", { className: "rc-toast-container", "aria-live": "polite", children: toasts.map((t) => /* @__PURE__ */ jsx12(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+
+// src/react/Tooltip.tsx
+import { useState as useState2, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var GAP = 8;
+function Tooltip({ content, placement = "top", variant = "default", children, className, ...props }) {
+  const [visible, setVisible] = useState2(false);
+  const [coords, setCoords] = useState2(null);
+  const [actualPlacement, setActualPlacement] = useState2(placement);
+  const timerRef = useRef2(null);
+  const wrapperRef = useRef2(null);
+  const tooltipRef = useRef2(null);
+  const show = useCallback2(() => {
+    timerRef.current = setTimeout(() => setVisible(true), 200);
+  }, []);
+  const hide = useCallback2(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setVisible(false);
+    setCoords(null);
+  }, []);
+  useEffect2(() => {
+    if (!visible || !wrapperRef.current || !tooltipRef.current) return;
+    const anchor = wrapperRef.current.getBoundingClientRect();
+    const tip = tooltipRef.current.getBoundingClientRect();
+    let top = 0;
+    let left = 0;
+    let place = placement;
+    if (place === "top") {
+      top = anchor.top - tip.height - GAP;
+      left = anchor.left + anchor.width / 2 - tip.width / 2;
+      if (top < 4) {
+        place = "bottom";
+        top = anchor.bottom + GAP;
+      }
+    } else if (place === "bottom") {
+      top = anchor.bottom + GAP;
+      left = anchor.left + anchor.width / 2 - tip.width / 2;
+      if (top + tip.height > window.innerHeight - 4) {
+        place = "top";
+        top = anchor.top - tip.height - GAP;
+      }
+    } else if (place === "left") {
+      top = anchor.top + anchor.height / 2 - tip.height / 2;
+      left = anchor.left - tip.width - GAP;
+    } else {
+      top = anchor.top + anchor.height / 2 - tip.height / 2;
+      left = anchor.right + GAP;
+    }
+    left = Math.max(4, Math.min(left, window.innerWidth - tip.width - 4));
+    top = Math.max(4, Math.min(top, window.innerHeight - tip.height - 4));
+    setCoords({ top, left });
+    setActualPlacement(place);
+  }, [visible, placement]);
+  const wrapperClasses = ["rc-tooltip-wrapper", className].filter(Boolean).join(" ");
+  const tooltipClasses = [
+    "rc-tooltip",
+    variant === "info" && "rc-tooltip--info"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6("span", { ref: wrapperRef, className: wrapperClasses, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, ...props, children: [
+    children,
+    visible && /* @__PURE__ */ jsx13(
+      "span",
+      {
+        ref: tooltipRef,
+        className: tooltipClasses,
+        role: "tooltip",
+        style: coords ? { top: `${coords.top}px`, left: `${coords.left}px` } : { visibility: "hidden" },
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/react/InfoCard.tsx
+import { useState as useState3, useEffect as useEffect3 } from "react";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function isDismissed(key) {
+  if (typeof window === "undefined") return false;
+  try {
+    return localStorage.getItem(`rc-info-dismissed:${key}`) === "1";
+  } catch {
+    return false;
+  }
+}
+function setDismissed(key) {
+  try {
+    localStorage.setItem(`rc-info-dismissed:${key}`, "1");
+  } catch {
+  }
+}
+function resetInfoCards() {
+  if (typeof window === "undefined") return;
+  try {
+    const keys = Object.keys(localStorage).filter((k) => k.startsWith("rc-info-dismissed:"));
+    keys.forEach((k) => localStorage.removeItem(k));
+  } catch {
+  }
+}
+function InfoCard({ title, children, storageKey, icon, className, ...props }) {
+  const [hidden, setHidden] = useState3(true);
+  useEffect3(() => {
+    setHidden(isDismissed(storageKey));
+  }, [storageKey]);
+  if (hidden) return null;
+  const dismiss = () => {
+    setDismissed(storageKey);
+    setHidden(true);
+  };
+  const classes = ["rc-info-card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7("div", { className: classes, role: "note", ...props, children: [
+    icon && /* @__PURE__ */ jsx14("span", { className: "rc-info-card__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs7("div", { className: "rc-info-card__content", children: [
+      /* @__PURE__ */ jsx14("p", { className: "rc-info-card__title", children: title }),
+      /* @__PURE__ */ jsx14("p", { className: "rc-info-card__body", children })
+    ] }),
+    /* @__PURE__ */ jsx14("button", { className: "rc-info-card__dismiss", onClick: dismiss, "aria-label": "Dismiss tip", children: "\u2715" })
+  ] });
+}
+
+// src/react/Skeleton.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Skeleton({ variant = "text", width, height, className, style: styleProp, ...props }) {
+  const style = { ...styleProp };
+  if (width) style.width = typeof width === "number" ? `${width}px` : width;
+  if (height) style.height = typeof height === "number" ? `${height}px` : height;
+  const classes = [
+    "rc-skeleton",
+    `rc-skeleton--${variant}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: classes,
+      style,
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+}
+
+// src/react/ConfirmModal.tsx
+import { useState as useState4, useEffect as useEffect4, useRef as useRef3, useCallback as useCallback3, useId } from "react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function ConfirmModal({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  requireTyping,
+  onConfirm,
+  onCancel
+}) {
+  const [typed, setTyped] = useState4("");
+  const overlayRef = useRef3(null);
+  const cancelRef = useRef3(null);
+  const titleId = useId();
+  const canConfirm = requireTyping ? typed === requireTyping : true;
+  useEffect4(() => {
+    if (!open) {
+      setTyped("");
+      return;
+    }
+    document.body.style.overflow = "hidden";
+    const handleKey = (e) => {
+      if (e.key === "Escape") onCancel();
+      if (e.key === "Tab") {
+        const modal = overlayRef.current?.querySelector(".rc-modal");
+        if (!modal) return;
+        const focusable = modal.querySelectorAll(
+          'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    if (!requireTyping) cancelRef.current?.focus();
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, onCancel, requireTyping]);
+  const handleOverlayClick = useCallback3((e) => {
+    if (e.target === overlayRef.current) onCancel();
+  }, [onCancel]);
+  if (!open) return null;
+  const btnVariant = variant === "danger" ? "rc-btn rc-btn--danger" : "rc-btn rc-btn--primary";
+  return /* @__PURE__ */ jsx16("div", { className: "rc-modal-overlay", ref: overlayRef, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs8("div", { className: "rc-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ jsx16("h2", { className: "rc-modal__title", id: titleId, children: title }),
+    /* @__PURE__ */ jsx16("div", { className: "rc-modal__description", children: description }),
+    requireTyping && /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsxs8("p", { className: "rc-modal__typing-label", children: [
+        "Type ",
+        /* @__PURE__ */ jsx16("strong", { children: requireTyping }),
+        " to confirm:"
+      ] }),
+      /* @__PURE__ */ jsx16(
+        "input",
+        {
+          className: "rc-input",
+          value: typed,
+          onChange: (e) => setTyped(e.target.value),
+          autoFocus: true,
+          spellCheck: false
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "rc-modal__actions", children: [
+      /* @__PURE__ */ jsx16("button", { className: "rc-btn rc-btn--secondary", onClick: onCancel, ref: cancelRef, children: cancelLabel }),
+      /* @__PURE__ */ jsx16("button", { className: btnVariant, onClick: onConfirm, disabled: !canConfirm, children: confirmLabel })
+    ] })
+  ] }) });
+}
+
+// src/react/ConceptTerm.tsx
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+function ConceptTerm({ term, definition, children, className, ...props }) {
+  const classes = ["rc-concept-term", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17(Tooltip, { content: definition, variant: "info", placement: "top", children: /* @__PURE__ */ jsxs9("span", { className: classes, ...props, children: [
+    children ?? term,
+    /* @__PURE__ */ jsxs9("svg", { className: "rc-concept-term__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx17("path", { d: "M12 16v-4" }),
+      /* @__PURE__ */ jsx17("path", { d: "M12 8h.01" })
+    ] })
+  ] }) });
+}
 export {
   ActivityFeed,
   Badge,
   Button,
   Card,
   CodeBlock,
+  ConceptTerm,
+  ConfirmModal,
   EmptyState,
   ErrorCard,
+  InfoCard,
   Input,
   Select,
+  Skeleton,
   Spinner,
   StatCard,
   Textarea,
-  TierBadge
+  TierBadge,
+  ToastProvider,
+  Tooltip,
+  resetInfoCards,
+  useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runcontext/uxd",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "private": false,
   "license": "MIT",
   "type": "module",