@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-L2TIGA7I.js

@@ -0,0 +1,530 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkZGCN5WCGjs = require('./chunk-ZGCN5WCG.js');
+
+// src/components/feedback/Chip.tsx
+var _react = require('react'); var React3 = _interopRequireWildcard(_react);
+var _Chip = require('@mui/material/Chip'); var _Chip2 = _interopRequireDefault(_Chip);
+var _styles = require('@mui/material/styles');
+
+// src/components/feedback/chipVariantStyles.ts
+function getChipVariantStyles(variant, theme) {
+  switch (variant) {
+    case "active":
+      return {
+        backgroundColor: theme.palette.background.selected,
+        color: theme.palette.primary.main,
+        hoverBackgroundColor: theme.palette.background.selected
+      };
+    case "success":
+      return {
+        backgroundColor: theme.palette.success.main,
+        color: theme.palette.success.contrastText,
+        hoverBackgroundColor: theme.palette.success.dark
+      };
+    case "error":
+      return {
+        backgroundColor: theme.palette.error.main,
+        color: theme.palette.error.contrastText,
+        hoverBackgroundColor: theme.palette.error.dark
+      };
+    case "warning":
+      return {
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText,
+        hoverBackgroundColor: theme.palette.warning.dark
+      };
+    case "info":
+      return {
+        backgroundColor: theme.palette.info.main,
+        color: theme.palette.info.contrastText,
+        hoverBackgroundColor: theme.palette.info.dark
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: theme.palette.grey[100],
+        color: theme.palette.text.primary,
+        hoverBackgroundColor: theme.palette.grey[200]
+      };
+  }
+}
+
+// src/components/feedback/Chip.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var StyledChip = _styles.styled.call(void 0, _Chip2.default, {
+  shouldForwardProp: (prop) => prop !== "dsVariant" && prop !== "dsTone"
+})(({ theme, dsVariant, dsTone }) => {
+  if (dsTone === "onGradient") {
+    return {
+      height: 22,
+      color: "white",
+      backgroundColor: "rgba(0,0,0,0.25)",
+      border: "1px solid rgba(255,255,255,0.22)",
+      fontFamily: _chunkZGCN5WCGjs.fontFamilyMono,
+      fontSize: 10,
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      "& .MuiChip-label": {
+        paddingLeft: 8,
+        paddingRight: 8
+      }
+    };
+  }
+  const { backgroundColor, color, hoverBackgroundColor } = getChipVariantStyles(dsVariant, theme);
+  return {
+    backgroundColor,
+    color,
+    "&:hover": { backgroundColor: hoverBackgroundColor }
+  };
+});
+var Chip = React3.default.forwardRef(function Chip2({ variant = "default", tone = "default", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledChip, { ref, dsVariant: variant, dsTone: tone, ...props });
+});
+
+// src/components/feedback/StatusDot.tsx
+
+
+
+function statusColor(status, theme) {
+  switch (status) {
+    case "success":
+      return theme.palette.success.main;
+    case "error":
+      return theme.palette.error.main;
+    case "warning":
+      return theme.palette.warning.main;
+    case "info":
+      return theme.palette.info.main;
+    case "primary":
+      return theme.palette.primary.main;
+    case "neutral":
+    default:
+      return theme.palette.grey[400];
+  }
+}
+var pulseKeyframes = _styles.keyframes`
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.55; transform: scale(1.35); }
+`;
+var Dot = _styles.styled.call(void 0, "span", {
+  shouldForwardProp: (prop) => prop !== "status" && prop !== "size" && prop !== "pulse"
+})(({ theme, status, size, pulse }) => ({
+  display: "inline-block",
+  flexShrink: 0,
+  width: size,
+  height: size,
+  borderRadius: "50%",
+  backgroundColor: statusColor(status, theme),
+  animation: pulse ? `${pulseKeyframes} 1.6s ease-in-out infinite` : void 0,
+  "@media (prefers-reduced-motion: reduce)": {
+    animation: "none"
+  }
+}));
+var StatusDot = React3.default.forwardRef(function StatusDot2({ status, size = 8, pulse = false, "aria-label": ariaLabel, ...rest }, ref) {
+  const a11yProps = ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dot, { ref, status, size, pulse, ...rest, ...a11yProps });
+});
+
+// src/components/feedback/StatusLabel.tsx
+
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+
+var SIZES = {
+  small: { dot: 6, typography: "caption" },
+  medium: { dot: 8, typography: "body2" }
+};
+var StatusLabel = React3.forwardRef(
+  function StatusLabel2({ status, label, size = "medium", pulse = false, ...rest }, ref) {
+    const { dot, typography } = SIZES[size];
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _Box2.default,
+      {
+        ref,
+        ...pulse ? { "aria-live": "polite" } : {},
+        ...rest,
+        sx: (theme) => ({
+          display: "inline-flex",
+          alignItems: "center",
+          gap: theme.spacing(0.75)
+        }),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusDot, { status, size: dot, pulse }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: typography, component: "span", sx: { lineHeight: 1.2 }, children: label })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/feedback/CopyChip.tsx
+
+
+var _Tooltip = require('@mui/material/Tooltip'); var _Tooltip2 = _interopRequireDefault(_Tooltip);
+var _Check = require('@mui/icons-material/Check'); var _Check2 = _interopRequireDefault(_Check);
+var _ContentCopy = require('@mui/icons-material/ContentCopy'); var _ContentCopy2 = _interopRequireDefault(_ContentCopy);
+
+var COPY_FEEDBACK_MS = 1200;
+var CopyChip = ({
+  text,
+  maxWidth = 260,
+  "aria-label": ariaLabel,
+  tooltipLabel = "Copy",
+  tooltipCopiedLabel = "Copied",
+  onCopy
+}) => {
+  const [copied, setCopied] = _react.useState.call(void 0, false);
+  const timerRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    return () => {
+      if (timerRef.current != null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (e) {
+      return;
+    }
+    setCopied(true);
+    _optionalChain([onCopy, 'optionalCall', _ => _()]);
+    if (timerRef.current != null) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Tooltip2.default, { title: copied ? tooltipCopiedLabel : tooltipLabel, placement: "top", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Box2.default,
+    {
+      component: "button",
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": _nullishCoalesce(ariaLabel, () => ( `Copy ${text}`)),
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        bgcolor: "action.hover",
+        color: "text.primary",
+        border: "none",
+        borderRadius: 1,
+        px: 1,
+        py: 0.5,
+        fontFamily: "monospace",
+        fontSize: 12,
+        cursor: "pointer",
+        transition: "background-color 0.12s",
+        maxWidth: "100%",
+        "&:hover": { bgcolor: "action.selected" }
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            component: "span",
+            sx: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              maxWidth
+            },
+            children: text
+          }
+        ),
+        copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Check2.default, { sx: { fontSize: 14 } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ContentCopy2.default, { sx: { fontSize: 14 } })
+      ]
+    }
+  ) });
+};
+
+// src/components/feedback/Tooltip.tsx
+
+
+
+
+var StyledTooltip = _styles.styled.call(void 0, (0, _Tooltip2.default))(({ theme }) => ({
+  "& .MuiTooltip-tooltip": {
+    backgroundColor: theme.palette.grey[800],
+    color: theme.palette.common.white,
+    fontSize: "12px",
+    padding: "8px 12px",
+    borderRadius: "4px"
+  },
+  "& .MuiTooltip-arrow": {
+    color: theme.palette.grey[800]
+  }
+}));
+var Tooltip2 = React3.default.forwardRef(function Tooltip3(props, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTooltip, { ref, ...props });
+});
+
+// src/components/feedback/Progress.tsx
+
+
+
+
+var _material = require('@mui/material');
+
+var StyledLinearProgress = _material.styled.call(void 0, (0, _material.LinearProgress))(({ theme }) => ({
+  height: 4,
+  borderRadius: 2,
+  backgroundColor: theme.palette.grey[200],
+  "& .MuiLinearProgress-bar": {
+    backgroundColor: theme.palette.primary.main,
+    borderRadius: 2
+  }
+}));
+var StyledCircularProgress = _material.styled.call(void 0, (0, _material.CircularProgress))(({ theme }) => ({
+  color: theme.palette.primary.main
+}));
+var Progress = ({
+  variant = "linear",
+  value,
+  size = 40,
+  thickness = 4
+}) => {
+  if (variant === "circular") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledCircularProgress, { size, thickness });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledLinearProgress,
+    {
+      variant: value !== void 0 ? "determinate" : "indeterminate",
+      value
+    }
+  );
+};
+
+// src/components/feedback/Alert.tsx
+
+var _Alert = require('@mui/material/Alert'); var _Alert2 = _interopRequireDefault(_Alert);
+
+var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
+
+
+var StyledAlert = _styles.styled.call(void 0, (0, _Alert2.default))({
+  borderRadius: 8,
+  "&.MuiAlert-filled": {
+    borderRadius: 8
+  }
+});
+var Alert = React3.default.forwardRef(function Alert2({ severity = "info", title, children, ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledAlert, { ref, severity, ...props, children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.AlertTitle, { children: title }),
+    children
+  ] });
+});
+var StyledSnackbar = _styles.styled.call(void 0, (0, _Snackbar2.default))({});
+var StableFadeTransition = React3.default.forwardRef(
+  (props, ref) => {
+    return React3.default.cloneElement(props.children, {
+      ref,
+      style: {
+        ...props.children.props.style,
+        transition: "opacity 0.3s ease-in-out"
+      }
+    });
+  }
+);
+StableFadeTransition.displayName = "StableFadeTransition";
+var Snackbar = React3.default.forwardRef(function Snackbar2({
+  message,
+  severity = "info",
+  title,
+  variant = "filled",
+  onClose,
+  children,
+  anchorOrigin = { vertical: "bottom", horizontal: "center" },
+  autoHideDuration = 6e3,
+  ...props
+}, ref) {
+  const handleClose = (_event, reason) => {
+    if (reason === "clickaway" && onClose) {
+      return;
+    }
+    _optionalChain([onClose, 'optionalCall', _2 => _2()]);
+  };
+  const content = children || (message ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Alert,
+    {
+      onClose: onClose ? handleClose : void 0,
+      severity,
+      variant,
+      title,
+      sx: { width: "100%", borderRadius: 2 },
+      children: message
+    }
+  ) : void 0);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledSnackbar,
+    {
+      ref,
+      anchorOrigin,
+      autoHideDuration,
+      onClose: handleClose,
+      disableWindowBlurListener: true,
+      ClickAwayListenerProps: {
+        onClickAway: () => {
+        }
+        // Prevent scroll issues
+      },
+      TransitionComponent: StableFadeTransition,
+      ...props,
+      children: content
+    }
+  );
+});
+
+// src/components/feedback/EmptyState.tsx
+
+
+
+var EmptyState = React3.default.forwardRef(function EmptyState2({ title = "No items found", description, icon, action }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      ref,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 6,
+        textAlign: "center",
+        minHeight: 200
+      },
+      children: [
+        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              color: "text.secondary",
+              marginBottom: 2,
+              fontSize: 64
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h6", sx: { marginBottom: 1, color: "text.primary" }, children: title }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", sx: { color: "text.secondary", marginBottom: 3 }, children: description }),
+        action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: action })
+      ]
+    }
+  );
+});
+
+// src/components/feedback/Loading.tsx
+
+
+
+var Loading = React3.default.forwardRef(function Loading2({ message = "Loading...", size = 40, fullScreen = false }, ref) {
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      ref,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 2,
+        ...fullScreen && {
+          height: "100vh",
+          width: "100vw",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          backgroundColor: "background.default",
+          zIndex: 9999
+        },
+        ...!fullScreen && {
+          padding: 4
+        }
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size, thickness: 4 }),
+        message && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: message })
+      ]
+    }
+  );
+  return content;
+});
+
+// src/components/feedback/AppLoading.tsx
+
+
+var AppLoading = ({
+  message = "Loading...",
+  logo = "/icons/logo.png",
+  sx = {}
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          width: "100vw",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          backgroundColor: "grey.50",
+          zIndex: 9999
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
+          {
+            component: "img",
+            src: logo,
+            alt: "Logo",
+            sx: {
+              height: 80,
+              width: "auto",
+              mb: 4
+            }
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { size: 40, thickness: 4, sx: { mb: 2 } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body1", color: "text.secondary", children: message })
+      ]
+    }
+  );
+};
+
+// src/components/feedback/CircularProgress.tsx
+
+
+
+
+
+var CircularProgress4 = React3.default.forwardRef(
+  function CircularProgress5({ size = 40, thickness = 4, ...props }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CircularProgress, { ref, size, thickness, ...props });
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.getChipVariantStyles = getChipVariantStyles; exports.Chip = Chip; exports.StatusDot = StatusDot; exports.StatusLabel = StatusLabel; exports.CopyChip = CopyChip; exports.Tooltip = Tooltip2; exports.Progress = Progress; exports.Alert = Alert; exports.Snackbar = Snackbar; exports.EmptyState = EmptyState; exports.Loading = Loading; exports.AppLoading = AppLoading; exports.CircularProgress = CircularProgress4;
+//# sourceMappingURL=chunk-L2TIGA7I.js.map

package/dist/chunk-L2TIGA7I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-L2TIGA7I.js","../src/components/feedback/Chip.tsx","../src/components/feedback/chipVariantStyles.ts","../src/components/feedback/StatusDot.tsx","../src/components/feedback/StatusLabel.tsx","../src/components/feedback/CopyChip.tsx","../src/components/feedback/Tooltip.tsx","../src/components/feedback/Progress.tsx","../src/components/feedback/Alert.tsx","../src/components/feedback/EmptyState.tsx","../src/components/feedback/Loading.tsx","../src/components/feedback/AppLoading.tsx","../src/components/feedback/CircularProgress.tsx"],"names":["Chip","styled","React","StatusLabel","Box","jsx","CircularProgress"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-L2TIGA7I.js","sourcesContent":[null,"import React from 'react';\nimport MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\nimport { getChipVariantStyles, type ChipVariant } from './chipVariantStyles';\nimport { fontFamilyMono } from '../../theme/typography';\n\nexport type { ChipVariant };\n\nexport type ChipTone = 'default' | 'onGradient';\n\nexport interface ChipProps extends Omit<MuiChipProps, 'color' | 'variant'> {\n  variant?: ChipVariant;\n  /**\n   * Visual tone overlay. `onGradient` styles the chip to read on a dark\n   * gradient surface (white text, mono caps, translucent border + bg).\n   * Positioning is the consumer's job.\n   * @default 'default'\n   */\n  tone?: ChipTone;\n}\n\nconst StyledChip = styled(MuiChip, {\n  shouldForwardProp: (prop) => prop !== 'dsVariant' && prop !== 'dsTone',\n})<{ dsVariant: ChipVariant; dsTone: ChipTone }>(({ theme, dsVariant, dsTone }) => {\n  if (dsTone === 'onGradient') {\n    return {\n      height: 22,\n      color: 'white',\n      backgroundColor: 'rgba(0,0,0,0.25)',\n      border: '1px solid rgba(255,255,255,0.22)',\n      fontFamily: fontFamilyMono,\n      fontSize: 10,\n      textTransform: 'uppercase' as const,\n      letterSpacing: '0.05em',\n      '& .MuiChip-label': {\n        paddingLeft: 8,\n        paddingRight: 8,\n      },\n    };\n  }\n  const { backgroundColor, color, hoverBackgroundColor } = getChipVariantStyles(dsVariant, theme);\n  return {\n    backgroundColor,\n    color,\n    '&:hover': { backgroundColor: hoverBackgroundColor },\n  };\n});\n\nexport const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip(\n  { variant = 'default', tone = 'default', ...props },\n  ref,\n) {\n  return <StyledChip ref={ref} dsVariant={variant} dsTone={tone} {...props} />;\n});\n","import type { Theme } from '@mui/material/styles';\n\nexport type ChipVariant = 'default' | 'active' | 'success' | 'error' | 'warning' | 'info';\n\nexport interface ChipVariantStyles {\n  backgroundColor: string;\n  color: string;\n  hoverBackgroundColor: string;\n}\n\n/**\n * Resolve a Chip variant to its themed background/foreground/hover colors.\n *\n * Status variants (success/error/warning/info) use the `main` surface with\n * `contrastText` (typically white) so chips read as loud solid pills.\n * `default` is neutral grey; `active` uses the brand-selected background.\n */\nexport function getChipVariantStyles(variant: ChipVariant, theme: Theme): ChipVariantStyles {\n  switch (variant) {\n    case 'active':\n      return {\n        backgroundColor: theme.palette.background.selected,\n        color: theme.palette.primary.main,\n        hoverBackgroundColor: theme.palette.background.selected,\n      };\n    case 'success':\n      return {\n        backgroundColor: theme.palette.success.main,\n        color: theme.palette.success.contrastText,\n        hoverBackgroundColor: theme.palette.success.dark,\n      };\n    case 'error':\n      return {\n        backgroundColor: theme.palette.error.main,\n        color: theme.palette.error.contrastText,\n        hoverBackgroundColor: theme.palette.error.dark,\n      };\n    case 'warning':\n      return {\n        backgroundColor: theme.palette.warning.main,\n        color: theme.palette.warning.contrastText,\n        hoverBackgroundColor: theme.palette.warning.dark,\n      };\n    case 'info':\n      return {\n        backgroundColor: theme.palette.info.main,\n        color: theme.palette.info.contrastText,\n        hoverBackgroundColor: theme.palette.info.dark,\n      };\n    case 'default':\n    default:\n      return {\n        backgroundColor: theme.palette.grey[100],\n        color: theme.palette.text.primary,\n        hoverBackgroundColor: theme.palette.grey[200],\n      };\n  }\n}\n","import React from 'react';\nimport { styled, keyframes, type Theme } from '@mui/material/styles';\n\nexport type StatusDotStatus = 'success' | 'error' | 'warning' | 'info' | 'primary' | 'neutral';\n\nexport interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'> {\n  /** Which themed color to render. `neutral` uses a grey for idle/queued states. */\n  status: StatusDotStatus;\n  /** Diameter in pixels. @default 8 */\n  size?: number;\n  /**\n   * Pulse animation for in-progress states (e.g., a running run). Respects\n   * `prefers-reduced-motion` and falls back to a static dot.\n   */\n  pulse?: boolean;\n  /**\n   * When provided, the dot becomes an accessible image with this label. When\n   * omitted, the dot is marked `aria-hidden` — assume an adjacent element\n   * carries the status semantics.\n   */\n  'aria-label'?: string;\n}\n\nfunction statusColor(status: StatusDotStatus, theme: Theme): string {\n  switch (status) {\n    case 'success': return theme.palette.success.main;\n    case 'error': return theme.palette.error.main;\n    case 'warning': return theme.palette.warning.main;\n    case 'info': return theme.palette.info.main;\n    case 'primary': return theme.palette.primary.main;\n    case 'neutral':\n    default:\n      return theme.palette.grey[400];\n  }\n}\n\nconst pulseKeyframes = keyframes`\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.55; transform: scale(1.35); }\n`;\n\nconst Dot = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'status' && prop !== 'size' && prop !== 'pulse',\n})<{ status: StatusDotStatus; size: number; pulse: boolean }>(({ theme, status, size, pulse }) => ({\n  display: 'inline-block',\n  flexShrink: 0,\n  width: size,\n  height: size,\n  borderRadius: '50%',\n  backgroundColor: statusColor(status, theme),\n  animation: pulse ? `${pulseKeyframes} 1.6s ease-in-out infinite` : undefined,\n  '@media (prefers-reduced-motion: reduce)': {\n    animation: 'none',\n  },\n}));\n\n/**\n * StatusDot — a small colored circle indicating entity status.\n *\n * Use alongside a text label for a labeled status; use with `aria-label` to\n * make the dot itself a standalone accessible indicator.\n *\n * @example\n * ```tsx\n * // Labeled context — the dot is decorative\n * <>\n *   <StatusDot status=\"success\" />\n *   <span>Succeeded</span>\n * </>\n *\n * // Standalone — dot carries the status meaning\n * <StatusDot status=\"info\" pulse aria-label=\"Running\" />\n * ```\n */\nexport const StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { status, size = 8, pulse = false, 'aria-label': ariaLabel, ...rest },\n  ref,\n) {\n  const a11yProps = ariaLabel\n    ? { role: 'img' as const, 'aria-label': ariaLabel }\n    : { 'aria-hidden': true as const };\n  // a11y props spread last so consumer cannot silently override role / aria-hidden.\n  // Invariant guarded by StatusDot.test.tsx > 'ignores consumer attempts to override the a11y contract'.\n  return <Dot ref={ref} status={status} size={size} pulse={pulse} {...rest} {...a11yProps} />;\n});\n","import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { StatusDot, type StatusDotStatus } from './StatusDot';\n\nexport type StatusLabelSize = 'small' | 'medium';\n\nexport interface StatusLabelProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Themed status; forwarded to StatusDot. */\n  status: StatusDotStatus;\n  /** Text rendered next to the dot. */\n  label: string;\n  /** Sizes the dot + text pair. @default 'medium' */\n  size?: StatusLabelSize;\n  /**\n   * Adds a pulsing animation on the dot for in-progress states. When true,\n   * the row also exposes an `aria-live=\"polite\"` region so SR users hear\n   * updates.\n   */\n  pulse?: boolean;\n}\n\nconst SIZES: Record<StatusLabelSize, { dot: number; typography: 'caption' | 'body2' }> = {\n  small: { dot: 6, typography: 'caption' },\n  medium: { dot: 8, typography: 'body2' },\n};\n\n/**\n * StatusLabel — a flex row pairing `StatusDot` with a text label.\n *\n * Use this when a status indicator needs an accompanying label; the row\n * keeps the dot baseline-aligned with the text at all sizes.\n */\nexport const StatusLabel = React.forwardRef<HTMLDivElement, StatusLabelProps>(\n  function StatusLabel({ status, label, size = 'medium', pulse = false, ...rest }, ref) {\n    const { dot, typography } = SIZES[size];\n    return (\n      <Box\n        ref={ref}\n        {...(pulse ? { 'aria-live': 'polite' as const } : {})}\n        {...rest}\n        sx={(theme) => ({\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: theme.spacing(0.75),\n        })}\n      >\n        <StatusDot status={status} size={dot} pulse={pulse} />\n        <Typography variant={typography} component=\"span\" sx={{ lineHeight: 1.2 }}>\n          {label}\n        </Typography>\n      </Box>\n    );\n  },\n);\n","import React, { useEffect, useRef, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/Check';\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\n\nconst COPY_FEEDBACK_MS = 1200;\n\nexport interface CopyChipProps {\n  /** The text to display and copy to the clipboard. */\n  text: string;\n  /** Max width in pixels for the (ellipsized) text label. @default 260 */\n  maxWidth?: number;\n  /**\n   * Accessible label for the button. Defaults to `Copy <text>`. Override when\n   * the raw text would be unclear to a screen-reader user (e.g., long hex IDs).\n   */\n  'aria-label'?: string;\n  /** Tooltip copy shown before clicking. @default 'Copy' */\n  tooltipLabel?: string;\n  /** Tooltip copy shown after a successful copy. @default 'Copied' */\n  tooltipCopiedLabel?: string;\n  /** Fires after the clipboard write succeeds. */\n  onCopy?: () => void;\n}\n\n/**\n * CopyChip — compact inline copy-to-clipboard control.\n *\n * Shows a monospace text label with an adjacent copy icon that toggles to a\n * check mark for a moment after a successful copy. Use in dense metadata\n * rows where an `IDBlock` would be visually too heavy; use `IDBlock` when\n * the identifier is the primary affordance on the surface and deserves a\n * full boxed treatment with snackbar feedback.\n *\n * @example\n * ```tsx\n * <CopyChip text=\"run_abc123\" />\n * <CopyChip text={longHexId} aria-label=\"Copy workspace ID\" onCopy={track} />\n * ```\n */\nexport const CopyChip: React.FC<CopyChipProps> = ({\n  text,\n  maxWidth = 260,\n  'aria-label': ariaLabel,\n  tooltipLabel = 'Copy',\n  tooltipCopiedLabel = 'Copied',\n  onCopy,\n}) => {\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current != null) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch {\n      // Clipboard unavailable (no permission, non-secure context, older UA).\n      // Leave the button in its idle state and skip the onCopy callback.\n      return;\n    }\n    setCopied(true);\n    onCopy?.();\n    if (timerRef.current != null) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);\n  };\n\n  return (\n    <Tooltip title={copied ? tooltipCopiedLabel : tooltipLabel} placement=\"top\">\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={ariaLabel ?? `Copy ${text}`}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          gap: 0.75,\n          bgcolor: 'action.hover',\n          color: 'text.primary',\n          border: 'none',\n          borderRadius: 1,\n          px: 1,\n          py: 0.5,\n          fontFamily: 'monospace',\n          fontSize: 12,\n          cursor: 'pointer',\n          transition: 'background-color 0.12s',\n          maxWidth: '100%',\n          '&:hover': { bgcolor: 'action.selected' },\n        }}\n      >\n        <Box\n          component=\"span\"\n          sx={{\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n            maxWidth,\n          }}\n        >\n          {text}\n        </Box>\n        {copied ? <CheckIcon sx={{ fontSize: 14 }} /> : <ContentCopyIcon sx={{ fontSize: 14 }} />}\n      </Box>\n    </Tooltip>\n  );\n};\n","import React from 'react';\nimport MuiTooltip, { TooltipProps as MuiTooltipProps } from '@mui/material/Tooltip';\nimport { styled } from '@mui/material/styles';\n\nexport type TooltipProps = MuiTooltipProps\n\nconst StyledTooltip = styled(MuiTooltip)(({ theme }) => ({\n  '& .MuiTooltip-tooltip': {\n    backgroundColor: theme.palette.grey[800],\n    color: theme.palette.common.white,\n    fontSize: '12px',\n    padding: '8px 12px',\n    borderRadius: '4px',\n  },\n  '& .MuiTooltip-arrow': {\n    color: theme.palette.grey[800],\n  },\n}));\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function Tooltip(props, ref) {\n  // MUI Tooltip forwards the ref to its child trigger element. Since the child\n  // is consumer-provided, we type the ref as a generic HTMLElement.\n  return <StyledTooltip ref={ref as React.Ref<HTMLElement>} {...props} />;\n});\n\n","import React from 'react';\nimport {\n  LinearProgress,\n  CircularProgress,\n  styled,\n} from '@mui/material';\n\nexport type ProgressVariant = 'linear' | 'circular';\n\nexport interface ProgressProps {\n  variant?: ProgressVariant;\n  value?: number;\n  size?: number;\n  thickness?: number;\n}\n\nconst StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({\n  height: 4,\n  borderRadius: 2,\n  backgroundColor: theme.palette.grey[200],\n  '& .MuiLinearProgress-bar': {\n    backgroundColor: theme.palette.primary.main,\n    borderRadius: 2,\n  },\n}));\n\nconst StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({\n  color: theme.palette.primary.main,\n}));\n\nexport const Progress: React.FC<ProgressProps> = ({\n  variant = 'linear',\n  value,\n  size = 40,\n  thickness = 4,\n}) => {\n  if (variant === 'circular') {\n    return <StyledCircularProgress size={size} thickness={thickness} />;\n  }\n\n  return (\n    <StyledLinearProgress\n      variant={value !== undefined ? 'determinate' : 'indeterminate'}\n      value={value}\n    />\n  );\n};\n\n","import React from 'react';\nimport MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';\nimport { AlertTitle as MuiAlertTitle } from '@mui/material';\nimport MuiSnackbar, { SnackbarProps as MuiSnackbarProps } from '@mui/material/Snackbar';\nimport { styled } from '@mui/material/styles';\n\nexport type AlertSeverity = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends Omit<MuiAlertProps, 'severity'> {\n  severity?: AlertSeverity;\n  /**\n   * Title to display above the alert message\n   */\n  title?: string;\n}\n\nconst StyledAlert = styled(MuiAlert)({\n  borderRadius: 8,\n  '&.MuiAlert-filled': {\n    borderRadius: 8,\n  },\n});\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { severity = 'info', title, children, ...props },\n  ref,\n) {\n  return (\n    <StyledAlert ref={ref} severity={severity} {...props}>\n      {title && <MuiAlertTitle>{title}</MuiAlertTitle>}\n      {children}\n    </StyledAlert>\n  );\n});\n\nexport { MuiAlertTitle as AlertTitle };\n\nexport interface SnackbarProps extends Omit<MuiSnackbarProps, 'children'> {\n  /**\n   * Message to display in the snackbar\n   */\n  message?: string;\n  /**\n   * Severity of the alert inside snackbar\n   */\n  severity?: AlertSeverity;\n  /**\n   * Title to display in the alert (optional)\n   */\n  title?: string;\n  /**\n   * Alert variant\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'standard' | 'outlined';\n  /**\n   * Callback when snackbar is closed\n   */\n  onClose?: () => void;\n  /**\n   * Children to render instead of message (allows custom content)\n   * Must be a ReactElement to match MuiSnackbar requirements\n   */\n  children?: React.ReactElement;\n}\n\nconst StyledSnackbar = styled(MuiSnackbar)({});\n\n// Module-scoped TransitionComponent. Bypasses MUI's enter/exit Transition\n// (which re-mounts the inner Alert on every parent re-render, killing\n// autoHide timers and re-firing aria-live) and instead lets the inner Alert\n// fade via a plain CSS opacity transition. Defined once so MUI keeps the\n// same component identity across Snackbar re-renders.\nconst StableFadeTransition = React.forwardRef<HTMLDivElement, { children: React.ReactElement }>(\n  (props, ref) => {\n    return React.cloneElement(props.children, {\n      ref,\n      style: {\n        ...props.children.props.style,\n        transition: 'opacity 0.3s ease-in-out',\n      },\n    });\n  },\n);\nStableFadeTransition.displayName = 'StableFadeTransition';\n\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(function Snackbar(\n  {\n    message,\n    severity = 'info',\n    title,\n    variant = 'filled',\n    onClose,\n    children,\n    anchorOrigin = { vertical: 'bottom', horizontal: 'center' },\n    autoHideDuration = 6000,\n    ...props\n  },\n  ref,\n) {\n  const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {\n    // Prevent closing on clickaway if we have a custom onClose handler\n    if (reason === 'clickaway' && onClose) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const content = children || (message ? (\n    <Alert\n      onClose={onClose ? handleClose : undefined}\n      severity={severity}\n      variant={variant}\n      title={title}\n      sx={{ width: '100%', borderRadius: 2 }}\n    >\n      {message}\n    </Alert>\n  ) : undefined);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <StyledSnackbar\n      ref={ref}\n      anchorOrigin={anchorOrigin}\n      autoHideDuration={autoHideDuration}\n      onClose={handleClose}\n      disableWindowBlurListener\n      ClickAwayListenerProps={{\n        onClickAway: () => {} // Prevent scroll issues\n      }}\n      TransitionComponent={StableFadeTransition}\n      {...props}\n    >\n      {content}\n    </StyledSnackbar>\n  );\n});\n\n","import React from 'react';\nimport { Box, Typography } from '@mui/material';\n\nexport interface EmptyStateProps {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { title = 'No items found', description, icon, action },\n  ref,\n) {\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: 6,\n        textAlign: 'center',\n        minHeight: 200,\n      }}\n    >\n      {icon && (\n        <Box\n          sx={{\n            color: 'text.secondary',\n            marginBottom: 2,\n            fontSize: 64,\n          }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography variant=\"h6\" sx={{ marginBottom: 1, color: 'text.primary' }}>\n        {title}\n      </Typography>\n      {description && (\n        <Typography variant=\"body2\" sx={{ color: 'text.secondary', marginBottom: 3 }}>\n          {description}\n        </Typography>\n      )}\n      {action && <Box>{action}</Box>}\n    </Box>\n  );\n});\n\n","import React from 'react';\nimport { Box, CircularProgress, Typography } from '@mui/material';\n\nexport interface LoadingProps {\n  message?: string;\n  size?: number;\n  fullScreen?: boolean;\n}\n\nexport const Loading = React.forwardRef<HTMLDivElement, LoadingProps>(function Loading(\n  { message = 'Loading...', size = 40, fullScreen = false },\n  ref,\n) {\n  const content = (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        gap: 2,\n        ...(fullScreen && {\n          height: '100vh',\n          width: '100vw',\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          backgroundColor: 'background.default',\n          zIndex: 9999,\n        }),\n        ...(!fullScreen && {\n          padding: 4,\n        }),\n      }}\n    >\n      <CircularProgress size={size} thickness={4} />\n      {message && (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {message}\n        </Typography>\n      )}\n    </Box>\n  );\n\n  return content;\n});\n\n","import React from 'react';\nimport { Box, CircularProgress, Typography } from '@mui/material';\n\nexport interface AppLoadingProps {\n  /**\n   * Loading message to display\n   * @default \"Loading...\"\n   */\n  message?: string;\n  /**\n   * Logo source URL or path\n   * @default \"/icons/logo.png\"\n   */\n  logo?: string;\n  /**\n   * Custom styles\n   */\n  sx?: any;\n}\n\n/**\n * AppLoading component - Full-screen loading indicator with logo\n * \n * @example\n * ```tsx\n * <AppLoading message=\"Initializing application...\" />\n * ```\n */\nexport const AppLoading: React.FC<AppLoadingProps> = ({\n  message = 'Loading...',\n  logo = '/icons/logo.png',\n  sx = {},\n}) => {\n  return (\n    <Box\n      sx={[\n        {\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          alignItems: 'center',\n          height: '100vh',\n          width: '100vw',\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          backgroundColor: 'grey.50',\n          zIndex: 9999,\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n    >\n      {logo && (\n        <Box\n          component=\"img\"\n          src={logo}\n          alt=\"Logo\"\n          sx={{\n            height: 80,\n            width: 'auto',\n            mb: 4,\n          }}\n        />\n      )}\n\n      <CircularProgress size={40} thickness={4} sx={{ mb: 2 }} />\n\n      <Typography variant=\"body1\" color=\"text.secondary\">\n        {message}\n      </Typography>\n    </Box>\n  );\n};\n\nexport default AppLoading;\n\n","import React from 'react';\nimport {\n  CircularProgress as MuiCircularProgress,\n  CircularProgressProps as MuiCircularProgressProps,\n} from '@mui/material';\n\nexport interface CircularProgressProps extends MuiCircularProgressProps {\n  /**\n   * Size of the progress indicator\n   * @default 40\n   */\n  size?: number | string;\n  /**\n   * Thickness of the progress indicator\n   * @default 4\n   */\n  thickness?: number;\n}\n\n/**\n * CircularProgress component - wrapper around MUI CircularProgress\n * \n * @example\n * ```tsx\n * <CircularProgress size={40} thickness={4} />\n * ```\n */\nexport const CircularProgress = React.forwardRef<HTMLSpanElement, CircularProgressProps>(\n  function CircularProgress({ size = 40, thickness = 4, ...props }, ref) {\n    return <MuiCircularProgress ref={ref} size={size} thickness={thickness} {...props} />;\n  },\n);\n\nexport default CircularProgress;\n\n"]}