@devicai/ui 0.38.1 → 0.40.0

package/dist/esm/components/IntegrationsModal/useIntegrations.d.ts

@@ -0,0 +1,49 @@
+import { DevicApiClient } from "../../api/client";
+import type { Integration } from "../../api/types";
+/** What identifies the end user in front of the widget. */
+export interface IntegrationsScope {
+    assistantId: string;
+    tenantId?: string;
+    subtenantId?: string;
+}
+export interface UseIntegrationsOptions extends IntegrationsScope {
+    /** API key override (falls back to the provider's). */
+    apiKey?: string;
+    /** Base URL override (falls back to the provider's). */
+    baseUrl?: string;
+    /**
+     * Fetch when this turns true, and only then. The launcher passes the drawer's
+     * open state so a widget nobody opens costs no request at all.
+     */
+    enabled?: boolean;
+}
+export interface IntegrationsState {
+    integrations: Integration[];
+    loading: boolean;
+    error: string | null;
+    /**
+     * Whether this assistant offers connected apps to its tenants at all.
+     *
+     * False before the first answer arrives, and false again if the server said
+     * no — which it does for a disabled catalogue, a missing tenant, and an
+     * assistant that does not exist, deliberately without distinguishing them.
+     * Anything that hangs off this flag stays hidden until the server has said
+     * yes, so nothing ever appears and then disappears.
+     */
+    offered: boolean;
+    /** True once a first answer (or refusal) has arrived. */
+    settled: boolean;
+    refresh: (dropCache?: boolean) => Promise<void>;
+    client: DevicApiClient | null;
+    scope: IntegrationsScope;
+}
+/**
+ * The apps an assistant offers to its tenants, with the accounts THIS tenant
+ * has connected — loaded once and shared.
+ *
+ * Both the header button and the modal need the same listing: the button to
+ * know whether it should exist and which logos to show, the modal to fill
+ * itself. Fetching it in each of them would double every round trip and let the
+ * two disagree for a moment after connecting an account.
+ */
+export declare function useIntegrations(options: UseIntegrationsOptions): IntegrationsState;

package/dist/esm/components/IntegrationsModal/useIntegrations.js

@@ -0,0 +1,104 @@
+import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { DevicApiClient } from '../../api/client.js';
+import 'react/jsx-runtime';
+import { useOptionalDevicContext } from '../../provider/DevicContext.js';
+
+/** A 4xx here means "not for you", not "something broke". */
+function isRefusal(err) {
+    const status = err?.statusCode;
+    return typeof status === "number" && status >= 400 && status < 500;
+}
+/**
+ * The apps an assistant offers to its tenants, with the accounts THIS tenant
+ * has connected — loaded once and shared.
+ *
+ * Both the header button and the modal need the same listing: the button to
+ * know whether it should exist and which logos to show, the modal to fill
+ * itself. Fetching it in each of them would double every round trip and let the
+ * two disagree for a moment after connecting an account.
+ */
+function useIntegrations(options) {
+    const { assistantId, tenantId, subtenantId, apiKey, baseUrl, enabled = true, } = options;
+    const context = useOptionalDevicContext();
+    const resolvedApiKey = apiKey || context?.apiKey;
+    const resolvedBaseUrl = baseUrl || context?.baseUrl || "https://api.devic.ai";
+    const resolvedTenantId = tenantId || context?.tenantId;
+    const resolvedSubtenantId = subtenantId || context?.subtenantId;
+    const client = useMemo(() => resolvedApiKey
+        ? new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl })
+        : null, [resolvedApiKey, resolvedBaseUrl]);
+    const scope = useMemo(() => ({
+        assistantId,
+        tenantId: resolvedTenantId || undefined,
+        subtenantId: resolvedSubtenantId || undefined,
+    }), [assistantId, resolvedTenantId, resolvedSubtenantId]);
+    const [integrations, setIntegrations] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [offered, setOffered] = useState(false);
+    const [settled, setSettled] = useState(false);
+    const refresh = useCallback(async (dropCache = false) => {
+        if (!client) {
+            setError("API key not configured");
+            setSettled(true);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            // The server caches a scope's connections briefly; after an OAuth round
+            // trip that cache is exactly one step behind, so drop it first.
+            if (dropCache) {
+                await client.refreshIntegrations(scope).catch(() => undefined);
+            }
+            const list = await client.getIntegrations(scope);
+            setIntegrations(list);
+            setOffered(list.length > 0);
+        }
+        catch (err) {
+            setIntegrations([]);
+            setOffered(false);
+            setError(err instanceof Error ? err.message : String(err));
+            if (!isRefusal(err)) {
+                // A refusal is an ordinary answer and stays quiet. A 500 or a dead
+                // network is not, and swallowing it entirely would leave an
+                // integrator with a button that never appears and no reason why.
+                console.warn("[devic-ui] could not load connected apps", err);
+            }
+        }
+        finally {
+            setLoading(false);
+            setSettled(true);
+        }
+    }, [client, scope]);
+    // Once per scope, not once per render of whatever switched it on. A new
+    // assistant or tenant is a different listing altogether, so it loads again —
+    // and the previous tenant's apps are dropped first, because showing them
+    // while the new ones arrive would name accounts that are not this user's.
+    const key = `${client ? "k" : "-"}|${scope.assistantId}|${scope.tenantId ?? ""}|${scope.subtenantId ?? ""}`;
+    const loadedKeyRef = useRef(null);
+    useEffect(() => {
+        if (!enabled || loadedKeyRef.current === key)
+            return;
+        if (loadedKeyRef.current !== null) {
+            setIntegrations([]);
+            setOffered(false);
+            setSettled(false);
+        }
+        loadedKeyRef.current = key;
+        void refresh();
+    }, [enabled, key, refresh]);
+    return {
+        integrations,
+        loading,
+        error,
+        offered,
+        settled,
+        refresh,
+        client,
+        scope,
+    };
+}
+
+export { useIntegrations };
+//# sourceMappingURL=useIntegrations.js.map

package/dist/esm/components/IntegrationsModal/useIntegrations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntegrations.js","sources":["../../../../src/components/IntegrationsModal/useIntegrations.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { DevicApiClient } from \"../../api/client\";\nimport type { DevicApiError } from \"../../api/client\";\nimport type { Integration } from \"../../api/types\";\nimport { useOptionalDevicContext } from \"../../provider\";\n\n/** What identifies the end user in front of the widget. */\nexport interface IntegrationsScope {\n  assistantId: string;\n  tenantId?: string;\n  subtenantId?: string;\n}\n\nexport interface UseIntegrationsOptions extends IntegrationsScope {\n  /** API key override (falls back to the provider's). */\n  apiKey?: string;\n  /** Base URL override (falls back to the provider's). */\n  baseUrl?: string;\n  /**\n   * Fetch when this turns true, and only then. The launcher passes the drawer's\n   * open state so a widget nobody opens costs no request at all.\n   */\n  enabled?: boolean;\n}\n\nexport interface IntegrationsState {\n  integrations: Integration[];\n  loading: boolean;\n  error: string | null;\n  /**\n   * Whether this assistant offers connected apps to its tenants at all.\n   *\n   * False before the first answer arrives, and false again if the server said\n   * no — which it does for a disabled catalogue, a missing tenant, and an\n   * assistant that does not exist, deliberately without distinguishing them.\n   * Anything that hangs off this flag stays hidden until the server has said\n   * yes, so nothing ever appears and then disappears.\n   */\n  offered: boolean;\n  /** True once a first answer (or refusal) has arrived. */\n  settled: boolean;\n  refresh: (dropCache?: boolean) => Promise<void>;\n  client: DevicApiClient | null;\n  scope: IntegrationsScope;\n}\n\n/** A 4xx here means \"not for you\", not \"something broke\". */\nfunction isRefusal(err: unknown): boolean {\n  const status = (err as DevicApiError)?.statusCode;\n  return typeof status === \"number\" && status >= 400 && status < 500;\n}\n\n/**\n * The apps an assistant offers to its tenants, with the accounts THIS tenant\n * has connected — loaded once and shared.\n *\n * Both the header button and the modal need the same listing: the button to\n * know whether it should exist and which logos to show, the modal to fill\n * itself. Fetching it in each of them would double every round trip and let the\n * two disagree for a moment after connecting an account.\n */\nexport function useIntegrations(\n  options: UseIntegrationsOptions\n): IntegrationsState {\n  const {\n    assistantId,\n    tenantId,\n    subtenantId,\n    apiKey,\n    baseUrl,\n    enabled = true,\n  } = options;\n\n  const context = useOptionalDevicContext();\n  const resolvedApiKey = apiKey || context?.apiKey;\n  const resolvedBaseUrl = baseUrl || context?.baseUrl || \"https://api.devic.ai\";\n  const resolvedTenantId = tenantId || context?.tenantId;\n  const resolvedSubtenantId = subtenantId || context?.subtenantId;\n\n  const client = useMemo(\n    () =>\n      resolvedApiKey\n        ? new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl })\n        : null,\n    [resolvedApiKey, resolvedBaseUrl]\n  );\n\n  const scope = useMemo(\n    () => ({\n      assistantId,\n      tenantId: resolvedTenantId || undefined,\n      subtenantId: resolvedSubtenantId || undefined,\n    }),\n    [assistantId, resolvedTenantId, resolvedSubtenantId]\n  );\n\n  const [integrations, setIntegrations] = useState<Integration[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [offered, setOffered] = useState(false);\n  const [settled, setSettled] = useState(false);\n\n  const refresh = useCallback(\n    async (dropCache = false) => {\n      if (!client) {\n        setError(\"API key not configured\");\n        setSettled(true);\n        return;\n      }\n      setLoading(true);\n      setError(null);\n      try {\n        // The server caches a scope's connections briefly; after an OAuth round\n        // trip that cache is exactly one step behind, so drop it first.\n        if (dropCache) {\n          await client.refreshIntegrations(scope).catch(() => undefined);\n        }\n        const list = await client.getIntegrations(scope);\n        setIntegrations(list);\n        setOffered(list.length > 0);\n      } catch (err) {\n        setIntegrations([]);\n        setOffered(false);\n        setError(err instanceof Error ? err.message : String(err));\n        if (!isRefusal(err)) {\n          // A refusal is an ordinary answer and stays quiet. A 500 or a dead\n          // network is not, and swallowing it entirely would leave an\n          // integrator with a button that never appears and no reason why.\n          console.warn(\"[devic-ui] could not load connected apps\", err);\n        }\n      } finally {\n        setLoading(false);\n        setSettled(true);\n      }\n    },\n    [client, scope]\n  );\n\n  // Once per scope, not once per render of whatever switched it on. A new\n  // assistant or tenant is a different listing altogether, so it loads again —\n  // and the previous tenant's apps are dropped first, because showing them\n  // while the new ones arrive would name accounts that are not this user's.\n  const key = `${client ? \"k\" : \"-\"}|${scope.assistantId}|${scope.tenantId ?? \"\"}|${scope.subtenantId ?? \"\"}`;\n  const loadedKeyRef = useRef<string | null>(null);\n  useEffect(() => {\n    if (!enabled || loadedKeyRef.current === key) return;\n    if (loadedKeyRef.current !== null) {\n      setIntegrations([]);\n      setOffered(false);\n      setSettled(false);\n    }\n    loadedKeyRef.current = key;\n    void refresh();\n  }, [enabled, key, refresh]);\n\n  return {\n    integrations,\n    loading,\n    error,\n    offered,\n    settled,\n    refresh,\n    client,\n    scope,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/theme.d.ts

@@ -31,3 +31,12 @@ export interface DevicTheme {
  * to the stylesheet default rather than be pinned to `undefined`.
  */
 export declare function themeVars(theme?: DevicTheme): CSSProperties;
+/**
+ * Whether this theme paints on a dark surface.
+ *
+ * Used for the one thing CSS variables cannot express: third-party app logos.
+ * Many are solid black with a transparent background, and on a dark chip they
+ * turn into a smudge — so on a dark theme the chip behind them goes light.
+ * Unknown or unreadable colours count as light, which is the default anyway.
+ */
+export declare function isDarkTheme(theme?: DevicTheme): boolean;

package/dist/esm/components/theme.js

@@ -26,6 +26,45 @@ function themeVars(theme) {
     set("--devic-text-muted", theme.mutedTextColor);
     return vars;
 }
+/** Relative luminance of a CSS colour, or null when it cannot be read. */
+function luminance(color) {
+    if (!color)
+        return null;
+    const value = color.trim().toLowerCase();
+    let r, g, b;
+    const hex = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+    if (hex) {
+        const digits = hex[1].length === 3
+            ? hex[1]
+                .split("")
+                .map((d) => d + d)
+                .join("")
+            : hex[1];
+        r = parseInt(digits.slice(0, 2), 16);
+        g = parseInt(digits.slice(2, 4), 16);
+        b = parseInt(digits.slice(4, 6), 16);
+    }
+    else {
+        const rgb = value.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/);
+        if (!rgb)
+            return null;
+        [r, g, b] = [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    }
+    // Perceived brightness, good enough to tell a dark surface from a light one.
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+/**
+ * Whether this theme paints on a dark surface.
+ *
+ * Used for the one thing CSS variables cannot express: third-party app logos.
+ * Many are solid black with a transparent background, and on a dark chip they
+ * turn into a smudge — so on a dark theme the chip behind them goes light.
+ * Unknown or unreadable colours count as light, which is the default anyway.
+ */
+function isDarkTheme(theme) {
+    const l = luminance(theme?.backgroundColor) ?? luminance(theme?.secondaryBackgroundColor);
+    return l !== null && l < 0.45;
+}
 
-export { themeVars };
+export { isDarkTheme, themeVars };
 //# sourceMappingURL=theme.js.map

package/dist/esm/components/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/components/theme.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Colours and font a component should paint itself with.\n *\n * The same names the drawer's options use, so passing them through is a\n * one-liner and an integrator who already themed the drawer has nothing new to\n * learn.\n */\nexport interface DevicTheme {\n  /** Accent: primary buttons, focus rings, links. */\n  color?: string;\n  fontFamily?: string;\n  /** Surface the component sits on. */\n  backgroundColor?: string;\n  textColor?: string;\n  /** Secondary surface: rows, chips, hover states. */\n  secondaryBackgroundColor?: string;\n  borderColor?: string;\n  /** Muted text: captions, timestamps, empty states. */\n  mutedTextColor?: string;\n}\n\n/**\n * A theme as inline CSS variables.\n *\n * Needed because the modals render through a portal into `document.body`: the\n * drawer sets these variables on its own element, and a portal is not inside\n * it, so nothing cascades down. A white dialog then opens over a dark\n * application, which is what this exists to prevent.\n *\n * Only the values actually given are emitted — an absent one must fall through\n * to the stylesheet default rather than be pinned to `undefined`.\n */\nexport function themeVars(theme?: DevicTheme): CSSProperties {\n  if (!theme) return {};\n  const vars: Record<string, string> = {};\n  const set = (name: string, value?: string) => {\n    if (value) vars[name] = value;\n  };\n\n  set(\"--devic-primary\", theme.color);\n  set(\"--devic-font-family\", theme.fontFamily);\n  set(\"--devic-bg\", theme.backgroundColor);\n  set(\"--devic-text\", theme.textColor);\n  set(\"--devic-bg-secondary\", theme.secondaryBackgroundColor);\n  set(\"--devic-border\", theme.borderColor);\n  set(\"--devic-text-muted\", theme.mutedTextColor);\n\n  return vars as CSSProperties;\n}\n"],"names":[],"mappings":"AAuBA;;;;;;;;;;AAUG;AACG,SAAU,SAAS,CAAC,KAAkB,EAAA;AAC1C,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;IACrB,MAAM,IAAI,GAA2B,EAAE;AACvC,IAAA,MAAM,GAAG,GAAG,CAAC,IAAY,EAAE,KAAc,KAAI;AAC3C,QAAA,IAAI,KAAK;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK;AAC/B,IAAA,CAAC;AAED,IAAA,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC;AACnC,IAAA,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,UAAU,CAAC;AAC5C,IAAA,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,eAAe,CAAC;AACxC,IAAA,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;AACpC,IAAA,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,wBAAwB,CAAC;AAC3D,IAAA,GAAG,CAAC,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC;AACxC,IAAA,GAAG,CAAC,oBAAoB,EAAE,KAAK,CAAC,cAAc,CAAC;AAE/C,IAAA,OAAO,IAAqB;AAC9B;;;;"}
+{"version":3,"file":"theme.js","sources":["../../../src/components/theme.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Colours and font a component should paint itself with.\n *\n * The same names the drawer's options use, so passing them through is a\n * one-liner and an integrator who already themed the drawer has nothing new to\n * learn.\n */\nexport interface DevicTheme {\n  /** Accent: primary buttons, focus rings, links. */\n  color?: string;\n  fontFamily?: string;\n  /** Surface the component sits on. */\n  backgroundColor?: string;\n  textColor?: string;\n  /** Secondary surface: rows, chips, hover states. */\n  secondaryBackgroundColor?: string;\n  borderColor?: string;\n  /** Muted text: captions, timestamps, empty states. */\n  mutedTextColor?: string;\n}\n\n/**\n * A theme as inline CSS variables.\n *\n * Needed because the modals render through a portal into `document.body`: the\n * drawer sets these variables on its own element, and a portal is not inside\n * it, so nothing cascades down. A white dialog then opens over a dark\n * application, which is what this exists to prevent.\n *\n * Only the values actually given are emitted — an absent one must fall through\n * to the stylesheet default rather than be pinned to `undefined`.\n */\nexport function themeVars(theme?: DevicTheme): CSSProperties {\n  if (!theme) return {};\n  const vars: Record<string, string> = {};\n  const set = (name: string, value?: string) => {\n    if (value) vars[name] = value;\n  };\n\n  set(\"--devic-primary\", theme.color);\n  set(\"--devic-font-family\", theme.fontFamily);\n  set(\"--devic-bg\", theme.backgroundColor);\n  set(\"--devic-text\", theme.textColor);\n  set(\"--devic-bg-secondary\", theme.secondaryBackgroundColor);\n  set(\"--devic-border\", theme.borderColor);\n  set(\"--devic-text-muted\", theme.mutedTextColor);\n\n  return vars as CSSProperties;\n}\n\n/** Relative luminance of a CSS colour, or null when it cannot be read. */\nfunction luminance(color?: string): number | null {\n  if (!color) return null;\n  const value = color.trim().toLowerCase();\n\n  let r: number, g: number, b: number;\n  const hex = value.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);\n  if (hex) {\n    const digits =\n      hex[1].length === 3\n        ? hex[1]\n            .split(\"\")\n            .map((d) => d + d)\n            .join(\"\")\n        : hex[1];\n    r = parseInt(digits.slice(0, 2), 16);\n    g = parseInt(digits.slice(2, 4), 16);\n    b = parseInt(digits.slice(4, 6), 16);\n  } else {\n    const rgb = value.match(/^rgba?\\(\\s*([\\d.]+)[\\s,]+([\\d.]+)[\\s,]+([\\d.]+)/);\n    if (!rgb) return null;\n    [r, g, b] = [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];\n  }\n\n  // Perceived brightness, good enough to tell a dark surface from a light one.\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\n/**\n * Whether this theme paints on a dark surface.\n *\n * Used for the one thing CSS variables cannot express: third-party app logos.\n * Many are solid black with a transparent background, and on a dark chip they\n * turn into a smudge — so on a dark theme the chip behind them goes light.\n * Unknown or unreadable colours count as light, which is the default anyway.\n */\nexport function isDarkTheme(theme?: DevicTheme): boolean {\n  const l = luminance(theme?.backgroundColor) ?? luminance(theme?.secondaryBackgroundColor);\n  return l !== null && l < 0.45;\n}\n"],"names":[],"mappings":"AAuBA;;;;;;;;;;AAUG;AACG,SAAU,SAAS,CAAC,KAAkB,EAAA;AAC1C,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;IACrB,MAAM,IAAI,GAA2B,EAAE;AACvC,IAAA,MAAM,GAAG,GAAG,CAAC,IAAY,EAAE,KAAc,KAAI;AAC3C,QAAA,IAAI,KAAK;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK;AAC/B,IAAA,CAAC;AAED,IAAA,GAAG,CAAC,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC;AACnC,IAAA,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,UAAU,CAAC;AAC5C,IAAA,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,eAAe,CAAC;AACxC,IAAA,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;AACpC,IAAA,GAAG,CAAC,sBAAsB,EAAE,KAAK,CAAC,wBAAwB,CAAC;AAC3D,IAAA,GAAG,CAAC,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC;AACxC,IAAA,GAAG,CAAC,oBAAoB,EAAE,KAAK,CAAC,cAAc,CAAC;AAE/C,IAAA,OAAO,IAAqB;AAC9B;AAEA;AACA,SAAS,SAAS,CAAC,KAAc,EAAA;AAC/B,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,IAAI;IACvB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;AAExC,IAAA,IAAI,CAAS,EAAE,CAAS,EAAE,CAAS;IACnC,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,8BAA8B,CAAC;IACvD,IAAI,GAAG,EAAE;QACP,MAAM,MAAM,GACV,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK;AAChB,cAAE,GAAG,CAAC,CAAC;iBACF,KAAK,CAAC,EAAE;iBACR,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC;iBAChB,IAAI,CAAC,EAAE;AACZ,cAAE,GAAG,CAAC,CAAC,CAAC;AACZ,QAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACpC,QAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACpC,QAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACtC;SAAO;QACL,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,iDAAiD,CAAC;AAC1E,QAAA,IAAI,CAAC,GAAG;AAAE,YAAA,OAAO,IAAI;AACrB,QAAA,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D;;AAGA,IAAA,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG;AAClD;AAEA;;;;;;;AAOG;AACG,SAAU,WAAW,CAAC,KAAkB,EAAA;AAC5C,IAAA,MAAM,CAAC,GAAG,SAAS,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,SAAS,CAAC,KAAK,EAAE,wBAAwB,CAAC;AACzF,IAAA,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI;AAC/B;;;;"}

package/dist/esm/index.d.ts

@@ -4,9 +4,9 @@ export { ChatDrawer, ChatMessages, ChatInput, ToolTimeline, ConversationSelector
 export type { ChatDrawerProps, ChatDrawerOptions, ChatDrawerHandle, ChatMessagesProps, ChatInputProps, CustomPromptBoxProps, MessageBubbleRenderer, MessageBubbleRendererProps, ToolTimelineProps, AllowedFileTypes, ConversationSelectorProps, HandoffSubagentWidgetProps, ReferenceChipProps, ReferenceChipVariant, SuggestedMessage, UsageBarProps, UsageBarDisplay, UsageBarData, LimitBannerProps, RecalledMemoriesWidgetProps, RecalledMemoriesRenderer, RecalledMemoriesRendererProps, } from './components/ChatDrawer';
 export { CoreMemoryModal } from './components/CoreMemoryModal';
 export type { CoreMemoryModalProps } from './components/CoreMemoryModal';
-export { IntegrationsModal } from './components/IntegrationsModal';
-export type { IntegrationsModalProps } from './components/IntegrationsModal';
-export { themeVars } from './components/theme';
+export { IntegrationsModal, IntegrationsLauncher, IntegrationsHint, IntegrationLogo, useIntegrations, } from './components/IntegrationsModal';
+export type { IntegrationsModalProps, IntegrationsLauncherProps, IntegrationsHintProps, IntegrationLogoProps, IntegrationsState, IntegrationsScope, UseIntegrationsOptions, } from './components/IntegrationsModal';
+export { themeVars, isDarkTheme } from './components/theme';
 export type { DevicTheme } from './components/theme';
 export { ThreadStateTag } from './components/ThreadStateTag';
 export type { ThreadStateTagProps, StateConfig } from './components/ThreadStateTag';

package/dist/esm/index.js

@@ -12,7 +12,11 @@ export { LimitBanner } from './components/ChatDrawer/LimitBanner.js';
 export { RecalledMemoriesWidget } from './components/ChatDrawer/RecalledMemoriesWidget.js';
 export { CoreMemoryModal } from './components/CoreMemoryModal/CoreMemoryModal.js';
 export { IntegrationsModal } from './components/IntegrationsModal/IntegrationsModal.js';
-export { themeVars } from './components/theme.js';
+export { IntegrationsLauncher } from './components/IntegrationsModal/IntegrationsLauncher.js';
+export { IntegrationsHint } from './components/IntegrationsModal/IntegrationsHint.js';
+export { IntegrationLogo } from './components/IntegrationsModal/IntegrationLogo.js';
+export { useIntegrations } from './components/IntegrationsModal/useIntegrations.js';
+export { isDarkTheme, themeVars } from './components/theme.js';
 export { ThreadStateTag } from './components/ThreadStateTag/ThreadStateTag.js';
 export { AICommandBar } from './components/AICommandBar/AICommandBar.js';
 export { formatShortcut, useAICommandBar } from './components/AICommandBar/useAICommandBar.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}