@syntrologie/runtime-sdk 2.14.0 → 2.16.0

package/dist/chunk-2IQ2PTLJ.js

@@ -0,0 +1,871 @@
+// ../design-system/src/tokens/colors.ts
+var base = {
+  white: "#ffffff",
+  black: "#000000"
+};
+var brand = {
+  0: "#2c0b0a",
+  1: "#5b1715",
+  2: "#89221f",
+  3: "#b72e2a",
+  4: "#d44844",
+  5: "#dd6d69",
+  6: "#e5918f",
+  7: "#eeb6b4",
+  8: "#f6dada",
+  9: "#faebea"
+};
+var slateGrey = {
+  0: "#07080a",
+  1: "#0f1318",
+  2: "#0e1114",
+  3: "#1c222a",
+  4: "#2b333f",
+  5: "#394454",
+  6: "#475569",
+  7: "#677384",
+  8: "#87919f",
+  9: "#a8afba",
+  10: "#cbd0d7",
+  11: "#e8eaee",
+  12: "#f6f7f9"
+};
+var green = {
+  0: "#07230a",
+  1: "#0e4514",
+  2: "#16681e",
+  3: "#1d8a28",
+  4: "#24ad32",
+  5: "#4fbd5a",
+  6: "#7acd82",
+  7: "#a5deab",
+  8: "#d0eed3",
+  9: "#e5f6e7"
+};
+var yellow = {
+  0: "#301f09",
+  1: "#5f3e12",
+  2: "#8f5e1b",
+  3: "#be7d24",
+  4: "#ee9c2d",
+  5: "#f1b057",
+  6: "#f5c481",
+  7: "#f8d7ab",
+  8: "#fcebd5",
+  9: "#fdf5ea"
+};
+var red = {
+  0: "#330707",
+  1: "#660f0e",
+  2: "#991616",
+  3: "#cc1e1d",
+  4: "#ff2524",
+  5: "#ff5150",
+  6: "#ff7c7c",
+  7: "#ffa8a7",
+  8: "#ffd3d3",
+  9: "#ffe9e9"
+};
+var blue = {
+  0: "#051533",
+  1: "#0a2a66",
+  2: "#0f3f98",
+  3: "#1454cb",
+  4: "#1969fe",
+  5: "#4787fe",
+  6: "#75a5fe",
+  7: "#a3c3ff",
+  8: "#d1e1ff",
+  9: "#e8f0ff"
+};
+var orange = {
+  0: "#662500",
+  1: "#993d00",
+  2: "#cc5800",
+  3: "#ff7700",
+  4: "#fea85d",
+  5: "#fec58f",
+  6: "#ffd6ae",
+  7: "#fee6cd",
+  8: "#fff1e1",
+  9: "#fff8f0"
+};
+var purple = {
+  0: "#151229",
+  1: "#2a2452",
+  2: "#40357c",
+  3: "#5547a5",
+  4: "#6a59ce",
+  5: "#887ad8",
+  6: "#a69be2",
+  7: "#c3bdeb",
+  8: "#e1def5",
+  9: "#f0eefa"
+};
+var pink = {
+  0: "#37091f",
+  1: "#69123c",
+  2: "#9b1c58",
+  3: "#cd2575",
+  4: "#ff2e92",
+  5: "#ff58a8",
+  6: "#ff82be",
+  7: "#ffabd3",
+  8: "#ffd5e9",
+  9: "#ffeaf4"
+};
+var text = {
+  primary: slateGrey[10],
+  secondary: slateGrey[9],
+  tertiary: slateGrey[8]
+};
+var background = {
+  primary: slateGrey[2],
+  secondary: slateGrey[0]
+};
+var border = {
+  primary: slateGrey[4],
+  secondary: slateGrey[3]
+};
+var button = {
+  primary: {
+    text: base.white,
+    icon: base.white,
+    border: brand[3],
+    backgroundDefault: brand[3],
+    backgroundHover: brand[2]
+  },
+  neutral: {
+    text: slateGrey[10],
+    textHover: base.white,
+    icon: slateGrey[10],
+    iconHover: base.white,
+    border: slateGrey[4],
+    background: slateGrey[2]
+  },
+  link: {
+    text: base.white,
+    icon: base.white,
+    hover: brand[5]
+  },
+  error: {
+    text: red[5],
+    hover: red[6]
+  },
+  success: {
+    text: green[5],
+    hover: green[6]
+  }
+};
+var badge = {
+  slateGrey: {
+    content: slateGrey[10],
+    pillOutline: slateGrey[10],
+    borderPrimary: slateGrey[5],
+    borderSecondary: slateGrey[5],
+    background: slateGrey[3]
+  },
+  brand: {
+    content: brand[9],
+    pillOutline: brand[9],
+    borderPrimary: brand[6],
+    borderSecondary: brand[6],
+    background: brand[0]
+  },
+  red: {
+    content: red[8],
+    pillOutline: red[4],
+    borderPrimary: red[2],
+    borderSecondary: red[2],
+    background: red[0]
+  },
+  yellow: {
+    content: yellow[8],
+    pillOutline: yellow[4],
+    borderPrimary: yellow[2],
+    borderSecondary: yellow[2],
+    background: yellow[0]
+  },
+  green: {
+    content: green[8],
+    pillOutline: green[4],
+    borderPrimary: green[2],
+    borderSecondary: green[2],
+    background: green[0]
+  },
+  purple: {
+    content: purple[8],
+    pillOutline: purple[4],
+    borderPrimary: purple[2],
+    borderSecondary: purple[2],
+    background: purple[0]
+  },
+  blue: {
+    content: blue[8],
+    pillOutline: blue[4],
+    borderPrimary: blue[2],
+    borderSecondary: blue[2],
+    background: blue[0]
+  },
+  orange: {
+    content: orange[8],
+    pillOutline: orange[4],
+    borderPrimary: orange[2],
+    borderSecondary: orange[2],
+    background: orange[0]
+  },
+  pink: {
+    content: pink[8],
+    pillOutline: pink[4],
+    borderPrimary: pink[2],
+    borderSecondary: pink[2],
+    background: pink[0]
+  }
+};
+var badgeBanner = {
+  green: {
+    content: green[8],
+    border: green[2],
+    background: green[0]
+  },
+  yellow: {
+    content: yellow[8],
+    border: yellow[2],
+    background: yellow[0]
+  },
+  red: {
+    content: red[8],
+    border: red[2],
+    background: red[0]
+  }
+};
+var alert = {
+  green: {
+    content: green[1],
+    background: green[9]
+  },
+  yellow: {
+    content: yellow[1],
+    background: yellow[9]
+  },
+  red: {
+    content: red[1],
+    background: red[9]
+  }
+};
+var tag = {
+  content: slateGrey[10],
+  border: slateGrey[4],
+  background: slateGrey[3]
+};
+var menu = {
+  backgroundDefault: slateGrey[2],
+  backgroundHover: slateGrey[1],
+  selected: slateGrey[3]
+};
+var inputDropdown = {
+  background: slateGrey[2],
+  icon: slateGrey[10],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8]
+};
+var inputField = {
+  backgroundDefault: slateGrey[2],
+  backgroundDisabled: slateGrey[0],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8],
+  textError: red[5],
+  iconDefault: slateGrey[9],
+  iconPlaceholder: slateGrey[10],
+  iconError: red[5],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  borderError: red[5]
+};
+var toggle = {
+  handleDefault: base.white,
+  handleDisabled: slateGrey[10],
+  off: {
+    backgroundDefault: slateGrey[4],
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[4]
+  },
+  on: {
+    backgroundDefault: green[3],
+    backgroundHover: green[2],
+    backgroundDisabled: slateGrey[4]
+  }
+};
+var checkbox = {
+  off: {
+    backgroundDefault: "#00000000",
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[2],
+    border: slateGrey[6]
+  },
+  on: {
+    backgroundDefault: green[0],
+    backgroundHover: green[1],
+    backgroundDisabled: slateGrey[2],
+    border: green[3]
+  }
+};
+var avatar = {
+  content: slateGrey[10],
+  background: slateGrey[4]
+};
+var progressBarSlider = {
+  background: slateGrey[4],
+  active: green[3]
+};
+var card = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var sidebar = {
+  backgroundDefault: slateGrey[1],
+  backgroundHover: slateGrey[3],
+  backgroundActive: slateGrey[4],
+  border: slateGrey[4],
+  contentPrimary: slateGrey[10],
+  contentSecondary: slateGrey[9],
+  contentTertiary: slateGrey[8]
+};
+var modal = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var tab = {
+  activeBackground: slateGrey[3],
+  activeContent: brand[5],
+  inactiveContent: slateGrey[9],
+  border: slateGrey[4]
+};
+var table = {
+  header: {
+    textDefault: slateGrey[9],
+    textHover: slateGrey[8],
+    backgroundDefault: slateGrey[1]
+  },
+  border: slateGrey[4],
+  cell: {
+    textPrimary: slateGrey[10],
+    textSecondary: slateGrey[9],
+    backgroundDefault: slateGrey[2],
+    backgroundHover: slateGrey[1]
+  }
+};
+var breadcrumbs = {
+  textPrimaryDefault: slateGrey[10],
+  textPrimaryHover: slateGrey[10],
+  textSecondaryDefault: slateGrey[8],
+  textSecondaryHover: slateGrey[9],
+  iconPrimary: slateGrey[10],
+  iconSecondary: slateGrey[8]
+};
+var loadingIndicator = {
+  background: green[1],
+  active: green[5]
+};
+var datePicker = {
+  textDefault: slateGrey[10],
+  textSelected: base.white,
+  textDisabled: slateGrey[7],
+  backgroundDefault: slateGrey[2],
+  backgroundMiddle: slateGrey[3],
+  backgroundSelected: brand[3],
+  border: slateGrey[4]
+};
+var scroll = slateGrey[9];
+
+// ../design-system/src/tokens/panel-shell.ts
+var fab = {
+  /** Diameter in pixels. */
+  size: 56,
+  /** Inset from the panel's top-left corner in pixels. */
+  inset: 12,
+  /** Background color (always the brand black). */
+  background: base.black,
+  /** Icon / logo color. */
+  color: base.white,
+  /** Border — 2px brand red ring. */
+  border: `2px solid ${brand[3]}`,
+  /** Shadow when the panel is open (inner ring for "active" state). */
+  shadowOpen: "0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)",
+  /** Shadow when the panel is closed. */
+  shadowClosed: "0 4px 24px rgba(0,0,0,0.6)"
+};
+
+// src/theme/defaultTheme.ts
+function withAlpha(hex, alpha) {
+  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
+}
+var darkTheme = {
+  // Brand colors
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[4],
+  colorPrimaryMuted: brand[0],
+  // Surface colors (with alpha for glass/vibrancy effects)
+  colorBackground: withAlpha(slateGrey[1], 0.95),
+  colorBackgroundElevated: withAlpha(slateGrey[3], 0.95),
+  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.2),
+  colorSurface: withAlpha(slateGrey[4], 0.8),
+  colorSurfaceHover: withAlpha(slateGrey[5], 0.8),
+  // Text colors
+  colorText: text.primary,
+  colorTextSecondary: text.secondary,
+  colorTextMuted: text.tertiary,
+  colorTextInverse: slateGrey[1],
+  // Border colors
+  colorBorder: border.primary,
+  colorBorderSubtle: border.secondary,
+  // Semantic colors
+  colorSuccess: green[4],
+  colorSuccessMuted: green[0],
+  colorWarning: yellow[4],
+  colorWarningMuted: yellow[0],
+  colorError: red[4],
+  colorErrorMuted: red[0],
+  colorInfo: blue[4],
+  colorInfoMuted: blue[0],
+  // Notification badge
+  colorNotification: brand[4],
+  colorNotificationMuted: withAlpha(brand[4], 0.4),
+  // Glass morphism
+  glassBackground: withAlpha(slateGrey[1], 0.6),
+  glassBackgroundHover: withAlpha(slateGrey[1], 0.7),
+  glassBorder: "rgba(255, 255, 255, 0.08)",
+  glassBlur: "blur(24px)",
+  glassSaturate: "saturate(1.2)",
+  // Typography (SF Pro stack)
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+  fontSizeXs: "0.7rem",
+  fontSizeSm: "0.8rem",
+  fontSizeMd: "0.9rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.25rem",
+  fontSizeXxl: "1.5rem",
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  fontWeightSemibold: "600",
+  fontWeightBold: "700",
+  lineHeightTight: "1.25",
+  lineHeightNormal: "1.5",
+  lineHeightRelaxed: "1.75",
+  // Spacing
+  spacingXs: "0.25rem",
+  spacingSm: "0.5rem",
+  spacingMd: "0.75rem",
+  spacingLg: "1rem",
+  spacingXl: "1.5rem",
+  // Border radius
+  borderRadiusSm: "6px",
+  borderRadiusMd: "10px",
+  borderRadiusLg: "14px",
+  borderRadiusXl: "20px",
+  borderRadiusFull: "9999px",
+  // Shadows
+  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.2)",
+  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.3)",
+  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.4)",
+  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.5)",
+  // Backdrop effects
+  backdropBlur: "blur(20px)",
+  backdropSaturate: "saturate(180%)",
+  // Animation
+  transitionFast: "0.1s ease",
+  transitionNormal: "0.25s ease",
+  transitionSlow: "0.4s ease"
+};
+var lightTheme = {
+  // Brand colors
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[2],
+  colorPrimaryMuted: withAlpha(brand[5], 0.1),
+  // Surface colors
+  colorBackground: withAlpha(slateGrey[12], 0.95),
+  colorBackgroundElevated: withAlpha(slateGrey[11], 0.95),
+  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.02),
+  colorSurface: withAlpha(slateGrey[11], 0.6),
+  colorSurfaceHover: withAlpha(slateGrey[10], 0.6),
+  // Text colors
+  colorText: slateGrey[1],
+  colorTextSecondary: slateGrey[6],
+  colorTextMuted: slateGrey[8],
+  colorTextInverse: slateGrey[12],
+  // Border colors
+  colorBorder: withAlpha(slateGrey[0], 0.12),
+  colorBorderSubtle: withAlpha(slateGrey[0], 0.06),
+  // Semantic colors
+  colorSuccess: green[4],
+  colorSuccessMuted: withAlpha(green[4], 0.12),
+  colorWarning: yellow[4],
+  colorWarningMuted: withAlpha(yellow[4], 0.12),
+  colorError: red[4],
+  colorErrorMuted: withAlpha(red[4], 0.12),
+  colorInfo: blue[4],
+  colorInfoMuted: withAlpha(blue[4], 0.12),
+  // Notification badge
+  colorNotification: brand[3],
+  colorNotificationMuted: withAlpha(brand[3], 0.4),
+  // Glass morphism
+  glassBackground: withAlpha(slateGrey[12], 0.7),
+  glassBackgroundHover: withAlpha(slateGrey[12], 0.8),
+  glassBorder: "rgba(0, 0, 0, 0.06)",
+  glassBlur: "blur(24px)",
+  glassSaturate: "saturate(1.2)",
+  // Typography (same as dark)
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+  fontSizeXs: "0.7rem",
+  fontSizeSm: "0.8rem",
+  fontSizeMd: "0.9rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.25rem",
+  fontSizeXxl: "1.5rem",
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  fontWeightSemibold: "600",
+  fontWeightBold: "700",
+  lineHeightTight: "1.25",
+  lineHeightNormal: "1.5",
+  lineHeightRelaxed: "1.75",
+  // Spacing (same as dark)
+  spacingXs: "0.25rem",
+  spacingSm: "0.5rem",
+  spacingMd: "0.75rem",
+  spacingLg: "1rem",
+  spacingXl: "1.5rem",
+  // Border radius (same as dark)
+  borderRadiusSm: "6px",
+  borderRadiusMd: "10px",
+  borderRadiusLg: "14px",
+  borderRadiusXl: "20px",
+  borderRadiusFull: "9999px",
+  // Shadows (lighter for light mode)
+  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.08)",
+  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.12)",
+  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.16)",
+  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.2)",
+  // Backdrop effects
+  backdropBlur: "blur(20px)",
+  backdropSaturate: "saturate(180%)",
+  // Animation
+  transitionFast: "0.1s ease",
+  transitionNormal: "0.25s ease",
+  transitionSlow: "0.4s ease"
+};
+function getDefaultTheme(mode = "dark") {
+  return mode === "light" ? lightTheme : darkTheme;
+}
+function kebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function themeToCssVariables(theme) {
+  const variables = {};
+  for (const [key, value] of Object.entries(theme)) {
+    variables[`--sc-${kebabCase(key)}`] = value;
+  }
+  return variables;
+}
+var darkDefaults = {
+  mode: "dark",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[4],
+  borderRadius: "12px",
+  canvas: {
+    position: "right",
+    layout: "overlay",
+    background: withAlpha(slateGrey[1], 0.6),
+    blur: "blur(24px)",
+    border: "none",
+    width: "clamp(380px, 25vw, 520px)",
+    transitionDuration: "300ms",
+    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    transitionFade: "6%"
+  },
+  launcher: {
+    background: button.primary.backgroundDefault,
+    backgroundHover: button.primary.backgroundHover,
+    color: button.primary.icon,
+    size: "56px",
+    shadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`,
+    borderRadius: "9999px"
+  },
+  tile: {
+    background: withAlpha(slateGrey[1], 0.6),
+    backgroundHover: withAlpha(slateGrey[1], 0.7),
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: "14px",
+    shadow: "0 2px 12px rgba(0, 0, 0, 0.3)",
+    titleColor: text.primary,
+    textColor: text.secondary,
+    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
+  },
+  overlay: {
+    background: withAlpha(slateGrey[1], 0.6),
+    textColor: text.primary,
+    titleColor: text.primary,
+    arrowColor: withAlpha(slateGrey[1], 0.6),
+    arrowSize: "8px",
+    border: "none",
+    borderRadius: "0",
+    scrimOpacity: "0",
+    highlightRing: `2px solid ${brand[3]}`
+  },
+  notification: {
+    background: withAlpha(slateGrey[0], 0.95),
+    textColor: text.primary,
+    textSecondaryColor: text.secondary,
+    border: `1px solid ${slateGrey[5]}`,
+    borderRadius: "12px",
+    successColor: green[4],
+    warningColor: yellow[4],
+    errorColor: red[4],
+    iconBackground: withAlpha(brand[3], 0.15),
+    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[4]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[3], 0.8),
+    backgroundHover: withAlpha(slateGrey[5], 0.6),
+    border: `1px solid ${withAlpha(slateGrey[5], 0.5)}`,
+    borderRadius: "8px",
+    textColor: text.primary,
+    textSecondaryColor: text.secondary,
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: withAlpha(slateGrey[3], 0.8),
+    searchColor: text.primary,
+    chevronColor: "currentColor"
+  }
+};
+var lightDefaults = {
+  mode: "light",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[2],
+  borderRadius: "12px",
+  canvas: {
+    position: "right",
+    layout: "overlay",
+    background: withAlpha(slateGrey[12], 0.7),
+    blur: "blur(24px)",
+    border: "none",
+    width: "clamp(380px, 25vw, 520px)",
+    transitionDuration: "300ms",
+    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    transitionFade: "6%"
+  },
+  launcher: {
+    background: brand[3],
+    backgroundHover: brand[2],
+    color: "#ffffff",
+    size: "56px",
+    shadow: "0 8px 32px rgba(0, 0, 0, 0.15)",
+    borderRadius: "9999px"
+  },
+  tile: {
+    background: withAlpha(slateGrey[12], 0.7),
+    backgroundHover: withAlpha(slateGrey[12], 0.8),
+    border: "1px solid rgba(0, 0, 0, 0.06)",
+    borderRadius: "14px",
+    shadow: "0 2px 12px rgba(0, 0, 0, 0.12)",
+    titleColor: slateGrey[1],
+    textColor: slateGrey[6],
+    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
+  },
+  overlay: {
+    background: withAlpha(slateGrey[12], 0.7),
+    textColor: slateGrey[1],
+    titleColor: slateGrey[1],
+    arrowColor: withAlpha(slateGrey[12], 0.7),
+    arrowSize: "8px",
+    border: "none",
+    borderRadius: "0",
+    scrimOpacity: "0",
+    highlightRing: `2px solid ${brand[3]}`
+  },
+  notification: {
+    background: withAlpha(slateGrey[12], 0.95),
+    textColor: slateGrey[1],
+    textSecondaryColor: slateGrey[6],
+    border: `1px solid ${withAlpha(slateGrey[0], 0.12)}`,
+    borderRadius: "12px",
+    successColor: green[4],
+    warningColor: yellow[4],
+    errorColor: red[4],
+    iconBackground: withAlpha(brand[3], 0.1),
+    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[2]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[12], 0.8),
+    backgroundHover: withAlpha(slateGrey[11], 0.6),
+    border: `1px solid ${slateGrey[11]}`,
+    borderRadius: "8px",
+    textColor: slateGrey[1],
+    textSecondaryColor: slateGrey[6],
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: slateGrey[12],
+    searchColor: slateGrey[1],
+    chevronColor: "currentColor"
+  }
+};
+function mergeThemeConfig(customer) {
+  var _a, _b, _c, _d, _e;
+  const base2 = customer.mode === "light" ? lightDefaults : darkDefaults;
+  return {
+    mode: (_a = customer.mode) != null ? _a : base2.mode,
+    fontFamily: (_b = customer.fontFamily) != null ? _b : base2.fontFamily,
+    colorPrimary: (_c = customer.colorPrimary) != null ? _c : base2.colorPrimary,
+    colorPrimaryHover: (_d = customer.colorPrimaryHover) != null ? _d : base2.colorPrimaryHover,
+    borderRadius: (_e = customer.borderRadius) != null ? _e : base2.borderRadius,
+    canvas: { ...base2.canvas, ...customer.canvas },
+    launcher: { ...base2.launcher, ...customer.launcher },
+    tile: { ...base2.tile, ...customer.tile },
+    overlay: { ...base2.overlay, ...customer.overlay },
+    notification: { ...base2.notification, ...customer.notification },
+    content: { ...base2.content, ...customer.content }
+  };
+}
+function mergeThemeWithWorkspace(workspaceTheme, configTheme) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const mode = (_b = (_a = configTheme.mode) != null ? _a : workspaceTheme.mode) != null ? _b : "dark";
+  const base2 = mode === "light" ? lightDefaults : darkDefaults;
+  return {
+    mode,
+    fontFamily: (_d = (_c = configTheme.fontFamily) != null ? _c : workspaceTheme.fontFamily) != null ? _d : base2.fontFamily,
+    colorPrimary: (_f = (_e = configTheme.colorPrimary) != null ? _e : workspaceTheme.colorPrimary) != null ? _f : base2.colorPrimary,
+    colorPrimaryHover: (_h = (_g = configTheme.colorPrimaryHover) != null ? _g : workspaceTheme.colorPrimaryHover) != null ? _h : base2.colorPrimaryHover,
+    borderRadius: (_j = (_i = configTheme.borderRadius) != null ? _i : workspaceTheme.borderRadius) != null ? _j : base2.borderRadius,
+    canvas: { ...base2.canvas, ...workspaceTheme.canvas, ...configTheme.canvas },
+    launcher: { ...base2.launcher, ...workspaceTheme.launcher, ...configTheme.launcher },
+    tile: { ...base2.tile, ...workspaceTheme.tile, ...configTheme.tile },
+    overlay: { ...base2.overlay, ...workspaceTheme.overlay, ...configTheme.overlay },
+    notification: {
+      ...base2.notification,
+      ...workspaceTheme.notification,
+      ...configTheme.notification
+    },
+    content: { ...base2.content, ...workspaceTheme.content, ...configTheme.content }
+  };
+}
+var ELEMENT_SECTIONS = [
+  "canvas",
+  "launcher",
+  "tile",
+  "overlay",
+  "notification",
+  "content"
+];
+function flattenThemeConfig(config) {
+  const vars = {};
+  if (config.fontFamily) vars["--sc-font-family"] = config.fontFamily;
+  if (config.colorPrimary) vars["--sc-color-primary"] = config.colorPrimary;
+  if (config.colorPrimaryHover) vars["--sc-color-primary-hover"] = config.colorPrimaryHover;
+  if (config.borderRadius) vars["--sc-border-radius"] = config.borderRadius;
+  for (const section of ELEMENT_SECTIONS) {
+    const sectionConfig = config[section];
+    if (!sectionConfig) continue;
+    for (const [key, value] of Object.entries(sectionConfig)) {
+      if (value !== void 0) {
+        vars[`--sc-${section}-${kebabCase(key)}`] = value;
+      }
+    }
+  }
+  return vars;
+}
+
+// src/theme/ThemeProvider.tsx
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  children,
+  themeConfig,
+  workspaceTheme,
+  shadowRoot
+}) {
+  const merged = useMemo(
+    () => workspaceTheme ? mergeThemeWithWorkspace(workspaceTheme, themeConfig != null ? themeConfig : {}) : mergeThemeConfig(themeConfig != null ? themeConfig : {}),
+    [themeConfig, workspaceTheme]
+  );
+  const cssVariables = useMemo(() => flattenThemeConfig(merged), [merged]);
+  useEffect(() => {
+    if (!shadowRoot) return;
+    let styleEl = shadowRoot.querySelector("#sc-theme-vars");
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = "sc-theme-vars";
+      shadowRoot.insertBefore(styleEl, shadowRoot.firstChild);
+    }
+    const cssRules = Object.entries(cssVariables).map(([key, value2]) => `  ${key}: ${value2};`).join("\n");
+    styleEl.textContent = `:host {
+${cssRules}
+}`;
+  }, [shadowRoot, cssVariables]);
+  const value = {
+    config: merged,
+    mode: merged.mode,
+    cssVariables
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export {
+  base,
+  slateGrey,
+  red,
+  blue,
+  purple,
+  withAlpha,
+  darkTheme,
+  lightTheme,
+  getDefaultTheme,
+  themeToCssVariables,
+  darkDefaults,
+  lightDefaults,
+  mergeThemeConfig,
+  mergeThemeWithWorkspace,
+  flattenThemeConfig,
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=chunk-2IQ2PTLJ.js.map