@runcontext/uxd 0.5.2

package/dist/css/tokens.css

@@ -0,0 +1,66 @@
+/* Auto-generated from @runcontext/uxd tokens. Do not edit. */
+
+:root {
+  --rc-color-brand-gold: #c9a55a;
+  --rc-color-brand-gold-light: #f5e6c0;
+  --rc-color-brand-gold-dim: #1a1508;
+  --rc-color-surface-bg: #0a0908;
+  --rc-color-surface-card: #121110;
+  --rc-color-surface-card-hover: #1e1c18;
+  --rc-color-border-default: #36342e;
+  --rc-color-border-hover: #6a675e;
+  --rc-color-text-primary: #e8e6e1;
+  --rc-color-text-secondary: #9a978e;
+  --rc-color-text-muted: #6a675e;
+  --rc-color-tier-gold: #c9a55a;
+  --rc-color-tier-silver: #a0a8b8;
+  --rc-color-tier-bronze: #b87a4a;
+  --rc-color-status-success: #22c55e;
+  --rc-color-status-error: #ef4444;
+  --rc-color-status-warning: #eab308;
+  --rc-color-status-info: #4f9eff;
+
+  --rc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --rc-font-mono: 'Geist Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
+
+  --rc-text-xs: 0.75rem;
+  --rc-text-sm: 0.875rem;
+  --rc-text-base: 1rem;
+  --rc-text-lg: 1.125rem;
+  --rc-text-xl: 1.25rem;
+  --rc-text-2xl: 1.5rem;
+  --rc-text-3xl: 2rem;
+
+  --rc-font-weight-normal: 400;
+  --rc-font-weight-medium: 500;
+  --rc-font-weight-semibold: 600;
+  --rc-font-weight-bold: 700;
+
+  --rc-leading-tight: 1.25;
+  --rc-leading-normal: 1.5;
+  --rc-leading-relaxed: 1.75;
+
+  --rc-space-0: 0rem;
+  --rc-space-1: 0.25rem;
+  --rc-space-2: 0.5rem;
+  --rc-space-3: 0.75rem;
+  --rc-space-4: 1rem;
+  --rc-space-5: 1.25rem;
+  --rc-space-6: 1.5rem;
+  --rc-space-8: 2rem;
+  --rc-space-10: 2.5rem;
+  --rc-space-12: 3rem;
+  --rc-space-16: 4rem;
+  --rc-space-0_5: 0.125rem;
+  --rc-space-1_5: 0.375rem;
+
+  --rc-radius-none: 0;
+  --rc-radius-sm: 4px;
+  --rc-radius-md: 8px;
+  --rc-radius-lg: 12px;
+  --rc-radius-full: 9999px;
+
+  --rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --rc-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --rc-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
+}

package/dist/react/index.d.ts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+}
+declare function Button({ variant, size, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    interactive?: boolean;
+    children?: ReactNode;
+}
+declare function Card({ interactive, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: string | number;
+    icon?: ReactNode;
+}
+declare function StatCard({ label, value, icon, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'gold' | 'silver' | 'bronze' | 'success' | 'error' | 'warning' | 'info';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant: BadgeVariant;
+    children?: ReactNode;
+}
+declare function Badge({ variant, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface TierBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tier: 'gold' | 'silver' | 'bronze';
+}
+declare function TierBadge({ tier, ...props }: TierBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+}
+declare function Input({ error, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+}
+declare function Textarea({ error, className, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    error?: boolean;
+    children?: ReactNode;
+}
+declare function Select({ error, className, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface ActivityEvent {
+    id: string;
+    type: string;
+    actor?: string;
+    message: string;
+    timestamp: string;
+}
+interface ActivityFeedProps extends HTMLAttributes<HTMLDivElement> {
+    events: ActivityEvent[];
+}
+declare function ActivityFeed({ events, className, ...props }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: ReactNode;
+    message: string;
+    action?: ReactNode;
+}
+declare function EmptyState({ icon, message, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+declare function Spinner(): react_jsx_runtime.JSX.Element;
+
+interface ErrorCardProps extends HTMLAttributes<HTMLDivElement> {
+    message: string;
+    action?: ReactNode;
+}
+declare function ErrorCard({ message, action, className, ...props }: ErrorCardProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
+    code: string;
+}
+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 };

package/dist/react/index.js

@@ -0,0 +1,167 @@
+// src/react/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  const classes = ["rc-btn", `rc-btn--${variant}`, `rc-btn--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { className: classes, ...props, children });
+}
+
+// src/react/Card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({
+  interactive = false,
+  className,
+  children,
+  ...props
+}) {
+  const classes = [
+    "rc-card",
+    interactive && "rc-card--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classes, ...props, children });
+}
+
+// src/react/StatCard.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function StatCard({
+  label,
+  value,
+  icon,
+  className,
+  ...props
+}) {
+  const classes = ["rc-stat-card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "rc-stat-card__header", children: [
+      /* @__PURE__ */ jsx3("span", { className: "rc-stat-card__label", children: label }),
+      icon && /* @__PURE__ */ jsx3("span", { className: "rc-stat-card__icon", children: icon })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "rc-stat-card__value", children: value })
+  ] });
+}
+
+// src/react/Badge.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Badge({ variant, className, children, ...props }) {
+  const classes = ["rc-badge", `rc-badge--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx4("span", { className: classes, ...props, children });
+}
+
+// src/react/TierBadge.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var tierLabels = {
+  gold: "AI-Ready",
+  silver: "Trusted",
+  bronze: "Discoverable"
+};
+function TierBadge({ tier, ...props }) {
+  return /* @__PURE__ */ jsx5(Badge, { variant: tier, ...props, children: tierLabels[tier] });
+}
+
+// src/react/Input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Input({ error = false, className, ...props }) {
+  const classes = ["rc-input", error && "rc-input--error", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("input", { className: classes, ...props });
+}
+function Textarea({
+  error = false,
+  className,
+  ...props
+}) {
+  const classes = ["rc-textarea", error && "rc-textarea--error", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("textarea", { className: classes, ...props });
+}
+function Select({
+  error = false,
+  className,
+  children,
+  ...props
+}) {
+  const classes = ["rc-select", error && "rc-select--error", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("select", { className: classes, ...props, children });
+}
+
+// src/react/ActivityFeed.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function ActivityFeed({
+  events,
+  className,
+  ...props
+}) {
+  const classes = ["rc-activity-feed", className].filter(Boolean).join(" ");
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children: /* @__PURE__ */ jsx7("p", { className: "rc-activity-feed__message", children: "No recent activity." }) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children: events.map((event) => /* @__PURE__ */ jsxs2("div", { className: "rc-activity-feed__item", children: [
+    /* @__PURE__ */ jsx7("span", { className: "rc-activity-feed__dot" }),
+    /* @__PURE__ */ jsx7("span", { className: "rc-activity-feed__message", children: event.message }),
+    /* @__PURE__ */ jsx7("span", { className: "rc-activity-feed__meta", children: event.timestamp })
+  ] }, event.id)) });
+}
+
+// src/react/EmptyState.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  message,
+  action,
+  className,
+  ...props
+}) {
+  const classes = ["rc-empty", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs3("div", { className: classes, ...props, children: [
+    icon && /* @__PURE__ */ jsx8("div", { className: "rc-empty__icon", children: icon }),
+    /* @__PURE__ */ jsx8("p", { className: "rc-empty__message", children: message }),
+    action
+  ] });
+}
+
+// src/react/Spinner.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Spinner() {
+  return /* @__PURE__ */ jsx9("span", { className: "rc-spinner", role: "status", "aria-label": "Loading" });
+}
+
+// src/react/ErrorCard.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function ErrorCard({
+  message,
+  action,
+  className,
+  ...props
+}) {
+  const classes = ["rc-error-card", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className: classes, ...props, children: [
+    /* @__PURE__ */ jsx10("p", { className: "rc-error-card__message", children: message }),
+    action
+  ] });
+}
+
+// src/react/CodeBlock.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+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 }) });
+}
+export {
+  ActivityFeed,
+  Badge,
+  Button,
+  Card,
+  CodeBlock,
+  EmptyState,
+  ErrorCard,
+  Input,
+  Select,
+  Spinner,
+  StatCard,
+  Textarea,
+  TierBadge
+};

package/dist/tailwind/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Tailwind CSS preset that maps RunContext design tokens to Tailwind theme values.
+ */
+declare const runcontextPreset: {
+    readonly theme: {
+        readonly extend: {
+            readonly colors: {
+                readonly 'brand-gold': "#c9a55a";
+                readonly 'brand-gold-light': "#f5e6c0";
+                readonly 'brand-gold-dim': "#1a1508";
+                readonly 'surface-bg': "#0a0908";
+                readonly 'surface-card': "#121110";
+                readonly 'surface-card-hover': "#1e1c18";
+                readonly 'surface-border': "#36342e";
+                readonly 'surface-border-hover': "#6a675e";
+                readonly 'text-primary': "#e8e6e1";
+                readonly 'text-secondary': "#9a978e";
+                readonly 'text-muted': "#6a675e";
+                readonly 'tier-gold': "#c9a55a";
+                readonly 'tier-silver': "#a0a8b8";
+                readonly 'tier-bronze': "#b87a4a";
+                readonly 'status-success': "#22c55e";
+                readonly 'status-error': "#ef4444";
+                readonly 'status-warning': "#eab308";
+                readonly 'status-info': "#4f9eff";
+            };
+            readonly fontFamily: {
+                readonly sans: string[];
+                readonly mono: string[];
+            };
+            readonly borderRadius: {
+                readonly sm: "4px";
+                readonly md: "8px";
+                readonly lg: "12px";
+            };
+            readonly boxShadow: {
+                readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+                readonly md: "0 2px 8px rgba(0, 0, 0, 0.4)";
+                readonly lg: "0 4px 16px rgba(0, 0, 0, 0.5)";
+            };
+        };
+    };
+};
+/**
+ * Ready-to-paste Tailwind CSS 4 `@theme inline` block containing all RunContext tokens.
+ */
+declare const themeInlineCSS: string;
+
+export { runcontextPreset, themeInlineCSS };

package/dist/tailwind/index.js

@@ -0,0 +1,151 @@
+// src/tokens/colors.ts
+var colors = {
+  brand: {
+    gold: "#c9a55a",
+    goldLight: "#f5e6c0",
+    goldDim: "#1a1508"
+  },
+  surface: {
+    bg: "#0a0908",
+    card: "#121110",
+    cardHover: "#1e1c18"
+  },
+  border: {
+    default: "#36342e",
+    hover: "#6a675e"
+  },
+  text: {
+    primary: "#e8e6e1",
+    secondary: "#9a978e",
+    muted: "#6a675e"
+  },
+  tier: {
+    gold: "#c9a55a",
+    silver: "#a0a8b8",
+    bronze: "#b87a4a"
+  },
+  status: {
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#eab308",
+    info: "#4f9eff"
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    sans: "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    mono: "'Geist Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem"
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
+
+// src/tokens/radii.ts
+var radii = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  full: "9999px"
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+  md: "0 2px 8px rgba(0, 0, 0, 0.4)",
+  lg: "0 4px 16px rgba(0, 0, 0, 0.5)"
+};
+
+// src/tailwind/preset.ts
+var runcontextPreset = {
+  theme: {
+    extend: {
+      colors: {
+        "brand-gold": colors.brand.gold,
+        "brand-gold-light": colors.brand.goldLight,
+        "brand-gold-dim": colors.brand.goldDim,
+        "surface-bg": colors.surface.bg,
+        "surface-card": colors.surface.card,
+        "surface-card-hover": colors.surface.cardHover,
+        "surface-border": colors.border.default,
+        "surface-border-hover": colors.border.hover,
+        "text-primary": colors.text.primary,
+        "text-secondary": colors.text.secondary,
+        "text-muted": colors.text.muted,
+        "tier-gold": colors.tier.gold,
+        "tier-silver": colors.tier.silver,
+        "tier-bronze": colors.tier.bronze,
+        "status-success": colors.status.success,
+        "status-error": colors.status.error,
+        "status-warning": colors.status.warning,
+        "status-info": colors.status.info
+      },
+      fontFamily: {
+        sans: typography.fontFamily.sans.split(",").map((s) => s.trim()),
+        mono: typography.fontFamily.mono.split(",").map((s) => s.trim())
+      },
+      borderRadius: {
+        sm: radii.sm,
+        md: radii.md,
+        lg: radii.lg
+      },
+      boxShadow: {
+        sm: shadows.sm,
+        md: shadows.md,
+        lg: shadows.lg
+      }
+    }
+  }
+};
+var themeInlineCSS = `@theme inline {
+  --color-brand-gold: ${colors.brand.gold};
+  --color-brand-gold-light: ${colors.brand.goldLight};
+  --color-brand-gold-dim: ${colors.brand.goldDim};
+  --color-surface-bg: ${colors.surface.bg};
+  --color-surface-card: ${colors.surface.card};
+  --color-surface-card-hover: ${colors.surface.cardHover};
+  --color-surface-border: ${colors.border.default};
+  --color-surface-border-hover: ${colors.border.hover};
+  --color-text-primary: ${colors.text.primary};
+  --color-text-secondary: ${colors.text.secondary};
+  --color-text-muted: ${colors.text.muted};
+  --color-tier-gold: ${colors.tier.gold};
+  --color-tier-silver: ${colors.tier.silver};
+  --color-tier-bronze: ${colors.tier.bronze};
+  --color-status-success: ${colors.status.success};
+  --color-status-error: ${colors.status.error};
+  --color-status-warning: ${colors.status.warning};
+  --color-status-info: ${colors.status.info};
+  --font-family-sans: ${typography.fontFamily.sans};
+  --font-family-mono: ${typography.fontFamily.mono};
+  --radius-sm: ${radii.sm};
+  --radius-md: ${radii.md};
+  --radius-lg: ${radii.lg};
+  --shadow-sm: ${shadows.sm};
+  --shadow-md: ${shadows.md};
+  --shadow-lg: ${shadows.lg};
+}`;
+export {
+  runcontextPreset,
+  themeInlineCSS
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,91 @@
+declare const colors: {
+    readonly brand: {
+        readonly gold: "#c9a55a";
+        readonly goldLight: "#f5e6c0";
+        readonly goldDim: "#1a1508";
+    };
+    readonly surface: {
+        readonly bg: "#0a0908";
+        readonly card: "#121110";
+        readonly cardHover: "#1e1c18";
+    };
+    readonly border: {
+        readonly default: "#36342e";
+        readonly hover: "#6a675e";
+    };
+    readonly text: {
+        readonly primary: "#e8e6e1";
+        readonly secondary: "#9a978e";
+        readonly muted: "#6a675e";
+    };
+    readonly tier: {
+        readonly gold: "#c9a55a";
+        readonly silver: "#a0a8b8";
+        readonly bronze: "#b87a4a";
+    };
+    readonly status: {
+        readonly success: "#22c55e";
+        readonly error: "#ef4444";
+        readonly warning: "#eab308";
+        readonly info: "#4f9eff";
+    };
+};
+
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif";
+        readonly mono: "'Geist Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "2rem";
+    };
+    readonly fontWeight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+
+declare const spacing: {
+    readonly 0: "0rem";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+};
+
+declare const radii: {
+    readonly none: "0";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly full: "9999px";
+};
+
+declare const shadows: {
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+    readonly md: "0 2px 8px rgba(0, 0, 0, 0.4)";
+    readonly lg: "0 4px 16px rgba(0, 0, 0, 0.5)";
+};
+
+export { colors, radii, shadows, spacing, typography };