lytx 0.3.0

package/src/app/utils/chartThemes.ts

@@ -0,0 +1,146 @@
+const chartAccentOrange = "#f97316";
+
+export const createChartTheme = (isDark: boolean) => ({
+  background: "transparent",
+  text: {
+    fontSize: 12,
+    fill: isDark ? "#ffffff" : "#111827",
+    fontWeight: 600,
+    outlineWidth: 0,
+    outlineColor: "transparent",
+  },
+  axis: {
+    domain: {
+      line: {
+        stroke: isDark ? "#575353" : "#E5E7EB",
+        strokeWidth: 1,
+      },
+    },
+    legend: {
+      text: {
+        fontSize: 12,
+        fill: isDark ? "#ffffff" : "#6B7280",
+        fontWeight: 600,
+        outlineWidth: 0,
+        outlineColor: "transparent",
+      },
+    },
+    ticks: {
+      line: {
+        stroke: isDark ? "#575353" : "#E5E7EB",
+        strokeWidth: 1,
+      },
+      text: {
+        fontSize: 11,
+        fill: isDark ? "#ffffff" : "#6B7280",
+        fontWeight: 600,
+        outlineWidth: 0,
+        outlineColor: "transparent",
+      },
+    },
+  },
+  grid: {
+    line: {
+      stroke: isDark ? "#575353" : "#F3F4F6",
+      strokeWidth: 1,
+    },
+  },
+  legends: {
+    title: {
+      text: {
+        fontSize: 11,
+        fill: isDark ? "#ffffff" : "#6B7280",
+        fontWeight: 600,
+        outlineWidth: 0,
+        outlineColor: "transparent",
+      },
+    },
+    text: {
+      fontSize: 11,
+      fill: isDark ? "#ffffff" : "#6B7280",
+      fontWeight: 600,
+      outlineWidth: 0,
+      outlineColor: "transparent",
+    },
+    ticks: {
+      line: {},
+      text: {
+        fontSize: 10,
+        fill: isDark ? "#ffffff" : "#6B7280",
+        fontWeight: 600,
+        outlineWidth: 0,
+        outlineColor: "transparent",
+      },
+    },
+  },
+  labels: {
+    text: {
+      fontSize: 12,
+      fill: isDark ? "#ffffff" : "#111827",
+      fontWeight: 600,
+      outlineWidth: 0,
+      outlineColor: "transparent",
+    },
+  },
+  annotations: {
+    text: {
+      fontSize: 13,
+      fill: isDark ? "#ffffff" : "#111827",
+      fontWeight: 600,
+      outlineWidth: 2,
+      outlineColor: isDark ? "#3c3c3c" : "#FFFFFF",
+      outlineOpacity: 1,
+    },
+    link: {
+      stroke: isDark ? "#575353" : "#6B7280",
+      strokeWidth: 1,
+      outlineWidth: 2,
+      outlineColor: isDark ? "#3c3c3c" : "#FFFFFF",
+      outlineOpacity: 1,
+    },
+    outline: {
+      stroke: isDark ? "#575353" : "#6B7280",
+      strokeWidth: 2,
+      outlineWidth: 2,
+      outlineColor: isDark ? "#3c3c3c" : "#FFFFFF",
+      outlineOpacity: 1,
+    },
+    symbol: {
+      fill: isDark ? "#575353" : "#6B7280",
+      outlineWidth: 2,
+      outlineColor: isDark ? "#3c3c3c" : "#FFFFFF",
+      outlineOpacity: 1,
+    },
+  },
+  tooltip: {
+    container: {
+      background: isDark ? "#484743" : "#FFFFFF",
+      color: isDark ? "#ffffff" : "#111827",
+      fontSize: 12,
+      fontWeight: 600,
+      borderRadius: "8px",
+      boxShadow: isDark
+        ? "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)"
+        : "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      border: `1px solid ${isDark ? "#575353" : "#E5E7EB"}`,
+    },
+    basic: {},
+    chip: {},
+    table: {},
+    tableCell: {},
+    tableCellValue: {},
+  },
+});
+
+export const chartColors = {
+  primary: ["#3B82F6", "#1D4ED8", "#1E40AF", "#1E3A8A", "#93C5FD"],
+  secondary: ["#10B981", "#34D399", "#6EE7B7", "#A7F3D0", "#D1FAE5"],
+  mixed: ["#3B82F6", "#10B981", chartAccentOrange, "#EF4444", "#1D4ED8", "#06B6D4"],
+  gradient: [
+    { offset: 0, color: "#3B82F6" },
+    { offset: 100, color: "#1D4ED8" },
+  ],
+  map: ["#93C5FD", "#60A5FA", "#3B82F6", "#2563EB", "#1D4ED8"],
+  line: ["#3B82F6"],
+  funnel: ["#e05205", "#f06a1a", "#f97316", "#fb923c", "#fdba74"],
+};

package/src/app/utils/keybinds.ts

@@ -0,0 +1,96 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * A single keybind entry: the key to listen for and the action to run.
+ * `key` is matched case-insensitively against `KeyboardEvent.key`.
+ */
+export interface Keybind {
+  /** The key value (e.g. "r", "H", "6", "0"). Matched case-insensitively. */
+  key: string;
+  /** Callback fired when the key is pressed. */
+  action: () => void;
+}
+
+export interface UseKeybindsOptions {
+  /** The list of keybinds to register. */
+  binds: Keybind[];
+  /** Only listen when this is true (default: true). */
+  enabled?: boolean;
+  /**
+   * Ignore key events originating from input/textarea/select elements
+   * so users can still type normally (default: true).
+   */
+  ignoreInputs?: boolean;
+  /**
+   * Ignore key events with modifier keys held (ctrl, alt, meta, shift).
+   * Prevents collisions with browser/system shortcuts (default: true).
+   */
+  ignoreWithModifiers?: boolean;
+}
+
+/**
+ * Registers global keyboard shortcuts.
+ *
+ * Usage:
+ * ```ts
+ * useKeybinds({
+ *   binds: [
+ *     { key: "r", action: () => selectPreset("Last 30 min") },
+ *     { key: "w", action: () => selectPreset("Last 7 days") },
+ *   ],
+ *   enabled: isDatePickerOpen,
+ * });
+ * ```
+ */
+export function useKeybinds(options: UseKeybindsOptions) {
+  const {
+    binds,
+    enabled = true,
+    ignoreInputs = true,
+    ignoreWithModifiers = true,
+  } = options;
+
+  // Keep binds in a ref so the event handler always sees the latest list
+  // without needing to re-attach the listener on every render.
+  const bindsRef = useRef(binds);
+  bindsRef.current = binds;
+
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!enabledRef.current) return;
+
+      // Skip when a modifier is held (unless the bind IS a modifier, which we don't support).
+      if (ignoreWithModifiers && (event.ctrlKey || event.altKey || event.metaKey)) {
+        return;
+      }
+
+      // Skip when focus is inside a form control.
+      if (ignoreInputs) {
+        const tag = (event.target as HTMLElement)?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+          return;
+        }
+        // Also skip contenteditable elements.
+        if ((event.target as HTMLElement)?.isContentEditable) {
+          return;
+        }
+      }
+
+      const pressed = event.key.toLowerCase();
+
+      for (const bind of bindsRef.current) {
+        if (bind.key.toLowerCase() === pressed) {
+          event.preventDefault();
+          bind.action();
+          return;
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [ignoreInputs, ignoreWithModifiers]);
+}

package/src/app/utils/media.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const media = window.matchMedia(query);
+
+    const listener = () => {
+      setMatches(media.matches);
+    };
+
+    listener();
+
+    media.addEventListener("change", listener);
+    return () => {
+      media.removeEventListener("change", listener);
+    };
+  }, [query]);
+
+  return matches;
+}

package/src/client.tsx

@@ -0,0 +1,114 @@
+import {
+  initClient,
+  initClientNavigation,
+} from "rwsdk/client";
+
+type NavigationRuntime = {
+  handleResponse: ReturnType<typeof initClientNavigation>["handleResponse"];
+  onHydrated: () => void;
+  clickListener: (event: MouseEvent) => void;
+};
+
+declare global {
+  interface Window {
+    __lytxNavigationRuntime?: NavigationRuntime;
+    __lytxClientInitialized?: boolean;
+    __viewTransitionResolve?: (() => void) | null;
+    __viewTransitionTimeoutId?: number | null;
+  }
+}
+
+const clearPendingViewTransition = () => {
+  if (window.__viewTransitionTimeoutId) {
+    window.clearTimeout(window.__viewTransitionTimeoutId);
+    window.__viewTransitionTimeoutId = null;
+  }
+  if (window.__viewTransitionResolve) {
+    window.__viewTransitionResolve();
+    window.__viewTransitionResolve = null;
+  }
+};
+
+const createNavigationRuntime = (): NavigationRuntime => {
+  const { handleResponse, onHydrated: originalOnHydrated } = initClientNavigation({
+    scrollBehavior: "instant",
+  });
+
+  const onHydrated = () => {
+    clearPendingViewTransition();
+    originalOnHydrated();
+  };
+
+  const clickListener = (event: MouseEvent) => {
+    const target = event.target as HTMLElement | null;
+    const link = target?.closest("a[href]") as HTMLAnchorElement | null;
+
+    if (!link) return;
+    if (link.target === "_blank" || link.hasAttribute("download")) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+    const href = link.getAttribute("href");
+    if (!href || href.startsWith("//") || href.startsWith("http")) return;
+
+    const nextUrl = new URL(link.href, window.location.href);
+    const currentUrl = new URL(window.location.href);
+    if (
+      nextUrl.origin !== currentUrl.origin
+      || (nextUrl.pathname === currentUrl.pathname
+        && nextUrl.search === currentUrl.search
+        && nextUrl.hash === currentUrl.hash)
+    ) {
+      return;
+    }
+
+    const startViewTransition = (document as any).startViewTransition as
+      | ((callback: () => Promise<void>) => unknown)
+      | undefined;
+    if (!startViewTransition) return;
+
+    clearPendingViewTransition();
+    startViewTransition(() => {
+      return new Promise<void>((resolve) => {
+        window.__viewTransitionResolve = resolve;
+        window.__viewTransitionTimeoutId = window.setTimeout(() => {
+          clearPendingViewTransition();
+        }, 1200);
+      });
+    });
+  };
+
+  document.addEventListener("click", clickListener, true);
+
+  return {
+    handleResponse,
+    onHydrated,
+    clickListener,
+  };
+};
+
+const runtime = window.__lytxNavigationRuntime ?? createNavigationRuntime();
+window.__lytxNavigationRuntime = runtime;
+
+if (!window.__lytxClientInitialized) {
+  initClient({ handleResponse: runtime.handleResponse, onHydrated: runtime.onHydrated });
+  window.__lytxClientInitialized = true;
+}
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    if (window.__lytxNavigationRuntime) {
+      document.removeEventListener("click", window.__lytxNavigationRuntime.clickListener, true);
+    }
+    window.__lytxNavigationRuntime = undefined;
+    window.__lytxClientInitialized = false;
+    clearPendingViewTransition();
+  });
+}
+
+if (import.meta.env.PROD && "serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js").catch((error) => {
+      console.error("Service worker registration failed:", error);
+    });
+  });
+}

package/src/config/createLytxAppConfig.ts

@@ -0,0 +1,252 @@
+import { z } from "zod";
+
+export const CREATE_LYTX_APP_CONFIG_DOC_URL =
+  "https://github.com/lytx-io/kit/blob/master/core/docs/oss-contract.md#supported-extension-and-customization-points";
+
+const dbAdapterValues = ["sqlite", "postgres", "singlestore", "analytics_engine"] as const;
+
+const dbAdapterSchema = z.enum(dbAdapterValues);
+const eventStoreSchema = z.enum([...dbAdapterValues, "durable_objects"] as const);
+
+const dbConfigSchema = z
+  .object({
+    dbAdapter: dbAdapterSchema.optional(),
+    eventStore: eventStoreSchema.optional(),
+  })
+  .strict();
+
+export type LytxDbAdapter = z.infer<typeof dbAdapterSchema>;
+export type LytxEventStore = z.infer<typeof eventStoreSchema>;
+export type LytxDbConfig = z.input<typeof dbConfigSchema>;
+
+const routePathSchema = z
+  .string()
+  .trim()
+  .min(1, "Route path is required")
+  .refine((value) => value.startsWith("/"), "Route path must start with '/'")
+  .refine((value) => !/\s/.test(value), "Route path cannot contain whitespace");
+
+const routePrefixSchema = z
+  .string()
+  .trim()
+  .min(1, "Route prefix is required")
+  .refine((value) => value.startsWith("/"), "Route prefix must start with '/'")
+  .refine((value) => !/\s/.test(value), "Route prefix cannot contain whitespace")
+  .refine((value) => value === "/" || !value.endsWith("/"), "Route prefix must not end with '/' unless it is '/'");
+
+const bindingNameSchema = z
+  .string()
+  .trim()
+  .min(1, "Binding name is required")
+  .max(64, "Binding name must be at most 64 characters")
+  .regex(/^[A-Za-z][A-Za-z0-9_-]*$/, "Binding name must start with a letter and use letters, numbers, '_' or '-'");
+
+const domainSchema = z
+  .string()
+  .trim()
+  .min(1, "Domain is required")
+  .refine((value) => {
+    const candidate = value.includes("://") ? value : `https://${value}`;
+    try {
+      const parsed = new URL(candidate);
+      return parsed.hostname.length > 0;
+    } catch {
+      return false;
+    }
+  }, "Domain must be a valid hostname or URL");
+
+const envKeySchema = z.string().trim().min(1, "Env var value cannot be empty");
+
+const createLytxAppConfigSchema = z
+  .object({
+    enableRequestLogging: z.boolean().optional(),
+    db: dbConfigSchema.optional(),
+    dbAdapter: dbAdapterSchema.optional(),
+    useQueueIngestion: z.boolean().optional(),
+    includeLegacyTagRoutes: z.boolean().optional(),
+    trackingRoutePrefix: routePrefixSchema.optional(),
+    auth: z
+      .object({
+        emailPasswordEnabled: z.boolean().optional(),
+        requireEmailVerification: z.boolean().optional(),
+        socialProviders: z
+          .object({
+            google: z.boolean().optional(),
+            github: z.boolean().optional(),
+          })
+          .strict()
+          .optional(),
+      })
+      .strict()
+      .optional(),
+    tagRoutes: z
+      .object({
+        scriptPath: routePathSchema.optional(),
+        legacyScriptPath: routePathSchema.optional(),
+        eventPath: routePathSchema.optional(),
+        legacyEventPath: routePathSchema.optional(),
+      })
+      .strict()
+      .optional(),
+    features: z
+      .object({
+        dashboard: z.boolean().optional(),
+        events: z.boolean().optional(),
+        auth: z.boolean().optional(),
+        ai: z.boolean().optional(),
+        tagScript: z.boolean().optional(),
+        reportBuilderEnabled: z.boolean().optional(),
+        askAiEnabled: z.boolean().optional(),
+      })
+      .strict()
+      .optional(),
+    names: z
+      .object({
+        d1Binding: bindingNameSchema.optional(),
+        eventsKvBinding: bindingNameSchema.optional(),
+        configKvBinding: bindingNameSchema.optional(),
+        sessionsKvBinding: bindingNameSchema.optional(),
+        queueBinding: bindingNameSchema.optional(),
+        durableObjectBinding: bindingNameSchema.optional(),
+      })
+      .strict()
+      .optional(),
+    domains: z
+      .object({
+        app: domainSchema.optional(),
+        tracking: domainSchema.optional(),
+      })
+      .strict()
+      .optional(),
+    env: z
+      .object({
+        BETTER_AUTH_SECRET: envKeySchema.optional(),
+        BETTER_AUTH_URL: z.string().trim().url("BETTER_AUTH_URL must be a valid URL").optional(),
+        ENCRYPTION_KEY: envKeySchema.optional(),
+        AI_API_KEY: envKeySchema.optional(),
+        AI_MODEL: envKeySchema.optional(),
+        LYTX_DOMAIN: domainSchema.optional(),
+        EMAIL_FROM: z.string().trim().email("EMAIL_FROM must be a valid email address").optional(),
+      })
+      .strict()
+      .optional(),
+    startupValidation: z
+      .object({
+        requireCoreEnv: z.boolean().optional(),
+        requireAiEnvWhenAskAiEnabled: z.boolean().optional(),
+      })
+      .strict()
+      .optional(),
+  })
+  .strict()
+  .superRefine((value, ctx) => {
+    if (value.db?.dbAdapter && value.dbAdapter && value.db.dbAdapter !== value.dbAdapter) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["db", "dbAdapter"],
+        message: "db.dbAdapter must match top-level dbAdapter when both are provided",
+      });
+    }
+
+    if (value.features?.dashboard === true && value.features?.auth === false) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["features", "dashboard"],
+        message: "Dashboard cannot be enabled when auth is disabled",
+      });
+    }
+
+    if (value.features?.reportBuilderEnabled === true && value.features?.dashboard === false) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["features", "reportBuilderEnabled"],
+        message: "Report builder cannot be enabled when dashboard is disabled",
+      });
+    }
+
+    if (value.features?.ai === false && value.features?.askAiEnabled === true) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["features", "askAiEnabled"],
+        message: "Ask AI cannot be enabled when AI feature is disabled",
+      });
+    }
+
+    if (value.features?.askAiEnabled === true && value.features?.reportBuilderEnabled === false) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["features", "askAiEnabled"],
+        message: "Ask AI cannot be enabled when reportBuilderEnabled is false",
+      });
+    }
+
+    const emailPasswordEnabled = value.auth?.emailPasswordEnabled ?? true;
+    const googleExplicitlyDisabled = value.auth?.socialProviders?.google === false;
+    const githubExplicitlyDisabled = value.auth?.socialProviders?.github === false;
+    if (!emailPasswordEnabled && googleExplicitlyDisabled && githubExplicitlyDisabled) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["auth", "emailPasswordEnabled"],
+        message: "At least one auth method must be enabled",
+      });
+    }
+
+    const requireCoreEnv = value.startupValidation?.requireCoreEnv === true;
+    if (requireCoreEnv) {
+      const requiredCoreKeys: Array<keyof NonNullable<typeof value.env>> = [
+        "BETTER_AUTH_SECRET",
+        "BETTER_AUTH_URL",
+        "ENCRYPTION_KEY",
+      ];
+      for (const key of requiredCoreKeys) {
+        if (!value.env?.[key]) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ["env", key],
+            message: `Missing required env var ${key} (required when startupValidation.requireCoreEnv is true)`,
+          });
+        }
+      }
+    }
+
+    const requireAiEnv = value.startupValidation?.requireAiEnvWhenAskAiEnabled ?? true;
+    if (value.features?.askAiEnabled === true && requireAiEnv) {
+      if (!value.env?.AI_API_KEY) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["env", "AI_API_KEY"],
+          message: "Missing required env var AI_API_KEY when Ask AI is enabled",
+        });
+      }
+      if (!value.env?.AI_MODEL) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["env", "AI_MODEL"],
+          message: "Missing required env var AI_MODEL when Ask AI is enabled",
+        });
+      }
+    }
+  });
+
+export type CreateLytxAppConfig = z.input<typeof createLytxAppConfigSchema>;
+
+function formatValidationErrors(error: z.ZodError): string {
+  const lines = error.issues.map((issue) => {
+    const path = issue.path.length > 0 ? issue.path.join(".") : "config";
+    return `- ${path}: ${issue.message}`;
+  });
+
+  return [
+    "Invalid createLytxApp config:",
+    ...lines,
+    `See ${CREATE_LYTX_APP_CONFIG_DOC_URL}`,
+  ].join("\n");
+}
+
+export function parseCreateLytxAppConfig(config: CreateLytxAppConfig): CreateLytxAppConfig {
+  const parsed = createLytxAppConfigSchema.safeParse(config ?? {});
+  if (!parsed.success) {
+    throw new Error(formatValidationErrors(parsed.error));
+  }
+  return parsed.data;
+}