@elevasis/ui 2.41.0 → 2.42.0

package/dist/{chunk-73EWE2EW.js → chunk-EDVZ3AHA.js}

@@ -1,4 +1,4 @@
-import { GC_TIME_LONG, STALE_TIME_DEFAULT } from './chunk-6ROXVZ3L.js';
+import { GC_TIME_LONG, STALE_TIME_DEFAULT } from './chunk-YEGMSADG.js';
 import { QueryClient } from '@tanstack/react-query';
 
 function createElevasisQueryClient(options = {}) {

package/dist/chunk-GMXGDO3I.js

@@ -0,0 +1,244 @@
+import { useRouterContext } from './chunk-Q7DJKLEN.js';
+import { UnstyledButton, Box, Group, ThemeIcon, Stack, Text } from '@mantine/core';
+import { IconSearch, IconChartBar, IconTrendingUp } from '@tabler/icons-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/layout/constants.ts
+var sidebarWidth = 240;
+var sidebarCollapsedWidth = 72;
+var sidebarTransitionDuration = 200;
+var sidebarHoverDelay = 100;
+var topbarHeight = 54;
+var sidebarBottomSectionHeight = 71;
+var sidebarBottomSectionCollapsedHeight = 59;
+var sidebarItemHeight = 42;
+var sidebarItemPadding = 10;
+var sidebarItemGap = 4;
+var sidebarSectionPadding = "var(--mantine-spacing-sm)";
+var sidebarSubLinkIndent = 44;
+var sidebarIconSize = 24;
+var sidebarIconStroke = 1.6;
+var sidebarIconInnerSize = 20;
+var sidebarToggleIconSize = 20;
+var sidebarSubLinkPaddingY = 6;
+var sidebarSubLinkPaddingX = 10;
+var sidebarGroupChevronSize = 14;
+var subshellNavItemIconSize = 14;
+var activeColor = "var(--color-primary)";
+var defaultColor = "var(--color-text-subtle)";
+var hoverColor = "var(--color-text)";
+var activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
+var SubshellNavItem = ({
+  icon: Icon,
+  label,
+  isActive = false,
+  onClick,
+  description,
+  badge,
+  disabled = false,
+  href
+}) => {
+  const handleAnchorClick = disabled ? void 0 : (event) => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    onClick();
+  };
+  const sharedStyle = {
+    width: "100%",
+    padding: "var(--mantine-spacing-xs)",
+    backgroundColor: isActive ? activeBg : "transparent",
+    borderRadius: "var(--mantine-radius-default)",
+    transition: `all var(--duration-fast) var(--easing)`,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    color: "inherit",
+    textDecoration: "none",
+    display: "block"
+  };
+  const handleMouseEnter = (e) => {
+    if (!isActive && !disabled) {
+      e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
+      const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
+      textElements.forEach((el) => {
+        el.style.color = hoverColor;
+      });
+    }
+  };
+  const handleMouseLeave = (e) => {
+    if (!isActive && !disabled) {
+      e.currentTarget.style.backgroundColor = "transparent";
+      const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
+      textElements.forEach((el) => {
+        el.style.color = defaultColor;
+      });
+    }
+  };
+  const inner = /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          size: subshellNavItemIconSize,
+          style: {
+            flexShrink: 0,
+            opacity: isActive ? 1 : 0.6,
+            color: isActive ? activeColor : defaultColor
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          fw: isActive ? 600 : 400,
+          style: {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            flex: 1,
+            fontFamily: "var(--elevasis-font-family-subtitle)",
+            color: isActive ? activeColor : defaultColor,
+            transition: `color var(--duration-fast) var(--easing)`
+          },
+          "data-text-element": true,
+          children: label
+        }
+      ),
+      badge && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: badge })
+    ] }),
+    description && /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "xs",
+        c: "dimmed",
+        style: {
+          paddingLeft: "22px",
+          lineHeight: 1.2,
+          color: isActive ? activeColor : defaultColor,
+          opacity: isActive ? 0.8 : 0.6,
+          transition: `all var(--duration-fast) var(--easing)`,
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        },
+        "data-text-element": true,
+        children: description
+      }
+    )
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        component: "a",
+        href,
+        onClick: handleAnchorClick,
+        style: sharedStyle,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      style: sharedStyle,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: inner
+    }
+  );
+};
+var SubshellSidebarSection = ({
+  icon: Icon,
+  label,
+  rightSection,
+  withTopBorder = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      p: "sm",
+      style: {
+        borderTop: withTopBorder ? "1px solid var(--color-border)" : void 0,
+        borderBottom: "1px solid var(--color-border)"
+      },
+      children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            variant: "light",
+            size: sidebarIconSize,
+            style: {
+              backgroundColor: "var(--color-surface)",
+              color: "var(--color-primary)",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, stroke: sidebarIconStroke })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            c: "var(--color-text)",
+            style: {
+              fontFamily: "var(--elevasis-font-family-subtitle)",
+              flex: 1,
+              fontSize: "var(--mantine-font-size-md)",
+              fontWeight: 500,
+              lineHeight: 1.2
+            },
+            children: label
+          }
+        ),
+        rightSection
+      ] })
+    }
+  );
+};
+var SEOSidebarTop = () => {
+  return /* @__PURE__ */ jsx(SubshellSidebarSection, { icon: IconSearch, label: "SEO" });
+};
+var NAV_ITEMS = [
+  { label: "SEO Pages", to: "/seo", icon: IconChartBar, exact: true },
+  { label: "Metrics", to: "/seo/metrics", icon: IconTrendingUp, exact: false }
+];
+var SEOSidebarMiddle = () => {
+  const { currentPath, navigate } = useRouterContext();
+  return /* @__PURE__ */ jsx(Stack, { gap: "xs", p: "sm", style: { flex: 1, overflowY: "auto" }, children: NAV_ITEMS.map((item) => {
+    const isActive = item.exact ? currentPath === item.to || currentPath === `${item.to}/` : currentPath.startsWith(item.to);
+    return /* @__PURE__ */ jsx(
+      SubshellNavItem,
+      {
+        icon: item.icon,
+        label: item.label,
+        isActive,
+        href: item.to,
+        onClick: () => navigate(item.to)
+      },
+      item.to
+    );
+  }) });
+};
+var SEOSidebar = () => {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(SEOSidebarTop, {}),
+    /* @__PURE__ */ jsx(SEOSidebarMiddle, {})
+  ] });
+};
+
+// src/features/seo/manifest.ts
+var seoManifest = {
+  key: "seo",
+  systemId: "seo",
+  sidebar: SEOSidebar
+};
+
+export { SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, SubshellNavItem, SubshellSidebarSection, seoManifest, sidebarBottomSectionCollapsedHeight, sidebarBottomSectionHeight, sidebarCollapsedWidth, sidebarGroupChevronSize, sidebarHoverDelay, sidebarIconInnerSize, sidebarIconSize, sidebarIconStroke, sidebarItemGap, sidebarItemHeight, sidebarItemPadding, sidebarSectionPadding, sidebarSubLinkIndent, sidebarSubLinkPaddingX, sidebarSubLinkPaddingY, sidebarToggleIconSize, sidebarTransitionDuration, sidebarWidth, subshellNavItemIconSize, topbarHeight };

package/dist/{chunk-CXY7FMUM.js → chunk-GUKY77FJ.js}

@@ -1,11 +1,14 @@
-import { StyledMarkdown } from './chunk-3KMDHCAR.js';
-import { Stack, Textarea, Group, Text, Tooltip, ActionIcon, Paper, Card, Box, Collapse, Title, Badge, Progress, Alert, Center, Loader } from '@mantine/core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { Stack, Textarea, Group, Text, Tooltip, ActionIcon, Paper, Card, Box, Collapse, Code, Title, Badge, Progress, Alert, Center, Loader } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { IconSend, IconCheck, IconCopy, IconChevronDown, IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
 import { useClipboard } from '@mantine/hooks';
 import JSONPrettyRaw from 'react-json-pretty';
+import Markdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
+// src/components/chat/ChatSidebar.tsx
 function ChatSidebar({ isOpen, title = "Details", children, width = 320, zIndex = 10 }) {
   return /* @__PURE__ */ jsxs(
     Paper,
@@ -182,6 +185,49 @@ var ChatInputArea = memo(function ChatInputArea2({
     }
   ) });
 });
+var customCodeTheme = Object.fromEntries(
+  Object.entries(oneDark).map(([key, value]) => [
+    key,
+    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
+  ])
+);
+var defaultComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 3, c: "var(--color-primary)", mb: "xs", mt: "md", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 4, c: "var(--color-primary)", mb: "xs", mt: "sm", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem", fontSize: "var(--mantine-font-size-sm)" }, children }),
+  code: ({ className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    const codeString = String(children).replace(/\n$/, "");
+    if (match) {
+      return /* @__PURE__ */ jsx(
+        Prism,
+        {
+          style: customCodeTheme,
+          language: match[1],
+          PreTag: "div",
+          customStyle: {
+            margin: "0.5rem 0",
+            borderRadius: "var(--mantine-radius-default)",
+            fontSize: "0.8rem"
+          },
+          children: codeString
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Code, { ...props, children });
+  },
+  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, { pl: "sm", my: "xs", style: { borderLeft: "2px solid var(--color-border)" }, children }),
+  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fw: 700, children }),
+  em: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fs: "italic", children })
+};
+function StyledMarkdown({ children, components, className, style }) {
+  const mergedComponents = components ? { ...defaultComponents, ...components } : defaultComponents;
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Markdown, { components: mergedComponents, children }) });
+}
 var JSONPretty = JSONPrettyRaw;
 var jsonTheme = {
   main: "line-height:1.3;color:var(--color-text);background:transparent;overflow:auto;",
@@ -680,4 +726,4 @@ function ScrollableContainer({
   );
 }
 
-export { ChatHeader, ChatInputArea, ChatInterface, ChatSidebar, MessageBubble, ProcessingIndicator };
+export { ChatHeader, ChatInputArea, ChatInterface, ChatSidebar, MessageBubble, ProcessingIndicator, StyledMarkdown };

package/dist/{chunk-TE4P6OSJ.js → chunk-MA7YCY7C.js}

@@ -1,5 +1,5 @@
-import { APIClientError } from './chunk-RXH4D6TY.js';
 import { OrganizationContext } from './chunk-DD3CCMCZ.js';
+import { APIClientError } from './chunk-YEGMSADG.js';
 import { createContext, useContext, useMemo, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-5JYKCULK.js → chunk-NZ2F5RQ4.js}

@@ -1,5 +1,6 @@
-import { getPreset, generateShades } from './chunk-WF7CONXF.js';
+import { PRESETS, getPreset, generateShades } from './chunk-OJJK27GC.js';
 import { Tooltip, Tree, Text, TagsInput, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, MultiSelect, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Drawer, Code, Divider, Card, Button, Accordion, createTheme } from '@mantine/core';
+import { createContext, useContext, useMemo } from 'react';
 
 // src/theme/cssVariables.ts
 var TOKEN_VAR_MAP = {
@@ -417,6 +418,8 @@ var componentThemes = {
   })
   // Pagination styles are in custom.css to support :not([data-active]) selector
 };
+
+// src/theme/MantineThemeOverride.ts
 var mantineThemeOverride = createTheme({
   defaultRadius: "xs",
   fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
@@ -444,5 +447,44 @@ var mantineThemeOverride = createTheme({
   },
   components: componentThemes
 });
+var PresetsContext = createContext(PRESETS);
+var PresetsProvider = PresetsContext.Provider;
+function usePresetsContext() {
+  return useContext(PresetsContext);
+}
+var BUILT_IN_NAMES = /* @__PURE__ */ new Set([
+  "default",
+  "tactical",
+  "regal",
+  "cyber-volt",
+  "aurora",
+  "rose-gold",
+  "midnight",
+  "titanium",
+  "obsidian",
+  "honey",
+  "abyss",
+  "canopy",
+  "slate",
+  "cyber-strike",
+  "cyber-chrome",
+  "cyber-void",
+  "quarry"
+]);
+function titleCase(str) {
+  return str.replace(/(^|-)(\w)/g, (_, sep, char) => (sep ? " " : "") + char.toUpperCase());
+}
+function useAvailablePresets() {
+  const presetsMap = usePresetsContext();
+  return useMemo(() => {
+    return Object.entries(presetsMap).map(([key, preset]) => ({
+      value: key,
+      label: preset.label ?? titleCase(key),
+      description: preset.description ?? "",
+      colors: preset.colors ?? [preset.dark.primary, preset.dark.background, preset.light.background],
+      isCustom: !BUILT_IN_NAMES.has(key)
+    }));
+  }, [presetsMap]);
+}
 
-export { TOKEN_VAR_MAP, componentThemes, createCssVariablesResolver, glassBase, mantineThemeOverride };
+export { PresetsProvider, TOKEN_VAR_MAP, componentThemes, createCssVariablesResolver, glassBase, mantineThemeOverride, useAvailablePresets, usePresetsContext };