@hubspot/app-connect-sdk 1.0.0-alpha.1

package/dist/browser/index.d.ts

@@ -0,0 +1,465 @@
+import { i as AppConnectStatus, n as AppConnectController, r as AppConnectState, t as AppConnectBrowserConfig } from "./types-rTQw6A54.js";
+
+//#region src/shared/logger.d.ts
+/**
+ * Pluggable logger contract used by the SDK on both the browser and
+ * server. Consumers can pass `console`-like loggers, structured
+ * loggers (pino / winston / etc.) or no-op stubs in tests.
+ */
+interface Logger {
+  debug: (message: string, ...args: unknown[]) => void;
+  info: (message: string, ...args: unknown[]) => void;
+  warn: (message: string, ...args: unknown[]) => void;
+  error: (message: string, ...args: unknown[]) => void;
+}
+/**
+ * Creates a console-backed logger that prefixes every line with the
+ * supplied `name`. Used as the default when no custom logger is
+ * provided.
+ */
+declare function createLogger(name: string): Logger;
+//#endregion
+//#region src/browser/app-connect-controller/create.d.ts
+/**
+ * Options accepted by {@link createAppConnectController}.
+ */
+interface CreateAppConnectControllerOptions {
+  /** Runtime configuration; see {@link AppConnectBrowserConfig}. */
+  config: AppConnectBrowserConfig;
+  /** Logger the controller uses for status/debug messages. */
+  logger?: Logger;
+}
+/**
+ * Creates an `AppConnectController`. Exactly one controller should be
+ * shared by the entire app — the React provider takes the controller
+ * as a prop and exposes it via context.
+ *
+ * The returned controller is inert until `start()` is called: nothing
+ * is read from session storage, no refresh timer is scheduled, and no
+ * fetches are issued. Tests can construct a controller and inspect
+ * its initial snapshot without triggering side effects.
+ */
+declare function createAppConnectController(options: CreateAppConnectControllerOptions): AppConnectController;
+//#endregion
+//#region src/browser/theme-tokens.generated.css.d.ts
+declare const themeClass: string, themeVars: {
+    border: {
+      accent: {
+        blue: {
+          default: `var(--${string})`;
+        };
+        green: {
+          default: `var(--${string})`;
+        };
+        light: {
+          orange: {
+            default: `var(--${string})`;
+          };
+        };
+        magenta: {
+          default: `var(--${string})`;
+        };
+        orange: {
+          default: `var(--${string})`;
+        };
+        purple: {
+          default: `var(--${string})`;
+        };
+        red: {
+          default: `var(--${string})`;
+        };
+        yellow: {
+          default: `var(--${string})`;
+        };
+      };
+      alert: {
+        default: `var(--${string})`;
+      };
+      brand: {
+        default: `var(--${string})`;
+      };
+      caution: {
+        default: `var(--${string})`;
+      };
+      container: {
+        default: `var(--${string})`;
+      };
+      core: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+          };
+        };
+        pressed: `var(--${string})`;
+        subtle: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+        };
+      };
+      info: {
+        default: `var(--${string})`;
+      };
+      interactive: {
+        default: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+      positive: {
+        default: `var(--${string})`;
+      };
+      primary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+      secondary: {
+        default: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+        disabled: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+      };
+      tertiary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+    };
+    fill: {
+      accent: {
+        blue: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        green: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        light: {
+          orange: {
+            default: `var(--${string})`;
+            hover: `var(--${string})`;
+            pressed: `var(--${string})`;
+            subtle: {
+              alt: `var(--${string})`;
+              default: `var(--${string})`;
+            };
+          };
+        };
+        magenta: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        neutral: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        orange: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        purple: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        red: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        teal: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+        yellow: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+          subtle: {
+            alt: `var(--${string})`;
+            default: `var(--${string})`;
+          };
+        };
+      };
+      alert: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      brand: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      caution: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      field: {
+        default: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+      info: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      positive: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      primary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+      secondary: {
+        default: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+        disabled: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+        hover: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+        pressed: {
+          alt: `var(--${string})`;
+          default: `var(--${string})`;
+        };
+      };
+      surface: {
+        default: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+        };
+        raised: `var(--${string})`;
+        recessed: {
+          default: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+        };
+      };
+      tertiary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+      transparent: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+    };
+    borderRadius: {
+      '0': `var(--${string})`;
+      '100': `var(--${string})`;
+      '200': `var(--${string})`;
+      '300': `var(--${string})`;
+      '400': `var(--${string})`;
+      'breeze-core-component-default': `var(--${string})`;
+      'breeze-textarea-default': `var(--${string})`;
+      full: `var(--${string})`;
+      'temp-future-300': `var(--${string})`;
+      'transitional-component': `var(--${string})`;
+      'transitional-container': `var(--${string})`;
+      'transitional-container-alt': `var(--${string})`;
+      'transitional-floating': `var(--${string})`;
+      'transitional-full-0': `var(--${string})`;
+      'transitional-full-3': `var(--${string})`;
+      'transitional-full-8': `var(--${string})`;
+    };
+    icon: {
+      alert: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+          };
+        };
+        pressed: `var(--${string})`;
+      };
+      core: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+          };
+        };
+        subtle: `var(--${string})`;
+      };
+      interactive: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+            hover: `var(--${string})`;
+            pressed: `var(--${string})`;
+          };
+        };
+        pressed: `var(--${string})`;
+      };
+      primary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        hover: `var(--${string})`;
+        pressed: `var(--${string})`;
+      };
+      secondary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+      tertiary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+    };
+    space: {
+      '0': `var(--${string})`;
+      '25': `var(--${string})`;
+      '50': `var(--${string})`;
+      '100': `var(--${string})`;
+      '200': `var(--${string})`;
+      '250': `var(--${string})`;
+      '300': `var(--${string})`;
+      '400': `var(--${string})`;
+      '500': `var(--${string})`;
+      '600': `var(--${string})`;
+      '700': `var(--${string})`;
+      '800': `var(--${string})`;
+      '900': `var(--${string})`;
+      '1000': `var(--${string})`;
+      '1100': `var(--${string})`;
+      '1200': `var(--${string})`;
+      '1300': `var(--${string})`;
+      '1400': `var(--${string})`;
+      '1500': `var(--${string})`;
+      '1600': `var(--${string})`;
+      '1700': `var(--${string})`;
+    };
+    specialty: {
+      scrim: {
+        alt: `var(--${string})`;
+        default: `var(--${string})`;
+      };
+    };
+    text: {
+      alert: {
+        default: `var(--${string})`;
+        hover: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+          };
+        };
+        pressed: `var(--${string})`;
+      };
+      core: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        on: {
+          fill: {
+            default: `var(--${string})`;
+          };
+        };
+        subtle: `var(--${string})`;
+      };
+      interactive: {
+        default: {
+          default: `var(--${string})`;
+          disabled: `var(--${string})`;
+          hover: `var(--${string})`;
+          pressed: `var(--${string})`;
+        };
+        on: {
+          fill: {
+            default: `var(--${string})`;
+            hover: `var(--${string})`;
+            pressed: `var(--${string})`;
+          };
+        };
+      };
+      primary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+        subtle: `var(--${string})`;
+      };
+      secondary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+      tertiary: {
+        default: `var(--${string})`;
+        disabled: `var(--${string})`;
+      };
+    };
+  };
+//#endregion
+export { type AppConnectBrowserConfig, type AppConnectController, type AppConnectState, type AppConnectStatus, type CreateAppConnectControllerOptions, type Logger, createAppConnectController, createLogger, themeClass, themeVars };
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.js

@@ -0,0 +1,3 @@
+import { n as createLogger, t as createAppConnectController } from "./create-vctOhpX9.js";
+import { n as themeVars, t as themeClass } from "./theme.css-CJbxi5hC.js";
+export { createAppConnectController, createLogger, themeClass, themeVars };

package/dist/browser/react/lovable.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/browser/react/lovable/LovableHubSpotAppConnect.d.ts
+/**
+ * Props accepted by {@link LovableHubSpotAppConnect}.
+ */
+interface LovableHubSpotAppConnectProps {
+  /** Title text rendered in the standard SDK header. */
+  title: string;
+  /** Content rendered when the controller is in the `connected` state. */
+  connected: ReactNode;
+  /**
+   * Description text rendered inside the SDK-owned disconnected card,
+   * above the primary "Connect to HubSpot" button.
+   */
+  disconnectedMessage: ReactNode;
+}
+/**
+ * Lovable-preset variant of `HubSpotAppConnect`. The controller is
+ * created once at module load with `hubSpotConnectBaseUrl` fixed to
+ * `/functions/v1/hubspot-connect` — the path that
+ * `@hubspot/app-connect-sdk/server/lovable` mounts. Callers that need
+ * a custom base URL or logger should use the canonical
+ * `HubSpotAppConnect` from `@hubspot/app-connect-sdk/react` instead.
+ */
+declare function LovableHubSpotAppConnect(props: LovableHubSpotAppConnectProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LovableHubSpotAppConnect, type LovableHubSpotAppConnectProps };
+//# sourceMappingURL=lovable.d.ts.map

package/dist/browser/react/lovable.js

@@ -0,0 +1,23 @@
+import { t as createAppConnectController } from "../create-vctOhpX9.js";
+import { t as HubSpotAppConnect } from "../HubSpotAppConnect-BW45gyDs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/browser/react/lovable/LovableHubSpotAppConnect.tsx
+const controller = createAppConnectController({ config: { hubSpotConnectBaseUrl: "/functions/v1/hubspot-connect" } });
+/**
+* Lovable-preset variant of `HubSpotAppConnect`. The controller is
+* created once at module load with `hubSpotConnectBaseUrl` fixed to
+* `/functions/v1/hubspot-connect` — the path that
+* `@hubspot/app-connect-sdk/server/lovable` mounts. Callers that need
+* a custom base URL or logger should use the canonical
+* `HubSpotAppConnect` from `@hubspot/app-connect-sdk/react` instead.
+*/
+function LovableHubSpotAppConnect(props) {
+	return /* @__PURE__ */ jsx(HubSpotAppConnect, {
+		...props,
+		controller
+	});
+}
+//#endregion
+export { LovableHubSpotAppConnect };
+
+//# sourceMappingURL=lovable.js.map

package/dist/browser/react/lovable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lovable.js","names":[],"sources":["../../../src/browser/react/lovable/LovableHubSpotAppConnect.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { createAppConnectController } from '../../app-connect-controller/create.ts';\nimport { HubSpotAppConnect } from '../components/HubSpotAppConnect/HubSpotAppConnect.tsx';\n\nconst HUBSPOT_CONNECT_BASE_URL = '/functions/v1/hubspot-connect';\n\nconst controller = createAppConnectController({\n  config: { hubSpotConnectBaseUrl: HUBSPOT_CONNECT_BASE_URL },\n});\n\n/**\n * Props accepted by {@link LovableHubSpotAppConnect}.\n */\nexport interface LovableHubSpotAppConnectProps {\n  /** Title text rendered in the standard SDK header. */\n  title: string;\n  /** Content rendered when the controller is in the `connected` state. */\n  connected: ReactNode;\n  /**\n   * Description text rendered inside the SDK-owned disconnected card,\n   * above the primary \"Connect to HubSpot\" button.\n   */\n  disconnectedMessage: ReactNode;\n}\n\n/**\n * Lovable-preset variant of `HubSpotAppConnect`. The controller is\n * created once at module load with `hubSpotConnectBaseUrl` fixed to\n * `/functions/v1/hubspot-connect` — the path that\n * `@hubspot/app-connect-sdk/server/lovable` mounts. Callers that need\n * a custom base URL or logger should use the canonical\n * `HubSpotAppConnect` from `@hubspot/app-connect-sdk/react` instead.\n */\nexport function LovableHubSpotAppConnect(props: LovableHubSpotAppConnectProps) {\n  return <HubSpotAppConnect {...props} controller={controller} />;\n}\n"],"mappings":";;;;AAOA,MAAM,aAAa,2BAA2B,EAC5C,QAAQ,EAAE,uBAAuB,iCAA0B,EAC5D,CAAC;;;;;;;;;AAyBF,SAAgB,yBAAyB,OAAsC;CAC7E,OAAO,oBAAC,mBAAD;EAAmB,GAAI;EAAmB;EAAc,CAAA"}

package/dist/browser/react.d.ts

@@ -0,0 +1,47 @@
+import { n as AppConnectController, r as AppConnectState } from "./types-rTQw6A54.js";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/browser/react/components/HubSpotAppConnect/HubSpotAppConnect.d.ts
+/**
+ * Props accepted by {@link HubSpotAppConnect}.
+ */
+interface HubSpotAppConnectProps {
+  /** Title text rendered in the standard SDK header. */
+  title: string;
+  /** Controller produced by `createAppConnectController`. */
+  controller: AppConnectController;
+  /** Content rendered when the controller is in the `connected` state. */
+  connected: ReactNode;
+  /**
+   * Description text rendered inside the SDK-owned disconnected card,
+   * above the primary "Connect to HubSpot" button.
+   */
+  disconnectedMessage: ReactNode;
+}
+/**
+ * Layout component that exposes `controller` to {@link useHubSpotAppConnect},
+ * starts it once on mount, and renders a standard header plus the content
+ * slot that matches the current connection status.
+ */
+declare function HubSpotAppConnect({
+  title,
+  controller,
+  connected,
+  disconnectedMessage
+}: HubSpotAppConnectProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/browser/react/hooks.d.ts
+type UseHubSpotAppConnectResult = AppConnectState;
+/**
+ * React hook that returns the current `AppConnectState`. Must be
+ * called inside a {@link HubSpotAppConnect} provider — throws when
+ * no controller is available.
+ *
+ * The hook subscribes to the controller via `useSyncExternalStore`
+ * so React 18+ batched updates and SSR work correctly.
+ */
+declare function useHubSpotAppConnect(): UseHubSpotAppConnectResult;
+//#endregion
+export { HubSpotAppConnect, type HubSpotAppConnectProps, type UseHubSpotAppConnectResult, useHubSpotAppConnect };
+//# sourceMappingURL=react.d.ts.map

package/dist/browser/react.js

@@ -0,0 +1,2 @@
+import { n as useHubSpotAppConnect, t as HubSpotAppConnect } from "./HubSpotAppConnect-BW45gyDs.js";
+export { HubSpotAppConnect, useHubSpotAppConnect };