@otmc/ui 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,3 +1,20 @@
+import {
+  BACKEND_URL,
+  NotificationCenter_default,
+  ThemeProvider,
+  apiClient,
+  apiUtils,
+  copyToClipboard,
+  debug,
+  getBackendUrl,
+  instructionsApi,
+  llmApi,
+  resolveColorScheme,
+  setAccessTokenGetter,
+  setBackendUrl,
+  useTheme
+} from "./chunk-BGUL4HIW.js";
+
 // src/branding/Footer.tsx
 import { Stack, Group, Text, Anchor, Tooltip, ActionIcon } from "@mantine/core";
 import { Copyright } from "lucide-react";
@@ -107,108 +124,7 @@ import {
   Tooltip as Tooltip2
 } from "@mantine/core";
 import { Sun, Moon, Monitor, Clock } from "lucide-react";
-
-// src/contexts/ThemeProvider.tsx
-import { createContext, useContext, useEffect, useState } from "react";
-import {
-  useMantineColorScheme
-} from "@mantine/core";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ThemeContext = createContext(null);
-var useTheme = () => {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) {
-    throw new Error("useTheme must be used inside ThemeProvider");
-  }
-  return ctx;
-};
-var resolveColorScheme = (colorScheme) => {
-  if (colorScheme === "auto") {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  return colorScheme;
-};
-var resolveTimeBasedTheme = (settings) => {
-  const now = /* @__PURE__ */ new Date();
-  const minutes = now.getHours() * 60 + now.getMinutes();
-  const [lh, lm] = settings.lightStartTime.split(":").map(Number);
-  const [dh, dm] = settings.darkStartTime.split(":").map(Number);
-  const light = lh * 60 + lm;
-  const dark = dh * 60 + dm;
-  return light < dark ? minutes >= light && minutes < dark ? "light" : "dark" : minutes >= light || minutes < dark ? "light" : "dark";
-};
-var resolveAutoScheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-var ThemeProvider = ({
-  children,
-  defaultTheme = "auto",
-  defaultTimeBasedSettings = {
-    lightStartTime: "07:00",
-    darkStartTime: "19:00"
-  },
-  storagePrefix = ""
-}) => {
-  const themeStorageKey = `${storagePrefix}theme`;
-  const timeStorageKey = `${storagePrefix}time-theme`;
-  const { colorScheme, setColorScheme } = useMantineColorScheme();
-  const [theme, setThemeState] = useState(
-    () => localStorage.getItem(themeStorageKey) ?? defaultTheme
-  );
-  const [timeBasedSettings, setTimeBasedSettings] = useState(
-    () => JSON.parse(localStorage.getItem(timeStorageKey) || "null") ?? defaultTimeBasedSettings
-  );
-  const handleSetTimeBasedSettings = (settings) => {
-    setTimeBasedSettings(settings);
-    localStorage.setItem(timeStorageKey, JSON.stringify(settings));
-    if (theme === "time-based") {
-      applyTheme("time-based");
-    }
-  };
-  const applyTheme = (mode) => {
-    let scheme;
-    switch (mode) {
-      case "light":
-      case "dark":
-      case "auto":
-        scheme = mode;
-        break;
-      case "time-based":
-        scheme = resolveTimeBasedTheme(timeBasedSettings);
-        break;
-      default:
-        scheme = "auto";
-    }
-    setColorScheme(scheme);
-  };
-  useEffect(() => {
-    applyTheme(theme);
-  }, [theme, timeBasedSettings]);
-  const setTheme = (mode) => {
-    setThemeState(mode);
-    localStorage.setItem(themeStorageKey, mode);
-    applyTheme(mode);
-  };
-  const toggleTheme = () => {
-    setTheme(colorScheme === "dark" ? "light" : "dark");
-  };
-  const currentTheme = theme === "time-based" ? resolveTimeBasedTheme(timeBasedSettings) : colorScheme === "auto" ? resolveAutoScheme() : colorScheme;
-  return /* @__PURE__ */ jsx2(
-    ThemeContext.Provider,
-    {
-      value: {
-        theme,
-        currentTheme,
-        setTheme,
-        toggleTheme,
-        timeBasedSettings,
-        setTimeBasedSettings: handleSetTimeBasedSettings
-      },
-      children
-    }
-  );
-};
-
-// src/components/ThemeMenu.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_LABELS = {
   tooltip: "Ch\u1EBF \u0111\u1ED9 giao di\u1EC7n",
   title: "Ch\u1EBF \u0111\u1ED9 giao di\u1EC7n",
@@ -218,10 +134,10 @@ var DEFAULT_LABELS = {
   timeBased: "Theo th\u1EDDi gian"
 };
 var MODE_ICONS = {
-  light: /* @__PURE__ */ jsx3(Sun, { size: 16 }),
-  dark: /* @__PURE__ */ jsx3(Moon, { size: 16 }),
-  auto: /* @__PURE__ */ jsx3(Monitor, { size: 16 }),
-  "time-based": /* @__PURE__ */ jsx3(Clock, { size: 16 })
+  light: /* @__PURE__ */ jsx2(Sun, { size: 16 }),
+  dark: /* @__PURE__ */ jsx2(Moon, { size: 16 }),
+  auto: /* @__PURE__ */ jsx2(Monitor, { size: 16 }),
+  "time-based": /* @__PURE__ */ jsx2(Clock, { size: 16 })
 };
 function ThemeMenu({
   modes = ["light", "dark", "auto", "time-based"],
@@ -234,9 +150,9 @@ function ThemeMenu({
   const text = { ...DEFAULT_LABELS, ...labels };
   const isDark = currentTheme === "dark";
   const activeColor = isDark ? "yellow.8" : "blue.8";
-  const triggerIcon = theme === "light" ? /* @__PURE__ */ jsx3(Sun, { size: iconSize, strokeWidth: 2 }) : theme === "dark" ? /* @__PURE__ */ jsx3(Moon, { size: iconSize, strokeWidth: 2 }) : theme === "auto" ? /* @__PURE__ */ jsx3(Monitor, { size: iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsx3(Clock, { size: iconSize, strokeWidth: 2 });
+  const triggerIcon = theme === "light" ? /* @__PURE__ */ jsx2(Sun, { size: iconSize, strokeWidth: 2 }) : theme === "dark" ? /* @__PURE__ */ jsx2(Moon, { size: iconSize, strokeWidth: 2 }) : theme === "auto" ? /* @__PURE__ */ jsx2(Monitor, { size: iconSize, strokeWidth: 2 }) : /* @__PURE__ */ jsx2(Clock, { size: iconSize, strokeWidth: 2 });
   return /* @__PURE__ */ jsxs2(Menu, { shadow: "md", width: 200, position: "bottom-end", ...menuProps, children: [
-    /* @__PURE__ */ jsx3(Menu.Target, { children: /* @__PURE__ */ jsx3(Tooltip2, { label: text.tooltip, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(Menu.Target, { children: /* @__PURE__ */ jsx2(Tooltip2, { label: text.tooltip, position: "bottom", withArrow: true, children: /* @__PURE__ */ jsx2(
       ActionIcon2,
       {
         variant: "subtle",
@@ -250,8 +166,8 @@ function ThemeMenu({
       }
     ) }) }),
     /* @__PURE__ */ jsxs2(Menu.Dropdown, { style: { borderRadius: "11px" }, children: [
-      /* @__PURE__ */ jsx3(Menu.Label, { children: text.title }),
-      modes.map((mode) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx2(Menu.Label, { children: text.title }),
+      modes.map((mode) => /* @__PURE__ */ jsx2(
         Menu.Item,
         {
           leftSection: MODE_ICONS[mode],
@@ -286,7 +202,7 @@ import {
   IconPalette,
   IconSun
 } from "@tabler/icons-react";
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_LABELS2 = {
   title: "Appearance",
   subtitle: "Control how the application looks and feels",
@@ -302,10 +218,10 @@ var DEFAULT_LABELS2 = {
   timeBased: "Time-based"
 };
 var MODE_ICONS2 = {
-  light: /* @__PURE__ */ jsx4(IconSun, { size: 16 }),
-  dark: /* @__PURE__ */ jsx4(IconMoon, { size: 16 }),
-  auto: /* @__PURE__ */ jsx4(IconDeviceLaptop, { size: 16 }),
-  "time-based": /* @__PURE__ */ jsx4(IconClock, { size: 16 })
+  light: /* @__PURE__ */ jsx3(IconSun, { size: 16 }),
+  dark: /* @__PURE__ */ jsx3(IconMoon, { size: 16 }),
+  auto: /* @__PURE__ */ jsx3(IconDeviceLaptop, { size: 16 }),
+  "time-based": /* @__PURE__ */ jsx3(IconClock, { size: 16 })
 };
 var MODE_ORDER = ["light", "dark", "auto", "time-based"];
 function ThemeSetting({
@@ -324,7 +240,7 @@ function ThemeSetting({
   const isTimeBased = theme === "time-based";
   const isDark = currentTheme === "dark";
   const showTimeBased = modes.includes("time-based");
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     Card,
     {
       withBorder: true,
@@ -336,15 +252,15 @@ function ThemeSetting({
       children: /* @__PURE__ */ jsxs3(Stack2, { gap: "lg", style: { flex: 1 }, children: [
         /* @__PURE__ */ jsxs3(Box, { children: [
           /* @__PURE__ */ jsxs3(Group2, { gap: "xs", children: [
-            /* @__PURE__ */ jsx4(ThemeIcon, { variant: "subtle", color: "blue.8", size: "md", radius: "md", children: /* @__PURE__ */ jsx4(IconPalette, { size: 25 }) }),
-            /* @__PURE__ */ jsx4(Title, { order: 4, children: text.title })
+            /* @__PURE__ */ jsx3(ThemeIcon, { variant: "subtle", color: "blue.8", size: "md", radius: "md", children: /* @__PURE__ */ jsx3(IconPalette, { size: 25 }) }),
+            /* @__PURE__ */ jsx3(Title, { order: 4, children: text.title })
           ] }),
-          /* @__PURE__ */ jsx4(Text2, { size: "sm", c: "dimmed", children: text.subtitle })
+          /* @__PURE__ */ jsx3(Text2, { size: "sm", c: "dimmed", children: text.subtitle })
         ] }),
-        /* @__PURE__ */ jsx4(Divider, {}),
+        /* @__PURE__ */ jsx3(Divider, {}),
         /* @__PURE__ */ jsxs3(Box, { children: [
-          /* @__PURE__ */ jsx4(Text2, { fw: 500, mb: 6, children: text.themeMode }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx3(Text2, { fw: 500, mb: 6, children: text.themeMode }),
+          /* @__PURE__ */ jsx3(
             SegmentedControl,
             {
               fullWidth: true,
@@ -358,21 +274,21 @@ function ThemeSetting({
                   value: mode,
                   label: /* @__PURE__ */ jsxs3(Group2, { gap: 6, children: [
                     MODE_ICONS2[mode],
-                    /* @__PURE__ */ jsx4("span", { children: mode === "light" ? text.light : mode === "dark" ? text.dark : mode === "auto" ? text.system : text.timeBased })
+                    /* @__PURE__ */ jsx3("span", { children: mode === "light" ? text.light : mode === "dark" ? text.dark : mode === "auto" ? text.system : text.timeBased })
                   ] })
                 })
               )
             }
           ),
-          /* @__PURE__ */ jsx4(Text2, { size: "xs", c: "dimmed", mt: "xs", children: text.themeModeHint }),
+          /* @__PURE__ */ jsx3(Text2, { size: "xs", c: "dimmed", mt: "xs", children: text.themeModeHint }),
           /* @__PURE__ */ jsxs3(Text2, { size: "xs", mt: 4, children: [
             text.currentlyActive,
             " ",
-            /* @__PURE__ */ jsx4("b", { children: isDark ? text.dark : text.light })
+            /* @__PURE__ */ jsx3("b", { children: isDark ? text.dark : text.light })
           ] })
         ] }),
         showTimeBased && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx4(Divider, {}),
+          /* @__PURE__ */ jsx3(Divider, {}),
           /* @__PURE__ */ jsxs3(
             Box,
             {
@@ -383,13 +299,13 @@ function ThemeSetting({
               },
               children: [
                 /* @__PURE__ */ jsxs3(Group2, { gap: 6, mb: 6, children: [
-                  /* @__PURE__ */ jsx4(IconClock, { size: 16 }),
-                  /* @__PURE__ */ jsx4(Text2, { fw: 500, children: text.timeBasedSettings })
+                  /* @__PURE__ */ jsx3(IconClock, { size: 16 }),
+                  /* @__PURE__ */ jsx3(Text2, { fw: 500, children: text.timeBasedSettings })
                 ] }),
                 /* @__PURE__ */ jsxs3(Group2, { grow: true, children: [
                   /* @__PURE__ */ jsxs3(Box, { children: [
-                    /* @__PURE__ */ jsx4(Text2, { size: "sm", mb: 4, children: text.lightStartTime }),
-                    /* @__PURE__ */ jsx4(
+                    /* @__PURE__ */ jsx3(Text2, { size: "sm", mb: 4, children: text.lightStartTime }),
+                    /* @__PURE__ */ jsx3(
                       TimeInput,
                       {
                         withSeconds: false,
@@ -403,8 +319,8 @@ function ThemeSetting({
                     )
                   ] }),
                   /* @__PURE__ */ jsxs3(Box, { children: [
-                    /* @__PURE__ */ jsx4(Text2, { size: "sm", mb: 4, children: text.darkStartTime }),
-                    /* @__PURE__ */ jsx4(
+                    /* @__PURE__ */ jsx3(Text2, { size: "sm", mb: 4, children: text.darkStartTime }),
+                    /* @__PURE__ */ jsx3(
                       TimeInput,
                       {
                         withSeconds: false,
@@ -425,7 +341,7 @@ function ThemeSetting({
                   " \u2192",
                   " ",
                   timeBasedSettings.darkStartTime,
-                  /* @__PURE__ */ jsx4("br", {}),
+                  /* @__PURE__ */ jsx3("br", {}),
                   text.dark,
                   ": ",
                   timeBasedSettings.darkStartTime,
@@ -443,7 +359,7 @@ function ThemeSetting({
 }
 
 // src/modals/Information.tsx
-import { useState as useState2 } from "react";
+import { useState } from "react";
 import {
   Modal,
   Stack as Stack3,
@@ -471,31 +387,6 @@ import {
   User
 } from "lucide-react";
 
-// src/utils/commonUtils.ts
-var copyToClipboard = async (text) => {
-  try {
-    if (navigator.clipboard && window.isSecureContext) {
-      await navigator.clipboard.writeText(text);
-      return true;
-    }
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.position = "fixed";
-    textarea.style.left = "-9999px";
-    textarea.style.top = "-9999px";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.focus();
-    textarea.select();
-    const success = document.execCommand("copy");
-    document.body.removeChild(textarea);
-    return success;
-  } catch (err) {
-    console.error("Failed to copy to clipboard:", err);
-    return false;
-  }
-};
-
 // src/utils/timeUtils.ts
 function normalizeDate(dateInput) {
   if (dateInput instanceof Date) {
@@ -609,10 +500,10 @@ function formatHumanDate(date, options) {
 }
 
 // src/modals/Information.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_TITLE = /* @__PURE__ */ jsxs4(Group3, { gap: "xs", wrap: "nowrap", children: [
-  /* @__PURE__ */ jsx5(Cpu, { size: 20 }),
-  /* @__PURE__ */ jsx5("span", { children: "System Information" })
+  /* @__PURE__ */ jsx4(Cpu, { size: 20 }),
+  /* @__PURE__ */ jsx4("span", { children: "System Information" })
 ] });
 function InformationContent({ info }) {
   const colorScheme = useComputedColorScheme();
@@ -620,31 +511,31 @@ function InformationContent({ info }) {
   const versionType = info.versionType ?? DEFAULT_VERSION_TYPE;
   const cards = [
     {
-      icon: /* @__PURE__ */ jsx5(User, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(User, { size: 18 }),
       label: "Author",
       value: author,
       color: "blue"
     },
     {
-      icon: /* @__PURE__ */ jsx5(Award, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(Award, { size: 18 }),
       label: "License",
       value: info.license ?? DEFAULT_LICENSE,
       color: "orange"
     },
     {
-      icon: /* @__PURE__ */ jsx5(MapPin, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(MapPin, { size: 18 }),
       label: "Location",
       value: info.location ?? DEFAULT_LOCATION,
       color: "teal"
     },
     {
-      icon: /* @__PURE__ */ jsx5(Tag, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(Tag, { size: 18 }),
       label: "Version Type",
       value: versionType,
       color: "red"
     },
     {
-      icon: /* @__PURE__ */ jsx5(Calendar, { size: 18 }),
+      icon: /* @__PURE__ */ jsx4(Calendar, { size: 18 }),
       label: "Build Time",
       value: info.buildTime !== void 0 ? formatAbsoluteAndRelativeTime(info.buildTime) : UNKNOWN,
       color: "green"
@@ -655,8 +546,8 @@ function InformationContent({ info }) {
     /* @__PURE__ */ jsxs4(Stack3, { gap: "xs", align: "center", children: [
       info.logo,
       /* @__PURE__ */ jsxs4(Stack3, { gap: 2, align: "center", children: [
-        /* @__PURE__ */ jsx5(Title2, { order: 2, children: info.name }),
-        info.tagline && /* @__PURE__ */ jsx5(Text3, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
+        /* @__PURE__ */ jsx4(Title2, { order: 2, children: info.name }),
+        info.tagline && /* @__PURE__ */ jsx4(Text3, { size: "sm", c: "dimmed", w: 600, ta: "center", children: info.tagline })
       ] }),
       /* @__PURE__ */ jsxs4(Group3, { gap: "xs", children: [
         info.version && /* @__PURE__ */ jsxs4(
@@ -691,19 +582,19 @@ function InformationContent({ info }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx5(Divider2, { label: "System Information", labelPosition: "center" }),
+    /* @__PURE__ */ jsx4(Divider2, { label: "System Information", labelPosition: "center" }),
     /* @__PURE__ */ jsxs4(SimpleGrid, { cols: { base: 1, sm: 2 }, children: [
-      cards.map((card) => /* @__PURE__ */ jsx5(
+      cards.map((card) => /* @__PURE__ */ jsx4(
         InfoCard,
         {
-          icon: card.icon ?? /* @__PURE__ */ jsx5(Award, { size: 18 }),
+          icon: card.icon ?? /* @__PURE__ */ jsx4(Award, { size: 18 }),
           label: card.label,
           value: card.value,
           color: card.color ?? "gray"
         },
         card.label
       )),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4(
         Paper,
         {
           withBorder: true,
@@ -712,18 +603,18 @@ function InformationContent({ info }) {
           bg: colorScheme === "dark" ? "gray.9" : "gray.0",
           children: /* @__PURE__ */ jsxs4(Group3, { justify: "space-between", wrap: "nowrap", children: [
             /* @__PURE__ */ jsxs4(Group3, { gap: "sm", flex: 1, children: [
-              /* @__PURE__ */ jsx5(ThemeIcon2, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ jsx5(Hash, { size: 18 }) }),
+              /* @__PURE__ */ jsx4(ThemeIcon2, { variant: "light", color: "yellow", size: "lg", radius: "14px", children: /* @__PURE__ */ jsx4(Hash, { size: 18 }) }),
               /* @__PURE__ */ jsxs4(Stack3, { gap: 2, children: [
-                /* @__PURE__ */ jsx5(Text3, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
-                /* @__PURE__ */ jsx5(Text3, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
+                /* @__PURE__ */ jsx4(Text3, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: "Build ID" }),
+                /* @__PURE__ */ jsx4(Text3, { size: "sm", fw: 500, truncate: true, children: info.buildId ?? UNKNOWN })
               ] })
             ] }),
-            info.buildId && /* @__PURE__ */ jsx5(CopyBuildIdButton, { buildId: info.buildId })
+            info.buildId && /* @__PURE__ */ jsx4(CopyBuildIdButton, { buildId: info.buildId })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(
       Footer,
       {
         copyright: info.copyright,
@@ -740,7 +631,7 @@ function InformationModal({
   info,
   title = DEFAULT_TITLE
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     Modal,
     {
       opened,
@@ -760,12 +651,12 @@ function InformationModal({
         }
       },
       title,
-      children: /* @__PURE__ */ jsx5(InformationContent, { info })
+      children: /* @__PURE__ */ jsx4(InformationContent, { info })
     }
   );
 }
 function CopyBuildIdButton({ buildId }) {
-  const [copied, setCopied] = useState2(false);
+  const [copied, setCopied] = useState(false);
   const handleCopy = async () => {
     const success = await copyToClipboard(buildId);
     if (success) {
@@ -773,13 +664,13 @@ function CopyBuildIdButton({ buildId }) {
       setTimeout(() => setCopied(false), 2e3);
     }
   };
-  return /* @__PURE__ */ jsx5(Tooltip3, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(Tooltip3, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx4(
     ActionIcon3,
     {
       variant: "subtle",
       color: copied ? "teal" : "gray",
       onClick: handleCopy,
-      children: copied ? /* @__PURE__ */ jsx5(Check, { size: 16 }) : /* @__PURE__ */ jsx5(Copy, { size: 16 })
+      children: copied ? /* @__PURE__ */ jsx4(Check, { size: 16 }) : /* @__PURE__ */ jsx4(Copy, { size: 16 })
     }
   ) });
 }
@@ -790,11 +681,11 @@ function InfoCard({
   color
 }) {
   const colorScheme = useComputedColorScheme();
-  return /* @__PURE__ */ jsx5(Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ jsxs4(Group3, { gap: "sm", align: "flex-start", children: [
-    /* @__PURE__ */ jsx5(ThemeIcon2, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
+  return /* @__PURE__ */ jsx4(Paper, { withBorder: true, p: "md", radius: "18px", h: "100%", bg: colorScheme === "dark" ? "gray.9" : "gray.0", children: /* @__PURE__ */ jsxs4(Group3, { gap: "sm", align: "flex-start", children: [
+    /* @__PURE__ */ jsx4(ThemeIcon2, { color, variant: "light", size: "lg", radius: "14px", children: icon }),
     /* @__PURE__ */ jsxs4(Stack3, { gap: 2, flex: 1, children: [
-      /* @__PURE__ */ jsx5(Text3, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
-      /* @__PURE__ */ jsx5(Text3, { size: "sm", fw: 500, lineClamp: 1, children: value })
+      /* @__PURE__ */ jsx4(Text3, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", children: label }),
+      /* @__PURE__ */ jsx4(Text3, { size: "sm", fw: 500, lineClamp: 1, children: value })
     ] })
   ] }) });
 }
@@ -817,14 +708,14 @@ import {
   IconSearch,
   IconFileOff
 } from "@tabler/icons-react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function NotFound({
   path,
   onSearchClick,
   onHomeClick
 }) {
   const currentPath = path || (typeof window !== "undefined" ? window.location.pathname : "/404");
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     Box2,
     {
       style: {
@@ -833,8 +724,8 @@ function NotFound({
         alignItems: "center",
         background: "radial-gradient(circle at top left, rgba(34, 139, 230, 0.15), transparent 45%), radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.12), transparent 45%), var(--mantine-color-body)"
       },
-      children: /* @__PURE__ */ jsx6(Container, { size: "xl", py: 80, children: /* @__PURE__ */ jsxs5(Paper2, { radius: "xl", p: 48, withBorder: true, style: { borderColor: "var(--mantine-color-default-border)", textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(Container, { size: "xl", py: 80, children: /* @__PURE__ */ jsxs5(Paper2, { radius: "xl", p: 48, withBorder: true, style: { borderColor: "var(--mantine-color-default-border)", textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx5(
           Box2,
           {
             mx: "auto",
@@ -849,10 +740,10 @@ function NotFound({
               background: "linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-cyan-6))",
               boxShadow: "0 12px 32px rgba(34, 139, 230, 0.35)"
             },
-            children: /* @__PURE__ */ jsx6(IconFileOff, { size: 44, stroke: 1.5, color: "white" })
+            children: /* @__PURE__ */ jsx5(IconFileOff, { size: 44, stroke: 1.5, color: "white" })
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           Text4,
           {
             fz: { base: 72, sm: 100 },
@@ -863,33 +754,33 @@ function NotFound({
             children: "404"
           }
         ),
-        /* @__PURE__ */ jsx6(Badge2, { variant: "light", color: "blue", size: "lg", mb: "xs", children: "NOT FOUND" }),
-        /* @__PURE__ */ jsx6(Title3, { order: 2, mt: "sm", mb: "xs", children: "Trang kh\xF4ng t\u1ED3n t\u1EA1i" }),
-        /* @__PURE__ */ jsx6(Text4, { c: "dimmed", size: "sm", maw: 440, mx: "auto", children: "Trang ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn b\u1EA1n truy c\u1EADp kh\xF4ng t\u1ED3n t\u1EA1i ho\u1EB7c \u0111\xE3 \u0111\u01B0\u1EE3c di chuy\u1EC3n. Vui l\xF2ng ki\u1EC3m tra l\u1EA1i \u0111\u01B0\u1EDDng d\u1EABn ho\u1EB7c quay v\u1EC1 trang ch\u1EE7." }),
-        /* @__PURE__ */ jsx6(Box2, { mt: "lg", children: /* @__PURE__ */ jsx6(Code, { color: "blue", variant: "light", px: "md", py: 6, children: currentPath }) }),
+        /* @__PURE__ */ jsx5(Badge2, { variant: "light", color: "blue", size: "lg", mb: "xs", children: "NOT FOUND" }),
+        /* @__PURE__ */ jsx5(Title3, { order: 2, mt: "sm", mb: "xs", children: "Trang kh\xF4ng t\u1ED3n t\u1EA1i" }),
+        /* @__PURE__ */ jsx5(Text4, { c: "dimmed", size: "sm", maw: 440, mx: "auto", children: "Trang ho\u1EB7c \u0111\u01B0\u1EDDng d\u1EABn b\u1EA1n truy c\u1EADp kh\xF4ng t\u1ED3n t\u1EA1i ho\u1EB7c \u0111\xE3 \u0111\u01B0\u1EE3c di chuy\u1EC3n. Vui l\xF2ng ki\u1EC3m tra l\u1EA1i \u0111\u01B0\u1EDDng d\u1EABn ho\u1EB7c quay v\u1EC1 trang ch\u1EE7." }),
+        /* @__PURE__ */ jsx5(Box2, { mt: "lg", children: /* @__PURE__ */ jsx5(Code, { color: "blue", variant: "light", px: "md", py: 6, children: currentPath }) }),
         /* @__PURE__ */ jsxs5(Group4, { gap: "sm", mt: "xl", justify: "center", children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             Button,
             {
               variant: "light",
-              leftSection: /* @__PURE__ */ jsx6(IconArrowLeft, { size: 16 }),
+              leftSection: /* @__PURE__ */ jsx5(IconArrowLeft, { size: 16 }),
               onClick: () => window.history.back(),
               children: "Quay l\u1EA1i"
             }
           ),
-          onSearchClick && /* @__PURE__ */ jsx6(
+          onSearchClick && /* @__PURE__ */ jsx5(
             Button,
             {
               variant: "outline",
-              leftSection: /* @__PURE__ */ jsx6(IconSearch, { size: 16 }),
+              leftSection: /* @__PURE__ */ jsx5(IconSearch, { size: 16 }),
               onClick: onSearchClick,
               children: "T\xECm Docs"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             Button,
             {
-              leftSection: /* @__PURE__ */ jsx6(IconHome, { size: 16 }),
+              leftSection: /* @__PURE__ */ jsx5(IconHome, { size: 16 }),
               onClick: onHomeClick || (() => window.location.href = "/"),
               children: "Trang ch\u1EE7"
             }
@@ -900,6 +791,7 @@ function NotFound({
   );
 }
 export {
+  BACKEND_URL,
   DEFAULT_AUTHOR,
   DEFAULT_AUTHOR_HREF,
   DEFAULT_COPYRIGHT,
@@ -914,15 +806,24 @@ export {
   ThemeProvider,
   ThemeSetting,
   UNKNOWN,
+  apiClient,
+  apiUtils,
   calculateRemainingTime,
   copyToClipboard,
+  debug,
   formatAbsolute,
   formatAbsoluteAndRelativeTime,
   formatHumanDate,
   formatRelativeTime,
+  getBackendUrl,
+  instructionsApi,
+  llmApi,
   normalizeDate,
+  NotificationCenter_default as notificationCenter,
   pad,
   resolveColorScheme,
+  setAccessTokenGetter,
+  setBackendUrl,
   useTheme
 };
 //# sourceMappingURL=index.js.map