core-outline 1.1.24 → 1.1.25

package/README.md

@@ -12,28 +12,6 @@ npm install core-outline
 yarn add core-outline
 ```
 
-## Prerequisites
-
-Before adding the component to your app, create an SDK data source through the Hermes API to obtain your credentials. This requires your Firebase authentication token.
-
-```sh
-curl -X POST https://atlas-orchestrator.atlas.coreoutline.com/api/ingest/sdk-sources \
-  -H "Authorization: Bearer <your-firebase-token>" \
-  -H "Content-Type: application/json" \
-  -d '{"name": "My Website"}'
-```
-
-The response contains your `data_source_id`, `data_source_secret`, and `warehouse_id`. **The secret is shown once — store it securely.**
-
-```json
-{
-  "data_source_id": "3f4a1c2d-...",
-  "data_source_secret": "aB3xK9mZqR...",
-  "warehouse_id": "cad1acc0-...",
-  "name": "My Website"
-}
-```
-
 ## Usage
 
 Wrap your app's root component with `<CoreOutline>`. All tracking is automatic from that point — no additional configuration is needed.

package/dist/index.es.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { v4 } from 'uuid';
 

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "core-outline",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
-}

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/.eslintrc.json

@@ -1,23 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react"],
-  "rules": {
-    "react/react-in-jsx-scope": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

package/.prettierignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "semi": true
-}

package/.storybook/main.js

@@ -1,16 +0,0 @@
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
-const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-webpack5-compiler-swc',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook',
-    '@storybook/addon-interactions',
-  ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-};
-export default config;

package/.storybook/preview.js

@@ -1,13 +0,0 @@
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/docs/changelog/270626-143000_tracking_pipeline_changelog.md

@@ -1,44 +0,0 @@
-# Tracking Pipeline — react-component Changes
-Date: 2026-06-27
-
-## Summary
-Replaced Socket.IO with direct HTTP calls to the Hermes ingest API. Added warehouse_id-based routing, improved event schema, and removed dev artifacts.
-
-## Breaking Changes
-- `<CoreOutline>` now requires a `warehouse_id` prop (in addition to existing `data_source_id` + `data_source_secret`)
-- The `data_source_secret` is now validated against Hermes's Vault store; the old `api.coreoutline.com/data-source/authorize` endpoint is no longer used
-
-## New Files
-- `src/components/CoreOutline/helpers.js` — browser utilities: `getAnonymousId`, `getSessionId`, `getUtmParams`, `detectDeviceType`, `detectOS`, `getBrowserName`, `getPagePath`
-- `src/components/CoreOutline/ingest.js` — HTTP ingest client: `initIngest`, `trackEvent`, `flush`, `sendRrwebBatch`, `stopFlushInterval`
-
-## Modified Files
-
-### `src/components/CoreOutline/CoreOutline.js`
-- Added `warehouse_id` prop
-- Replaced all `socket.send()` calls with `trackEvent()` from `ingest.js`
-- Events now include: UTM params, device type, OS, page_url, page_path, anonymous_id (persistent cross-session), session_id (per-tab via sessionStorage)
-- Removed `getLocation()` / geolocation (replaced by server-side IP geolocation)
-- Removed dev-only `<button>Save Events Locally</button>` from rendered output
-- `flag_item_clicked(item_id)` and `flag_item_purchased(item_id, price)` rewritten to use `trackEvent()`; `flag_item_purchased` now accepts an optional `price` parameter mapped to `value_num`
-- Events auto-flush every 5 seconds and on page unload/visibility change
-- rrweb recordings uploaded via `sendRrwebBatch` at session end
-
-### `package.json`
-- Removed: `socket.io-client` (~100KB bundle savings)
-- Added: `uuid` as explicit dependency (was transitive via rrweb)
-
-## Event Types Emitted
-| event_type | event_category | Destination table |
-|---|---|---|
-| `session_start` | `session` | `fact_session` |
-| `session_end` | `session` | `fact_session` (update via ReplacingMergeTree) |
-| `pageview` | `navigation` | `fact_pageview` + `fact_event` |
-| `item_clicked` | `interaction` | `fact_event` |
-| `product_clicked` | `commerce` | `fact_event` |
-| `product_purchased` | `commerce` | `fact_event` (value_num = price) |
-
-## Data Flow
-react-component → `POST https://api.coreoutline.com/api/ingest/authorize` (get JWT)
-→ `POST https://api.coreoutline.com/api/ingest/events` (batch, every 5s + on unload)
-→ `POST https://api.coreoutline.com/api/ingest/rrweb` (session end)

package/rollup.config.js

@@ -1,35 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import { terser } from 'rollup-plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-
-export default [
-  {
-    input: './src/components/CoreOutline/CoreOutline.js',
-    output: [
-      {
-        file: 'dist/index.js',
-        format: 'cjs',
-      },
-      {
-        file: 'dist/index.es.js',
-        format: 'es',
-        exports: 'named',
-      },
-    ],
-    plugins: [
-      postcss({
-        plugins: [],
-        minimize: true,
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        presets: ['@babel/preset-react'],
-      }),
-      external(),
-      resolve(),
-      // terser(),
-    ],
-  },
-];

package/src/components/CoreOutline/CoreOutline.js

@@ -1,223 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { record } from 'rrweb';
-import {
-  EventType,
-  IncrementalSource,
-  MouseInteractions,
-} from 'rrweb';
-import {
-  getAnonymousId,
-  getSessionId,
-  getUtmParams,
-  detectDeviceType,
-  detectOS,
-  getBrowserName,
-  getPagePath,
-} from './helpers';
-import {
-  initIngest,
-  trackEvent,
-  flush,
-  sendRrwebBatch,
-  stopFlushInterval,
-} from './ingest';
-
-const CoreOutline = ({ children, data_source_id, data_source_secret, warehouse_id }) => {
-  const [replayEvents, setReplayEvents] = useState([]);
-  const recorderActive = useRef(false);
-  const [currentPage, setCurrentPage] = useState(window.location.href);
-  const pageviewCountRef = useRef(0);
-  const eventCountRef = useRef(0);
-  const sessionStartRef = useRef(Date.now());
-
-  const sessionId = getSessionId();
-  const anonymousId = getAnonymousId();
-
-  useEffect(() => {
-    const utmParams = getUtmParams();
-    const deviceType = detectDeviceType();
-    const os = detectOS();
-    const browser = getBrowserName();
-    const referrer = document.referrer || 'direct';
-
-    const basePayload = {
-      session_id: sessionId,
-      anonymous_id: anonymousId,
-      account_id: data_source_id,
-      platform: 'web',
-      device_type: deviceType,
-      os,
-      browser,
-      referrer,
-      page_url: window.location.href,
-      page_path: getPagePath(),
-      ...utmParams,
-    };
-
-    let initialized = false;
-
-    const init = async () => {
-      initialized = await initIngest(warehouse_id, data_source_id, data_source_secret);
-      if (!initialized) return;
-
-      pageviewCountRef.current += 1;
-      trackEvent('pageview', { ...basePayload, event_name: 'pageview', event_category: 'navigation' });
-      trackEvent('session_start', {
-        ...basePayload,
-        event_name: 'session_start',
-        event_category: 'session',
-        session_start_ts: new Date().toISOString(),
-      });
-    };
-
-    init();
-
-    const handleSessionEnd = () => {
-      if (!initialized) return;
-      const durationMs = Date.now() - sessionStartRef.current;
-      trackEvent('session_end', {
-        ...basePayload,
-        event_name: 'session_end',
-        event_category: 'session',
-        session_end_ts: new Date().toISOString(),
-        pageviews: pageviewCountRef.current,
-        events_count: eventCountRef.current,
-        duration_ms: durationMs,
-      });
-      flush();
-      stopFlushInterval();
-      sendRrwebBatch(replayEvents, sessionId);
-    };
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'hidden') handleSessionEnd();
-    };
-
-    window.addEventListener('beforeunload', handleSessionEnd);
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      handleSessionEnd();
-      window.removeEventListener('beforeunload', handleSessionEnd);
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    const utmParams = getUtmParams();
-
-    const handleNavigation = () => {
-      setCurrentPage(window.location.href);
-      pageviewCountRef.current += 1;
-      trackEvent('pageview', {
-        session_id: sessionId,
-        anonymous_id: anonymousId,
-        account_id: data_source_id,
-        platform: 'web',
-        page_url: window.location.href,
-        page_path: getPagePath(),
-        referrer: document.referrer || 'direct',
-        event_name: 'pageview',
-        event_category: 'navigation',
-        ...utmParams,
-      });
-    };
-
-    window.addEventListener('popstate', handleNavigation);
-    const originalPushState = window.history.pushState;
-    window.history.pushState = function (...args) {
-      originalPushState.apply(this, args);
-      handleNavigation();
-    };
-
-    return () => {
-      window.removeEventListener('popstate', handleNavigation);
-      window.history.pushState = originalPushState;
-    };
-  }, [currentPage]);
-
-  useEffect(() => {
-    let stopFn;
-    if (!recorderActive.current) {
-      stopFn = record({
-        emit(event) {
-          setReplayEvents((prev) => [...prev, event]);
-        },
-        maskAllInputs: false,
-        maskTextSelector: null,
-      });
-      recorderActive.current = true;
-    }
-
-    return () => {
-      if (stopFn) {
-        stopFn();
-        recorderActive.current = false;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClick = (event) => {
-      const clickedElement = document.elementFromPoint(event.clientX, event.clientY);
-      const metadata = clickedElement
-        ? {
-            label: clickedElement.getAttribute('data-label') || clickedElement.innerText || null,
-            value: clickedElement.getAttribute('value') || clickedElement.innerText || null,
-            id: clickedElement.getAttribute('id') || null,
-            name: clickedElement.getAttribute('name') || null,
-            class: clickedElement.getAttribute('class') || null,
-            tag: clickedElement.tagName,
-            inner_text: event.target.innerText || null,
-          }
-        : {};
-
-      eventCountRef.current += 1;
-      trackEvent('item_clicked', {
-        session_id: sessionId,
-        anonymous_id: anonymousId,
-        account_id: data_source_id,
-        platform: 'web',
-        page_url: window.location.href,
-        page_path: getPagePath(),
-        event_name: 'item_clicked',
-        event_category: 'interaction',
-        properties_json: JSON.stringify(metadata),
-      });
-    };
-
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  return <>{children}</>;
-};
-
-export const flag_item_clicked = (item_id) => {
-  const sessionId = sessionStorage.getItem('co_session_id') || '';
-  const anonymousId = localStorage.getItem('co_anon_id') || '';
-  trackEvent('product_clicked', {
-    session_id: sessionId,
-    anonymous_id: anonymousId,
-    event_name: 'product_clicked',
-    event_category: 'commerce',
-    feature_key: item_id,
-  });
-  return { status: 'success', message: 'Item click flagged successfully.' };
-};
-
-export const flag_item_purchased = (item_id, price = null) => {
-  const sessionId = sessionStorage.getItem('co_session_id') || '';
-  const anonymousId = localStorage.getItem('co_anon_id') || '';
-  trackEvent('product_purchased', {
-    session_id: sessionId,
-    anonymous_id: anonymousId,
-    event_name: 'product_purchased',
-    event_category: 'commerce',
-    feature_key: item_id,
-    value_num: price != null ? Number(price) : null,
-  });
-  return { status: 'success', message: 'Item purchase flagged successfully.' };
-};
-
-export default CoreOutline;

package/src/components/CoreOutline/RWebRecorder.js

@@ -1,26 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { record } from 'rrweb';
-
-const useRRWebRecorder = () => {
-  const eventsRef = useRef([]);
-
-  useEffect(() => {
-    const stopRecording = record({
-      emit(event) {
-        if (event) {
-          eventsRef.current.push(event);
-        }
-      },
-    });
-
-    return () => {
-      if (stopRecording) {
-        stopRecording();
-      }
-    };
-  }, []);
-
-  return eventsRef;
-};
-
-export default useRRWebRecorder;

package/src/components/CoreOutline/helpers.js

@@ -1,66 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-
-const ANON_ID_KEY = 'co_anon_id';
-const SESSION_ID_KEY = 'co_session_id';
-
-export function getAnonymousId() {
-  let id = localStorage.getItem(ANON_ID_KEY);
-  if (!id) {
-    id = uuidv4();
-    localStorage.setItem(ANON_ID_KEY, id);
-  }
-  return id;
-}
-
-export function getSessionId() {
-  let id = sessionStorage.getItem(SESSION_ID_KEY);
-  if (!id) {
-    id = uuidv4();
-    sessionStorage.setItem(SESSION_ID_KEY, id);
-  }
-  return id;
-}
-
-export function getUtmParams() {
-  const params = new URLSearchParams(window.location.search);
-  return {
-    utm_source: params.get('utm_source') || undefined,
-    utm_medium: params.get('utm_medium') || undefined,
-    utm_campaign: params.get('utm_campaign') || undefined,
-    utm_term: params.get('utm_term') || undefined,
-    utm_content: params.get('utm_content') || undefined,
-  };
-}
-
-export function detectDeviceType() {
-  const ua = navigator.userAgent;
-  if (/Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
-    if (/iPad|Tablet/i.test(ua)) return 'tablet';
-    return 'mobile';
-  }
-  return 'desktop';
-}
-
-export function detectOS() {
-  const ua = navigator.userAgent;
-  if (/iPhone|iPad|iPod/i.test(ua)) return 'iOS';
-  if (/Android/i.test(ua)) return 'Android';
-  if (/Win/i.test(ua)) return 'Windows';
-  if (/Mac/i.test(ua)) return 'macOS';
-  if (/Linux/i.test(ua)) return 'Linux';
-  return 'Other';
-}
-
-export function getBrowserName() {
-  const ua = navigator.userAgent;
-  if (ua.indexOf('Firefox') > -1) return 'Firefox';
-  if (ua.indexOf('Opera') > -1 || ua.indexOf('OPR') > -1) return 'Opera';
-  if (ua.indexOf('Chrome') > -1) return 'Chrome';
-  if (ua.indexOf('Safari') > -1) return 'Safari';
-  if (ua.indexOf('MSIE') > -1 || ua.indexOf('Trident/') > -1) return 'IE';
-  return 'Unknown';
-}
-
-export function getPagePath() {
-  return window.location.pathname;
-}

package/src/components/CoreOutline/index.js

@@ -1 +0,0 @@
-export * from './CoreOutline';

package/src/components/CoreOutline/ingest.js

@@ -1,157 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-
-const INGEST_BASE = 'https://atlas-orchestrator.atlas.coreoutline.com';
-const FLUSH_INTERVAL_MS = 5000;
-// Refresh the token this many milliseconds before it actually expires.
-const TOKEN_REFRESH_BUFFER_MS = 5 * 60 * 1000; // 5 minutes
-
-let _token = null;
-let _warehouseId = null;
-let _organizationId = null;
-let _dataSourceId = null;
-let _dataSourceSecret = null;
-let _buffer = [];
-let _flushInterval = null;
-let _refreshTimeout = null;
-
-function _scheduleTokenRefresh(expiresInSeconds) {
-  if (_refreshTimeout) {
-    clearTimeout(_refreshTimeout);
-    _refreshTimeout = null;
-  }
-
-  const refreshInMs = expiresInSeconds * 1000 - TOKEN_REFRESH_BUFFER_MS;
-  if (refreshInMs <= 0) {
-    // Token already near expiry — refresh immediately on next action.
-    return;
-  }
-
-  _refreshTimeout = setTimeout(async () => {
-    const ok = await _doAuthorize(_warehouseId, _dataSourceId, _dataSourceSecret);
-    if (!ok) {
-      console.warn('[CoreOutline] Proactive token refresh failed; will retry on next flush.');
-    }
-  }, refreshInMs);
-}
-
-async function _doAuthorize(warehouseId, dataSourceId, dataSourceSecret) {
-  try {
-    const res = await fetch(`${INGEST_BASE}/api/ingest/authorize`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        warehouse_id: warehouseId,
-        data_source_id: dataSourceId,
-        data_source_secret: dataSourceSecret,
-      }),
-    });
-
-    if (!res.ok) {
-      console.error('[CoreOutline] Authorization failed:', res.status);
-      return false;
-    }
-
-    const data = await res.json();
-    _token = data.access_token;
-    _organizationId = data.organization_id;
-
-    const expiresIn = data.expires_in || 24 * 3600;
-    _scheduleTokenRefresh(expiresIn);
-    return true;
-  } catch (err) {
-    console.error('[CoreOutline] Authorization error:', err);
-    return false;
-  }
-}
-
-export async function initIngest(warehouseId, dataSourceId, dataSourceSecret) {
-  _warehouseId = warehouseId;
-  _dataSourceId = dataSourceId;
-  _dataSourceSecret = dataSourceSecret;
-
-  return _doAuthorize(warehouseId, dataSourceId, dataSourceSecret);
-}
-
-async function _ensureFreshToken() {
-  if (_token) return;
-  if (_warehouseId && _dataSourceId && _dataSourceSecret) {
-    await _doAuthorize(_warehouseId, _dataSourceId, _dataSourceSecret);
-  }
-}
-
-export function trackEvent(eventType, payload) {
-  if (!_token) return;
-
-  const event = {
-    event_id: uuidv4(),
-    event_type: eventType,
-    event_ts: new Date().toISOString(),
-    ...payload,
-  };
-  _buffer.push(event);
-
-  if (!_flushInterval) {
-    _flushInterval = setInterval(flush, FLUSH_INTERVAL_MS);
-  }
-}
-
-export async function flush() {
-  await _ensureFreshToken();
-  if (!_token || _buffer.length === 0) return;
-
-  const events = _buffer.splice(0, _buffer.length);
-  const body = JSON.stringify({
-    warehouse_id: _warehouseId,
-    organization_id: _organizationId,
-    events,
-  });
-
-  const headers = {
-    'Content-Type': 'application/json',
-    Authorization: `Bearer ${_token}`,
-  };
-
-  if (navigator.sendBeacon) {
-    const blob = new Blob([body], { type: 'application/json' });
-    navigator.sendBeacon(`${INGEST_BASE}/api/ingest/events`, blob);
-  } else {
-    fetch(`${INGEST_BASE}/api/ingest/events`, {
-      method: 'POST',
-      headers,
-      body,
-      keepalive: true,
-    }).catch((err) => console.error('[CoreOutline] Flush error:', err));
-  }
-}
-
-export async function sendRrwebBatch(chunks, sessionId) {
-  await _ensureFreshToken();
-  if (!_token || !chunks || chunks.length === 0) return;
-
-  try {
-    await fetch(`${INGEST_BASE}/api/ingest/rrweb`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${_token}`,
-      },
-      body: JSON.stringify({
-        warehouse_id: _warehouseId,
-        organization_id: _organizationId,
-        session_id: sessionId,
-        data_source_id: _dataSourceId,
-        chunks,
-      }),
-      keepalive: true,
-    });
-  } catch (err) {
-    console.error('[CoreOutline] rrweb upload error:', err);
-  }
-}
-
-export function stopFlushInterval() {
-  if (_flushInterval) {
-    clearInterval(_flushInterval);
-    _flushInterval = null;
-  }
-}

package/src/components/CoreOutline/socket.js

@@ -1,3 +0,0 @@
-import { io } from 'socket.io-client';
-const socket = io('http://streams.coreoutline.com');
-export default socket;

package/src/index.js

@@ -1 +0,0 @@
-export * from './components/CoreOutline';