@usesidekick/react 0.1.0

package/dist/index.js

@@ -0,0 +1,2470 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SidekickPanel: () => SidekickPanel,
+  SidekickProvider: () => SidekickProvider,
+  configureJsxRuntime: () => configureJsxRuntime,
+  createOverride: () => createOverride,
+  getFlag: () => getFlag,
+  getRegisteredOverrides: () => getRegisteredOverrides,
+  getSeenComponentsFromJsx: () => getSeenComponentsFromJsx,
+  isJsxRuntimeConfigured: () => isJsxRuntimeConfigured,
+  loadFlags: () => loadFlags,
+  onConfigChange: () => onConfigChange,
+  registerOverride: () => registerOverride,
+  saveFlags: () => saveFlags,
+  setFlag: () => setFlag,
+  toggleFlag: () => toggleFlag,
+  useActions: () => useActions,
+  useAddedColumns: () => useAddedColumns,
+  useColumnOrder: () => useColumnOrder,
+  useColumnRenames: () => useColumnRenames,
+  useComputedField: () => useComputedField,
+  useEventEmitter: () => useEventEmitter,
+  useFilter: () => useFilter,
+  useGroupByOptions: () => useGroupByOptions,
+  useHiddenColumns: () => useHiddenColumns,
+  useKeyboardShortcuts: () => useKeyboardShortcuts,
+  useMenuItems: () => useMenuItems,
+  usePropsModifier: () => usePropsModifier,
+  useSidekick: () => useSidekick,
+  useSidekickSafe: () => useSidekickSafe,
+  useSortOptions: () => useSortOptions,
+  useTabs: () => useTabs,
+  useValidations: () => useValidations
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+
+// src/context.tsx
+var import_react = require("react");
+var SidekickContext = (0, import_react.createContext)(null);
+function useSidekickSafe() {
+  return (0, import_react.useContext)(SidekickContext);
+}
+function useSidekick() {
+  const context = (0, import_react.useContext)(SidekickContext);
+  if (!context) {
+    throw new Error("useSidekick must be used within a SidekickProvider");
+  }
+  return context;
+}
+function useAddedColumns(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getColumns(tableId);
+}
+function useColumnRenames(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getColumnRenames(tableId);
+}
+function useHiddenColumns(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getHiddenColumns(tableId);
+}
+function useColumnOrder(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return void 0;
+  return context.getColumnOrder(tableId);
+}
+function useMenuItems(menuId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getMenuItems(menuId);
+}
+function useTabs(tabGroupId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getTabs(tabGroupId);
+}
+function useActions(actionBarId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getActions(actionBarId);
+}
+function useValidations(formId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getValidations(formId);
+}
+function usePropsModifier(componentId, props) {
+  const context = useSidekickSafe();
+  if (!context) return props;
+  return context.applyPropsModifiers(componentId, props);
+}
+function useComputedField(fieldName, data) {
+  const context = useSidekickSafe();
+  if (!context) return void 0;
+  return context.getComputedValue(fieldName, data);
+}
+function useFilter(filterName, items) {
+  const context = useSidekickSafe();
+  if (!context) return items;
+  return context.applyFilters(filterName, items);
+}
+function useSortOptions(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getSortOptions(tableId);
+}
+function useGroupByOptions(tableId) {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getGroupByOptions(tableId);
+}
+function useKeyboardShortcuts() {
+  const context = useSidekickSafe();
+  if (!context) return [];
+  return context.getKeyboardShortcuts();
+}
+function useEventEmitter() {
+  const context = useSidekickSafe();
+  if (!context) return () => {
+  };
+  return context.emitEvent;
+}
+
+// src/flags.ts
+var STORAGE_KEY = "sidekick_flags";
+function loadFlags() {
+  if (typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+function saveFlags(flags) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(flags));
+  } catch {
+    console.warn("[Sidekick] Failed to save flags to localStorage");
+  }
+}
+function getFlag(overrideId) {
+  const flags = loadFlags();
+  return flags[overrideId] ?? false;
+}
+function setFlag(overrideId, enabled) {
+  const flags = loadFlags();
+  flags[overrideId] = enabled;
+  saveFlags(flags);
+}
+function toggleFlag(overrideId) {
+  const current = getFlag(overrideId);
+  setFlag(overrideId, !current);
+  return !current;
+}
+
+// src/loader.ts
+var overrideRegistry = /* @__PURE__ */ new Map();
+function registerOverride(module2) {
+  overrideRegistry.set(module2.manifest.id, module2);
+}
+function getRegisteredOverrides() {
+  return Array.from(overrideRegistry.values());
+}
+function createOverride(manifest, activate) {
+  return { manifest, activate };
+}
+
+// src/primitives/ui.ts
+function generateId() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function createUIPrimitives(state, currentOverrideId) {
+  return {
+    wrap(componentName, wrapper, options = {}) {
+      const wrapped = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        wrapper,
+        priority: options.priority ?? 0,
+        where: options.where
+      };
+      const existing = state.wrappers.get(componentName) ?? [];
+      existing.push(wrapped);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.wrappers.set(componentName, existing);
+    },
+    replace(componentName, replacement) {
+      state.replacements.set(componentName, replacement);
+    },
+    addStyles(css) {
+      const styles2 = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        css
+      };
+      state.styles.push(styles2);
+    },
+    addColumn(tableId, config) {
+      const column = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config
+      };
+      const existing = state.columns.get(tableId) ?? [];
+      existing.push(column);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.columns.set(tableId, existing);
+    },
+    renameColumn(tableId, originalHeader, newHeader) {
+      const rename = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        originalHeader,
+        newHeader
+      };
+      const existing = state.columnRenames.get(tableId) ?? [];
+      existing.push(rename);
+      state.columnRenames.set(tableId, existing);
+    },
+    hideColumn(tableId, header) {
+      const hidden = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        header
+      };
+      const existing = state.hiddenColumns.get(tableId) ?? [];
+      existing.push(hidden);
+      state.hiddenColumns.set(tableId, existing);
+    },
+    reorderColumns(tableId, order) {
+      const columnOrder = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        order
+      };
+      state.columnOrders.set(tableId, columnOrder);
+    },
+    filterRows(tableId, filter) {
+      const rowFilter = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        filter
+      };
+      const existing = state.rowFilters.get(tableId) ?? [];
+      existing.push(rowFilter);
+      state.rowFilters.set(tableId, existing);
+    },
+    addMenuItem(menuId, config) {
+      const item = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        menuId,
+        ...config
+      };
+      const existing = state.menuItems.get(menuId) ?? [];
+      existing.push(item);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.menuItems.set(menuId, existing);
+    },
+    addTab(tabGroupId, config) {
+      const tab = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tabGroupId,
+        ...config
+      };
+      const existing = state.tabs.get(tabGroupId) ?? [];
+      existing.push(tab);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.tabs.set(tabGroupId, existing);
+    },
+    modifyProps(componentId, modifier) {
+      const propsModifier = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        componentId,
+        modifier
+      };
+      const existing = state.propsModifiers.get(componentId) ?? [];
+      existing.push(propsModifier);
+      state.propsModifiers.set(componentId, existing);
+    },
+    addAction(actionBarId, config) {
+      const action = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        actionBarId,
+        ...config
+      };
+      const existing = state.actions.get(actionBarId) ?? [];
+      existing.push(action);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.actions.set(actionBarId, existing);
+    },
+    addValidation(formId, fieldName, validate) {
+      const rule = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        formId,
+        fieldName,
+        validate
+      };
+      const existing = state.validations.get(formId) ?? [];
+      existing.push(rule);
+      state.validations.set(formId, existing);
+    },
+    setText(selector, text) {
+      if (typeof text !== "string") {
+        console.warn(`[Sidekick] setText expects a string value, got ${typeof text}. Ignoring.`);
+        return;
+      }
+      const mod = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: "setText",
+        value: text
+      };
+      state.domModifications.push(mod);
+    },
+    setAttribute(selector, attr, value) {
+      const mod = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: "setAttribute",
+        value: { attr, value }
+      };
+      state.domModifications.push(mod);
+    },
+    setStyle(selector, styles2) {
+      const mod = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: "setStyle",
+        value: styles2
+      };
+      state.domModifications.push(mod);
+    },
+    addClass(selector, className) {
+      const mod = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: "addClass",
+        value: className
+      };
+      state.domModifications.push(mod);
+    },
+    removeClass(selector, className) {
+      const mod = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: "removeClass",
+        value: className
+      };
+      state.domModifications.push(mod);
+    },
+    inject(selector, component, position = "after") {
+      const injection = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        position,
+        component
+      };
+      state.injections.push(injection);
+    }
+  };
+}
+
+// src/primitives/data.ts
+function generateId2() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function createDataPrimitives(state, currentOverrideId) {
+  return {
+    computed(fieldName, compute) {
+      const field = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        fieldName,
+        compute
+      };
+      state.computedFields.set(fieldName, field);
+    },
+    addFilter(name, filter) {
+      const dataFilter = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        name,
+        filter
+      };
+      state.filters.set(name, dataFilter);
+    },
+    transform(dataKey, transformFn) {
+      const transform2 = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        dataKey,
+        transform: transformFn
+      };
+      state.transforms.set(dataKey, transform2);
+    },
+    intercept(pathPattern, handler) {
+      const interceptor = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        pathPattern,
+        handler
+      };
+      state.interceptors.push(interceptor);
+    },
+    addSortOption(tableId, config) {
+      const sortOption = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config
+      };
+      const existing = state.sortOptions.get(tableId) ?? [];
+      existing.push(sortOption);
+      state.sortOptions.set(tableId, existing);
+    },
+    addGroupBy(tableId, config) {
+      const groupByOption = {
+        id: generateId2(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config
+      };
+      const existing = state.groupByOptions.get(tableId) ?? [];
+      existing.push(groupByOption);
+      state.groupByOptions.set(tableId, existing);
+    }
+  };
+}
+
+// src/primitives/behavior.ts
+function generateId3() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function createBehaviorPrimitives(state, currentOverrideId) {
+  return {
+    onEvent(eventName, handler, options = {}) {
+      const eventHandler = {
+        id: generateId3(),
+        overrideId: currentOverrideId,
+        eventName,
+        handler,
+        priority: options.priority ?? 0
+      };
+      const existing = state.eventHandlers.get(eventName) ?? [];
+      existing.push(eventHandler);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.eventHandlers.set(eventName, existing);
+    },
+    addKeyboardShortcut(keys, action, description) {
+      const shortcut = {
+        id: generateId3(),
+        overrideId: currentOverrideId,
+        keys,
+        action,
+        description
+      };
+      state.keyboardShortcuts.push(shortcut);
+    },
+    modifyRoute(pathPattern, handler) {
+      const modifier = {
+        id: generateId3(),
+        overrideId: currentOverrideId,
+        pathPattern,
+        handler
+      };
+      state.routeModifiers.push(modifier);
+    },
+    onDOMEvent(selector, eventType, handler) {
+      const listener = {
+        id: generateId3(),
+        overrideId: currentOverrideId,
+        selector,
+        eventType,
+        handler
+      };
+      state.domEventListeners.push(listener);
+    }
+  };
+}
+
+// src/runtime-loader.ts
+var import_react2 = __toESM(require("react"));
+var import_sucrase = require("sucrase");
+function compileOverride(overrideData) {
+  try {
+    const transformed = (0, import_sucrase.transform)(overrideData.code, {
+      transforms: ["typescript", "jsx"],
+      jsxRuntime: "classic"
+    });
+    const exports2 = {};
+    const require2 = (moduleName) => {
+      if (moduleName === "react") return import_react2.default;
+      if (moduleName === "@usesidekick/react") {
+        return { createOverride, SDK: {} };
+      }
+      throw new Error(`Module not found: ${moduleName}`);
+    };
+    const reactDestructure = "var { useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, memo, forwardRef, createContext, Fragment } = React;\n";
+    const moduleFunction = new Function(
+      "exports",
+      "require",
+      "React",
+      "createOverride",
+      reactDestructure + transformed.code.replace(
+        /import\s+.*?from\s+['"].*?['"]/g,
+        ""
+        // Remove import statements, we inject dependencies
+      ).replace(
+        /export\s+default\s+/,
+        "exports.default = "
+      )
+    );
+    moduleFunction(exports2, require2, import_react2.default, createOverride);
+    if (!exports2.default) {
+      console.error(`[Sidekick] Override ${overrideData.id} has no default export`);
+      return null;
+    }
+    return {
+      id: overrideData.id,
+      name: overrideData.name,
+      description: overrideData.description,
+      enabled: overrideData.enabled,
+      activate: exports2.default.activate
+    };
+  } catch (error) {
+    console.error(`[Sidekick] Failed to compile override ${overrideData.id}:`, error);
+    return null;
+  }
+}
+async function fetchAndCompileOverrides(endpoint) {
+  try {
+    const response = await fetch(endpoint);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch overrides: ${response.status}`);
+    }
+    const data = await response.json();
+    if (!data.success || !Array.isArray(data.overrides)) {
+      throw new Error("Invalid response format");
+    }
+    const compiled = [];
+    for (const override of data.overrides) {
+      const loaded = compileOverride(override);
+      if (loaded) {
+        compiled.push(loaded);
+      }
+    }
+    return compiled;
+  } catch (error) {
+    console.error("[Sidekick] Failed to fetch overrides:", error);
+    return [];
+  }
+}
+
+// src/jsx-runtime.ts
+var import_react3 = __toESM(require("react"));
+var GLOBAL_KEY = "__SIDEKICK_JSX_CONFIG__";
+function getGlobalConfig() {
+  const g = globalThis;
+  if (!g[GLOBAL_KEY]) {
+    g[GLOBAL_KEY] = {
+      getWrapper: null,
+      getReplacement: null,
+      listeners: /* @__PURE__ */ new Set(),
+      seenComponents: /* @__PURE__ */ new Set()
+    };
+  }
+  return g[GLOBAL_KEY];
+}
+var getDebug = () => typeof window !== "undefined" && window.__SIDEKICK_DEBUG__;
+var Fragment = import_react3.default.Fragment;
+function configureJsxRuntime(wrapperGetter, replacementGetter) {
+  const config = getGlobalConfig();
+  config.getWrapper = wrapperGetter;
+  config.getReplacement = replacementGetter;
+  if (getDebug()) console.log("[Sidekick] JSX runtime configured (global)");
+  config.listeners.forEach((listener) => {
+    try {
+      listener();
+    } catch (e) {
+      console.error("[Sidekick] Config change listener error:", e);
+    }
+  });
+}
+function onConfigChange(listener) {
+  const config = getGlobalConfig();
+  config.listeners.add(listener);
+  return () => config.listeners.delete(listener);
+}
+function isJsxRuntimeConfigured() {
+  const config = getGlobalConfig();
+  return config.getWrapper !== null || config.getReplacement !== null;
+}
+function getSeenComponentsFromJsx() {
+  const config = getGlobalConfig();
+  return Array.from(config.seenComponents);
+}
+
+// src/jsx-dev-runtime.ts
+var import_react4 = __toESM(require("react"));
+var GLOBAL_KEY2 = "__SIDEKICK_JSX_CONFIG__";
+function getGlobalConfig2() {
+  const g = globalThis;
+  if (!g[GLOBAL_KEY2]) {
+    g[GLOBAL_KEY2] = {
+      getWrapper: null,
+      getReplacement: null,
+      listeners: /* @__PURE__ */ new Set(),
+      seenComponents: /* @__PURE__ */ new Set()
+    };
+  }
+  return g[GLOBAL_KEY2];
+}
+var getDebug2 = () => typeof window !== "undefined" && window.__SIDEKICK_DEBUG__;
+var Fragment2 = import_react4.default.Fragment;
+function configureJsxDevRuntime(wrapperGetter, replacementGetter) {
+  const config = getGlobalConfig2();
+  config.getWrapper = wrapperGetter;
+  config.getReplacement = replacementGetter;
+  configureJsxRuntime(wrapperGetter, replacementGetter);
+  if (getDebug2()) console.log("[Sidekick] JSX dev runtime configured (global)");
+}
+
+// src/provider.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function tableIdToComponentName(tableId) {
+  return tableId.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function createAutoColumnWrapper(columns, renames, columnOrder, hiddenColumns, rowFilters) {
+  return (Original) => {
+    function AutoColumnInjector(props) {
+      const containerRef = (0, import_react5.useRef)(null);
+      const [cellTargets, setCellTargets] = (0, import_react5.useState)([]);
+      const allTasks = props.tasks || [];
+      const tasks = (0, import_react5.useMemo)(() => {
+        if (!rowFilters || rowFilters.length === 0) return allTasks;
+        return allTasks.filter(
+          (row) => rowFilters.every((rf) => rf.filter(row))
+        );
+      }, [allTasks]);
+      (0, import_react5.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        const table = container.querySelector("table");
+        if (!table) return;
+        table.querySelectorAll("[data-sidekick-injected]").forEach((el) => el.remove());
+        table.querySelectorAll("[data-sidekick-hidden]").forEach((el) => {
+          el.style.display = "";
+          el.removeAttribute("data-sidekick-hidden");
+        });
+        if (renames.length > 0) {
+          const headers = table.querySelectorAll("thead th");
+          headers.forEach((th) => {
+            const text = th.textContent?.trim();
+            if (text) {
+              const rename = renames.find((r) => r.originalHeader === text);
+              if (rename) {
+                th.textContent = rename.newHeader;
+              }
+            }
+          });
+        }
+        if (columnOrder) {
+          const headerRow2 = table.querySelector("thead tr");
+          if (headerRow2) {
+            const ths = Array.from(headerRow2.querySelectorAll("th"));
+            const headerToIndex = /* @__PURE__ */ new Map();
+            ths.forEach((th, i) => {
+              const text = th.textContent?.trim() ?? "";
+              headerToIndex.set(text, i);
+            });
+            const orderedIndices = [];
+            const usedIndices = /* @__PURE__ */ new Set();
+            for (const headerName of columnOrder.order) {
+              const idx = headerToIndex.get(headerName);
+              if (idx !== void 0) {
+                orderedIndices.push(idx);
+                usedIndices.add(idx);
+              }
+            }
+            for (let i = 0; i < ths.length; i++) {
+              if (!usedIndices.has(i)) {
+                orderedIndices.push(i);
+              }
+            }
+            const sortedThs = orderedIndices.map((i) => ths[i]);
+            for (const th of sortedThs) {
+              headerRow2.appendChild(th);
+            }
+            const bodyRows2 = table.querySelectorAll("tbody tr");
+            bodyRows2.forEach((row) => {
+              const tds = Array.from(row.querySelectorAll("td"));
+              const sortedTds = orderedIndices.map((i) => tds[i]).filter(Boolean);
+              for (const td of sortedTds) {
+                row.appendChild(td);
+              }
+            });
+          }
+        }
+        if (hiddenColumns && hiddenColumns.length > 0) {
+          const headers = table.querySelectorAll("thead th");
+          const hiddenHeaders = new Set(hiddenColumns.map((h) => h.header));
+          const hiddenIndices = /* @__PURE__ */ new Set();
+          headers.forEach((th, i) => {
+            const text = th.textContent?.trim() ?? "";
+            if (hiddenHeaders.has(text)) {
+              th.style.display = "none";
+              th.setAttribute("data-sidekick-hidden", "true");
+              hiddenIndices.add(i);
+            }
+          });
+          if (hiddenIndices.size > 0) {
+            const bodyRows2 = table.querySelectorAll("tbody tr");
+            bodyRows2.forEach((row) => {
+              const tds = row.querySelectorAll("td");
+              tds.forEach((td, i) => {
+                if (hiddenIndices.has(i)) {
+                  td.style.display = "none";
+                  td.setAttribute("data-sidekick-hidden", "true");
+                }
+              });
+            });
+          }
+        }
+        const headerRow = table.querySelector("thead tr");
+        if (headerRow) {
+          for (const col of columns) {
+            const th = document.createElement("th");
+            th.className = "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider";
+            th.textContent = col.header;
+            th.setAttribute("data-sidekick-injected", "true");
+            headerRow.appendChild(th);
+          }
+        }
+        const bodyRows = table.querySelectorAll("tbody tr");
+        const targets = [];
+        bodyRows.forEach((row, rowIndex) => {
+          for (let colIndex = 0; colIndex < columns.length; colIndex++) {
+            const td = document.createElement("td");
+            td.className = "px-6 py-4 whitespace-nowrap text-sm text-gray-500";
+            td.setAttribute("data-sidekick-injected", "true");
+            row.appendChild(td);
+            targets.push({ element: td, taskIndex: rowIndex, colIndex });
+          }
+        });
+        setCellTargets(targets);
+        return () => {
+          table.querySelectorAll("[data-sidekick-injected]").forEach((el) => el.remove());
+          table.querySelectorAll("[data-sidekick-hidden]").forEach((el) => {
+            el.style.display = "";
+            el.removeAttribute("data-sidekick-hidden");
+          });
+          setCellTargets([]);
+        };
+      }, [tasks]);
+      const filteredProps = rowFilters && rowFilters.length > 0 ? { ...props, tasks } : props;
+      return import_react5.default.createElement(
+        import_react5.default.Fragment,
+        null,
+        import_react5.default.createElement(
+          "div",
+          { ref: containerRef },
+          import_react5.default.createElement(Original, filteredProps)
+        ),
+        ...cellTargets.map((target, idx) => {
+          const task = tasks[target.taskIndex];
+          const col = columns[target.colIndex];
+          if (!task || !col) return null;
+          const accessor = col.accessor;
+          const value = typeof accessor === "function" ? accessor(task) : task[accessor];
+          const content = col.render ? col.render(value, task) : import_react5.default.createElement("span", null, String(value ?? "-"));
+          return (0, import_react_dom.createPortal)(content, target.element, `sidekick-col-${idx}`);
+        })
+      );
+    }
+    AutoColumnInjector.displayName = `AutoColumnInjector(${Original.displayName || Original.name || "Component"})`;
+    return AutoColumnInjector;
+  };
+}
+function getComponentName(type) {
+  if (!type) return null;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || null;
+  }
+  if (typeof type === "object" && type !== null) {
+    const obj = type;
+    if (obj.displayName) return obj.displayName;
+    if (obj.$$typeof?.toString() === "Symbol(react.lazy)") {
+      const payload = obj._payload;
+      if (payload && payload.status === "fulfilled" && payload.value) {
+        return getComponentName(payload.value);
+      }
+    }
+    if (obj.$$typeof) {
+      if (obj.type) return getComponentName(obj.type);
+      if (obj.render) return getComponentName(obj.render);
+    }
+  }
+  return null;
+}
+function transformElementTree(node, wrappers, replacements, wrapCache) {
+  if (node == null || typeof node === "boolean" || typeof node === "string" || typeof node === "number") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    let changed = false;
+    const result = node.map((child) => {
+      const transformed = transformElementTree(child, wrappers, replacements, wrapCache);
+      if (transformed !== child) changed = true;
+      return transformed;
+    });
+    return changed ? result : node;
+  }
+  if (!import_react5.default.isValidElement(node)) return node;
+  const element = node;
+  const originalType = element.type;
+  let newType = originalType;
+  let typeChanged = false;
+  if (typeof originalType === "function" || typeof originalType === "object" && originalType !== null) {
+    const name = getComponentName(originalType);
+    if (name) {
+      let resolvedType = originalType;
+      const maybeObj = originalType;
+      if (maybeObj.$$typeof?.toString() === "Symbol(react.lazy)" && maybeObj._payload?.status === "fulfilled" && maybeObj._payload?.value) {
+        resolvedType = maybeObj._payload.value;
+      }
+      const replacement = replacements.get(name);
+      if (replacement) {
+        newType = replacement;
+        typeChanged = true;
+      } else {
+        const componentWrappers = wrappers.get(name);
+        if (componentWrappers && componentWrappers.length > 0) {
+          if (!wrapCache.has(resolvedType)) {
+            const wrapped = componentWrappers.reduce(
+              (comp, { wrapper, where: wherePredicate }) => {
+                if (wherePredicate) {
+                  const Wrapped = wrapper(comp);
+                  const ConditionalWrapper = (props) => {
+                    if (wherePredicate(props)) {
+                      return import_react5.default.createElement(Wrapped, props);
+                    }
+                    return import_react5.default.createElement(comp, props);
+                  };
+                  ConditionalWrapper.displayName = `ConditionalWrap(${comp.displayName || comp.name || "Component"})`;
+                  return ConditionalWrapper;
+                }
+                return wrapper(comp);
+              },
+              resolvedType
+            );
+            wrapCache.set(resolvedType, wrapped);
+          }
+          newType = wrapCache.get(resolvedType);
+          typeChanged = true;
+        }
+      }
+    }
+  }
+  const childrenProp = element.props.children;
+  const transformedChildren = childrenProp != null ? transformElementTree(childrenProp, wrappers, replacements, wrapCache) : childrenProp;
+  const childrenChanged = transformedChildren !== childrenProp;
+  if (!typeChanged && !childrenChanged) return node;
+  const { children: _children, ...restProps } = element.props;
+  return import_react5.default.createElement(
+    newType,
+    { ...restProps, key: element.key },
+    transformedChildren
+  );
+}
+function createInitialState() {
+  return {
+    overrides: [],
+    // UI state
+    wrappers: /* @__PURE__ */ new Map(),
+    replacements: /* @__PURE__ */ new Map(),
+    styles: [],
+    columns: /* @__PURE__ */ new Map(),
+    columnRenames: /* @__PURE__ */ new Map(),
+    hiddenColumns: /* @__PURE__ */ new Map(),
+    columnOrders: /* @__PURE__ */ new Map(),
+    rowFilters: /* @__PURE__ */ new Map(),
+    menuItems: /* @__PURE__ */ new Map(),
+    tabs: /* @__PURE__ */ new Map(),
+    propsModifiers: /* @__PURE__ */ new Map(),
+    actions: /* @__PURE__ */ new Map(),
+    validations: /* @__PURE__ */ new Map(),
+    // Data state
+    computedFields: /* @__PURE__ */ new Map(),
+    filters: /* @__PURE__ */ new Map(),
+    transforms: /* @__PURE__ */ new Map(),
+    interceptors: [],
+    sortOptions: /* @__PURE__ */ new Map(),
+    groupByOptions: /* @__PURE__ */ new Map(),
+    // Behavior state
+    eventHandlers: /* @__PURE__ */ new Map(),
+    keyboardShortcuts: [],
+    routeModifiers: [],
+    // DOM state
+    domModifications: [],
+    injections: [],
+    domEventListeners: []
+  };
+}
+function SidekickProvider({ children, overridesEndpoint }) {
+  const [state, setState] = (0, import_react5.useState)(createInitialState);
+  const [overrides, setOverrides] = (0, import_react5.useState)([]);
+  const [isReady, setIsReady] = (0, import_react5.useState)(false);
+  const stateRef = (0, import_react5.useRef)(state);
+  stateRef.current = state;
+  (0, import_react5.useEffect)(() => {
+    const initializeOverrides = async () => {
+      const newState = createInitialState();
+      const loadedOverrides = [];
+      if (overridesEndpoint) {
+        console.log("[Sidekick] Fetching overrides from:", overridesEndpoint);
+        const apiOverrides = await fetchAndCompileOverrides(overridesEndpoint);
+        console.log("[Sidekick] Fetched overrides:", apiOverrides.length);
+        for (const override of apiOverrides) {
+          loadedOverrides.push({
+            id: override.id,
+            name: override.name,
+            description: override.description,
+            version: "1.0.0",
+            enabled: override.enabled
+          });
+          if (override.enabled) {
+            console.log(`[Sidekick] Activating override: ${override.id}`);
+            const sdk = {
+              ui: createUIPrimitives(newState, override.id),
+              data: createDataPrimitives(newState, override.id),
+              behavior: createBehaviorPrimitives(newState, override.id)
+            };
+            try {
+              override.activate(sdk);
+              console.log(`[Sidekick] Activated override: ${override.id}`);
+            } catch (error) {
+              console.error(`[Sidekick] Failed to activate override ${override.id}:`, error);
+            }
+          }
+        }
+      } else {
+        const registeredOverrides = getRegisteredOverrides();
+        const flags = loadFlags();
+        for (const module2 of registeredOverrides) {
+          loadedOverrides.push({
+            id: module2.manifest.id,
+            name: module2.manifest.name,
+            description: module2.manifest.description,
+            version: module2.manifest.version,
+            enabled: flags[module2.manifest.id] ?? false
+          });
+        }
+        for (const module2 of registeredOverrides) {
+          const isEnabled = flags[module2.manifest.id] ?? false;
+          if (isEnabled) {
+            console.log(`[Sidekick] Activating override: ${module2.manifest.id}`);
+            const sdk = {
+              ui: createUIPrimitives(newState, module2.manifest.id),
+              data: createDataPrimitives(newState, module2.manifest.id),
+              behavior: createBehaviorPrimitives(newState, module2.manifest.id)
+            };
+            await module2.activate(sdk);
+            console.log(`[Sidekick] After activation, wrappers:`, Array.from(newState.wrappers.keys()));
+          }
+        }
+      }
+      newState.overrides = loadedOverrides;
+      const tableIdsWithMods = /* @__PURE__ */ new Set();
+      for (const tableId of newState.columns.keys()) tableIdsWithMods.add(tableId);
+      for (const tableId of newState.columnRenames.keys()) tableIdsWithMods.add(tableId);
+      for (const tableId of newState.columnOrders.keys()) tableIdsWithMods.add(tableId);
+      for (const tableId of newState.hiddenColumns.keys()) tableIdsWithMods.add(tableId);
+      for (const tableId of newState.rowFilters.keys()) tableIdsWithMods.add(tableId);
+      for (const tableId of tableIdsWithMods) {
+        const cols = newState.columns.get(tableId) ?? [];
+        const tableRenames = newState.columnRenames.get(tableId) ?? [];
+        const tableOrder = newState.columnOrders.get(tableId);
+        const tableHidden = newState.hiddenColumns.get(tableId) ?? [];
+        const tableRowFilters = newState.rowFilters.get(tableId) ?? [];
+        if (cols.length === 0 && tableRenames.length === 0 && !tableOrder && tableHidden.length === 0 && tableRowFilters.length === 0) continue;
+        const componentName = tableIdToComponentName(tableId);
+        console.log(`[Sidekick] Auto-wrapping ${componentName} with ${cols.length} added columns, ${tableRenames.length} renames, ${tableOrder ? "reorder" : "no reorder"}, ${tableHidden.length} hidden, ${tableRowFilters.length} row filters`);
+        const wrapped = {
+          id: `auto-columns-${tableId}`,
+          overrideId: "__sidekick-internal__",
+          wrapper: createAutoColumnWrapper(cols, tableRenames, tableOrder, tableHidden, tableRowFilters),
+          priority: -1e3
+          // Low priority - runs after user wrappers
+        };
+        const existing = newState.wrappers.get(componentName) ?? [];
+        existing.push(wrapped);
+        existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+        newState.wrappers.set(componentName, existing);
+      }
+      setState(newState);
+      stateRef.current = newState;
+      setOverrides(loadedOverrides);
+      const wrapperGetter = (name) => {
+        const wrappers = stateRef.current.wrappers.get(name);
+        if (!wrappers || wrappers.length === 0) return void 0;
+        return (Component) => {
+          return wrappers.reduce(
+            (wrapped, { wrapper, where: wherePredicate }) => {
+              if (wherePredicate) {
+                const Wrapped = wrapper(wrapped);
+                const ConditionalWrapper = (props) => {
+                  if (wherePredicate(props)) {
+                    return import_react5.default.createElement(Wrapped, props);
+                  }
+                  return import_react5.default.createElement(wrapped, props);
+                };
+                ConditionalWrapper.displayName = `ConditionalWrap(${wrapped.displayName || wrapped.name || "Component"})`;
+                return ConditionalWrapper;
+              }
+              return wrapper(wrapped);
+            },
+            Component
+          );
+        };
+      };
+      const replacementGetter = (name) => {
+        return stateRef.current.replacements.get(name);
+      };
+      console.log("[Sidekick] Configuring JSX runtime with", newState.wrappers.size, "wrappers,", newState.replacements.size, "replacements,", newState.columns.size, "column sets");
+      configureJsxRuntime(wrapperGetter, replacementGetter);
+      configureJsxDevRuntime(wrapperGetter, replacementGetter);
+      console.log("[Sidekick] JSX runtime configured");
+      setIsReady(true);
+    };
+    initializeOverrides();
+  }, [overridesEndpoint]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof document === "undefined") return;
+    const styleId = "sidekick-injected-styles";
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = state.styles.map((s) => s.css).join("\n");
+    return () => {
+      if (styleEl && styleEl.parentNode) {
+        styleEl.parentNode.removeChild(styleEl);
+      }
+    };
+  }, [state.styles, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady) return;
+    const wrapperGetter = (name) => {
+      const wrappers = state.wrappers.get(name);
+      if (!wrappers || wrappers.length === 0) return void 0;
+      return (Component) => {
+        return wrappers.reduce(
+          (wrapped, { wrapper, where: wherePredicate }) => {
+            if (wherePredicate) {
+              const Wrapped = wrapper(wrapped);
+              const ConditionalWrapper = (props) => {
+                if (wherePredicate(props)) {
+                  return import_react5.default.createElement(Wrapped, props);
+                }
+                return import_react5.default.createElement(wrapped, props);
+              };
+              ConditionalWrapper.displayName = `ConditionalWrap(${wrapped.displayName || wrapped.name || "Component"})`;
+              return ConditionalWrapper;
+            }
+            return wrapper(wrapped);
+          },
+          Component
+        );
+      };
+    };
+    const replacementGetter = (name) => {
+      return state.replacements.get(name);
+    };
+    configureJsxRuntime(wrapperGetter, replacementGetter);
+    configureJsxDevRuntime(wrapperGetter, replacementGetter);
+  }, [state.wrappers, state.replacements, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof document === "undefined" || state.domModifications.length === 0) return;
+    const originals = /* @__PURE__ */ new Map();
+    function applyModifications() {
+      for (const mod of state.domModifications) {
+        let elements;
+        try {
+          elements = document.querySelectorAll(mod.selector);
+        } catch {
+          console.warn(`[Sidekick] Invalid CSS selector: "${mod.selector}"`);
+          continue;
+        }
+        elements.forEach((el) => {
+          const htmlEl = el;
+          if (!originals.has(el)) {
+            switch (mod.type) {
+              case "setText": {
+                const textNodes = [];
+                const tw = document.createTreeWalker(htmlEl, NodeFilter.SHOW_TEXT);
+                let tn;
+                while (tn = tw.nextNode()) {
+                  textNodes.push({ node: tn, value: tn.nodeValue || "" });
+                }
+                originals.set(el, { type: "setText", value: textNodes });
+                break;
+              }
+              case "setAttribute": {
+                const { attr } = mod.value;
+                originals.set(el, { type: "setAttribute", value: { attr, value: htmlEl.getAttribute(attr) } });
+                break;
+              }
+              case "setStyle":
+                originals.set(el, { type: "setStyle", value: htmlEl.style.cssText });
+                break;
+              case "addClass":
+                originals.set(el, { type: "addClass", value: mod.value });
+                break;
+              case "removeClass":
+                originals.set(el, { type: "removeClass", value: mod.value });
+                break;
+            }
+          }
+          switch (mod.type) {
+            case "setText": {
+              const walker = document.createTreeWalker(htmlEl, NodeFilter.SHOW_TEXT);
+              const firstTextNode = walker.nextNode();
+              if (firstTextNode) {
+                firstTextNode.nodeValue = mod.value;
+                let extra;
+                while (extra = walker.nextNode()) {
+                  extra.nodeValue = "";
+                }
+              }
+              break;
+            }
+            case "setAttribute": {
+              const { attr, value } = mod.value;
+              htmlEl.setAttribute(attr, value);
+              break;
+            }
+            case "setStyle":
+              Object.assign(htmlEl.style, mod.value);
+              break;
+            case "addClass":
+              htmlEl.classList.add(mod.value);
+              break;
+            case "removeClass":
+              htmlEl.classList.remove(mod.value);
+              break;
+          }
+          htmlEl.setAttribute("data-sidekick-dom-mod", "true");
+        });
+      }
+    }
+    applyModifications();
+    const observer = new MutationObserver(() => {
+      applyModifications();
+    });
+    if (document.body) {
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+    return () => {
+      observer.disconnect();
+      originals.forEach((original, el) => {
+        const htmlEl = el;
+        switch (original.type) {
+          case "setText": {
+            const textNodes = original.value;
+            for (const { node, value } of textNodes) {
+              try {
+                node.nodeValue = value;
+              } catch {
+              }
+            }
+            break;
+          }
+          case "setAttribute": {
+            const { attr, value } = original.value;
+            if (value === null) htmlEl.removeAttribute(attr);
+            else htmlEl.setAttribute(attr, value);
+            break;
+          }
+          case "setStyle":
+            htmlEl.style.cssText = original.value;
+            break;
+          case "addClass":
+            htmlEl.classList.remove(original.value);
+            break;
+          case "removeClass":
+            htmlEl.classList.add(original.value);
+            break;
+        }
+        htmlEl.removeAttribute("data-sidekick-dom-mod");
+      });
+    };
+  }, [state.domModifications, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof document === "undefined" || state.keyboardShortcuts.length === 0) return;
+    function matchesKeys(event, keys) {
+      const parts = keys.toLowerCase().split("+").map((s) => s.trim());
+      const keyName = parts[parts.length - 1];
+      const modifiers = new Set(parts.slice(0, -1));
+      const needsCtrl = modifiers.has("ctrl") || modifiers.has("cmd") || modifiers.has("meta");
+      const needsShift = modifiers.has("shift");
+      const needsAlt = modifiers.has("alt");
+      if (needsCtrl !== (event.ctrlKey || event.metaKey)) return false;
+      if (needsShift !== event.shiftKey) return false;
+      if (needsAlt !== event.altKey) return false;
+      return event.key.toLowerCase() === keyName || event.code.toLowerCase() === keyName;
+    }
+    function handleKeydown(event) {
+      for (const shortcut of state.keyboardShortcuts) {
+        if (matchesKeys(event, shortcut.keys)) {
+          event.preventDefault();
+          try {
+            shortcut.action();
+          } catch (error) {
+            console.error(`[Sidekick] Keyboard shortcut error for "${shortcut.keys}":`, error);
+          }
+          return;
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [state.keyboardShortcuts, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof window === "undefined" || state.interceptors.length === 0) return;
+    const originalFetch = window.fetch;
+    window.fetch = async function sidekickFetch(input, init) {
+      const response = await originalFetch.call(window, input, init);
+      const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const method = init?.method || "GET";
+      for (const interceptor of stateRef.current.interceptors) {
+        const pattern = interceptor.pathPattern;
+        const matches = typeof pattern === "string" ? url.includes(pattern) : pattern.test(url);
+        if (matches) {
+          try {
+            const cloned = response.clone();
+            const json = await cloned.json();
+            const modified = interceptor.handler(json, { path: url, method });
+            return new Response(JSON.stringify(modified), {
+              status: response.status,
+              statusText: response.statusText,
+              headers: response.headers
+            });
+          } catch {
+            return response;
+          }
+        }
+      }
+      return response;
+    };
+    return () => {
+      window.fetch = originalFetch;
+    };
+  }, [state.interceptors, isReady]);
+  const [injectionContainers, setInjectionContainers] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof document === "undefined" || state.injections.length === 0) return;
+    const containers = [];
+    function createContainers() {
+      document.querySelectorAll("[data-sidekick-injection]").forEach((el) => el.remove());
+      containers.length = 0;
+      for (const injection of state.injections) {
+        let target;
+        try {
+          target = document.querySelector(injection.selector);
+        } catch {
+          console.warn(`[Sidekick] Invalid CSS selector: "${injection.selector}"`);
+          continue;
+        }
+        if (!target) continue;
+        const container = document.createElement("div");
+        container.setAttribute("data-sidekick-injection", injection.id);
+        switch (injection.position) {
+          case "before":
+            target.parentNode?.insertBefore(container, target);
+            break;
+          case "after":
+            target.parentNode?.insertBefore(container, target.nextSibling);
+            break;
+          case "prepend":
+            target.insertBefore(container, target.firstChild);
+            break;
+          case "append":
+            target.appendChild(container);
+            break;
+        }
+        containers.push({ injection, container });
+      }
+      setInjectionContainers([...containers]);
+    }
+    createContainers();
+    const observer = new MutationObserver(() => {
+      const needsUpdate = state.injections.some((inj) => {
+        try {
+          const existing = document.querySelector(`[data-sidekick-injection="${inj.id}"]`);
+          if (existing) return false;
+          const target = document.querySelector(inj.selector);
+          return !!target;
+        } catch {
+          return false;
+        }
+      });
+      if (needsUpdate) createContainers();
+    });
+    if (document.body) {
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+    return () => {
+      observer.disconnect();
+      document.querySelectorAll("[data-sidekick-injection]").forEach((el) => el.remove());
+      setInjectionContainers([]);
+    };
+  }, [state.injections, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof document === "undefined" || state.domEventListeners.length === 0) return;
+    const cleanups = [];
+    for (const listener of state.domEventListeners) {
+      const handler = (event) => {
+        const target = event.target;
+        if (!target) return;
+        let matched;
+        try {
+          matched = target.matches(listener.selector) ? target : target.closest(listener.selector);
+        } catch {
+          return;
+        }
+        if (matched) {
+          try {
+            listener.handler(event, matched);
+          } catch (error) {
+            console.error(`[Sidekick] DOM event handler error for "${listener.selector}" ${listener.eventType}:`, error);
+          }
+        }
+      };
+      document.addEventListener(listener.eventType, handler);
+      cleanups.push(() => document.removeEventListener(listener.eventType, handler));
+    }
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [state.domEventListeners, isReady]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady || typeof window === "undefined" || state.routeModifiers.length === 0) return;
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    function interceptNavigation(original, data, unused, url) {
+      let finalUrl = url;
+      if (url) {
+        const urlStr = url.toString();
+        for (const modifier of stateRef.current.routeModifiers) {
+          const pattern = modifier.pathPattern;
+          const matches = typeof pattern === "string" ? urlStr.includes(pattern) : pattern.test(urlStr);
+          if (matches) {
+            try {
+              const result = modifier.handler({ path: urlStr, params: {} });
+              if (typeof result === "string") {
+                finalUrl = result;
+              }
+            } catch (error) {
+              console.error(`[Sidekick] Route modifier error:`, error);
+            }
+          }
+        }
+      }
+      original(data, unused, finalUrl);
+    }
+    history.pushState = function(data, unused, url) {
+      interceptNavigation(originalPushState, data, unused, url);
+    };
+    history.replaceState = function(data, unused, url) {
+      interceptNavigation(originalReplaceState, data, unused, url);
+    };
+    const handlePopState = () => {
+      const currentPath = window.location.pathname;
+      for (const modifier of stateRef.current.routeModifiers) {
+        const pattern = modifier.pathPattern;
+        const matches = typeof pattern === "string" ? currentPath.includes(pattern) : pattern.test(currentPath);
+        if (matches) {
+          try {
+            modifier.handler({ path: currentPath, params: {} });
+          } catch (error) {
+            console.error(`[Sidekick] Route modifier error on popstate:`, error);
+          }
+        }
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [state.routeModifiers, isReady]);
+  const isOverrideEnabled = (0, import_react5.useCallback)(
+    (id) => {
+      const override = overrides.find((o) => o.id === id);
+      if (override) return override.enabled;
+      return getFlag(id);
+    },
+    [overrides]
+  );
+  const toggleOverride = (0, import_react5.useCallback)(
+    (id) => {
+      const currentEnabled = getFlag(id);
+      setFlag(id, !currentEnabled);
+      window.location.reload();
+    },
+    []
+  );
+  const getColumns = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.columns.get(tableId) ?? [];
+    },
+    [state.columns]
+  );
+  const getColumnRenames = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.columnRenames.get(tableId) ?? [];
+    },
+    [state.columnRenames]
+  );
+  const getHiddenColumns = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.hiddenColumns.get(tableId) ?? [];
+    },
+    [state.hiddenColumns]
+  );
+  const getColumnOrder = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.columnOrders.get(tableId);
+    },
+    [state.columnOrders]
+  );
+  const getMenuItems = (0, import_react5.useCallback)(
+    (menuId) => {
+      return state.menuItems.get(menuId) ?? [];
+    },
+    [state.menuItems]
+  );
+  const getTabs = (0, import_react5.useCallback)(
+    (tabGroupId) => {
+      return state.tabs.get(tabGroupId) ?? [];
+    },
+    [state.tabs]
+  );
+  const getActions = (0, import_react5.useCallback)(
+    (actionBarId) => {
+      return state.actions.get(actionBarId) ?? [];
+    },
+    [state.actions]
+  );
+  const getValidations = (0, import_react5.useCallback)(
+    (formId) => {
+      return state.validations.get(formId) ?? [];
+    },
+    [state.validations]
+  );
+  const applyPropsModifiers = (0, import_react5.useCallback)(
+    (componentId, props) => {
+      const modifiers = state.propsModifiers.get(componentId) ?? [];
+      return modifiers.reduce((acc, { modifier }) => modifier(acc), props);
+    },
+    [state.propsModifiers]
+  );
+  const getComputedValue = (0, import_react5.useCallback)(
+    (fieldName, data) => {
+      const field = state.computedFields.get(fieldName);
+      if (!field) return void 0;
+      return field.compute(data);
+    },
+    [state.computedFields]
+  );
+  const applyFilters = (0, import_react5.useCallback)(
+    (filterName, items) => {
+      const filter = state.filters.get(filterName);
+      if (!filter) return items;
+      return filter.filter(items);
+    },
+    [state.filters]
+  );
+  const applyTransform = (0, import_react5.useCallback)(
+    (dataKey, data) => {
+      const transform2 = state.transforms.get(dataKey);
+      if (!transform2) return data;
+      return transform2.transform(data);
+    },
+    [state.transforms]
+  );
+  const getSortOptions = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.sortOptions.get(tableId) ?? [];
+    },
+    [state.sortOptions]
+  );
+  const getGroupByOptions = (0, import_react5.useCallback)(
+    (tableId) => {
+      return state.groupByOptions.get(tableId) ?? [];
+    },
+    [state.groupByOptions]
+  );
+  const getKeyboardShortcuts = (0, import_react5.useCallback)(
+    () => {
+      return state.keyboardShortcuts;
+    },
+    [state.keyboardShortcuts]
+  );
+  const emitEvent = (0, import_react5.useCallback)(
+    (eventName, payload) => {
+      const handlers = state.eventHandlers.get(eventName) ?? [];
+      for (const handler of handlers) {
+        try {
+          handler.handler(payload);
+        } catch (error) {
+          console.error(`[Sidekick] Event handler error for ${eventName}:`, error);
+        }
+      }
+    },
+    [state.eventHandlers]
+  );
+  const getWrapper = (0, import_react5.useCallback)(
+    (componentName) => {
+      const wrappers = state.wrappers.get(componentName);
+      if (!wrappers || wrappers.length === 0) return void 0;
+      return (Component) => {
+        return wrappers.reduce(
+          (wrapped, { wrapper }) => wrapper(wrapped),
+          Component
+        );
+      };
+    },
+    [state.wrappers]
+  );
+  const getReplacement = (0, import_react5.useCallback)(
+    (componentName) => {
+      return state.replacements.get(componentName);
+    },
+    [state.replacements]
+  );
+  const contextValue = (0, import_react5.useMemo)(
+    () => ({
+      state,
+      overrides,
+      isOverrideEnabled,
+      toggleOverride,
+      // UI
+      getColumns,
+      getColumnRenames,
+      getHiddenColumns,
+      getColumnOrder,
+      getMenuItems,
+      getTabs,
+      getActions,
+      getValidations,
+      getWrapper,
+      getReplacement,
+      applyPropsModifiers,
+      // Data
+      getComputedValue,
+      applyFilters,
+      applyTransform,
+      getSortOptions,
+      getGroupByOptions,
+      // Behavior
+      getKeyboardShortcuts,
+      emitEvent
+    }),
+    [
+      state,
+      overrides,
+      isOverrideEnabled,
+      toggleOverride,
+      getColumns,
+      getColumnRenames,
+      getHiddenColumns,
+      getColumnOrder,
+      getMenuItems,
+      getTabs,
+      getActions,
+      getValidations,
+      getWrapper,
+      getReplacement,
+      applyPropsModifiers,
+      getComputedValue,
+      applyFilters,
+      applyTransform,
+      getSortOptions,
+      getGroupByOptions,
+      getKeyboardShortcuts,
+      emitEvent
+    ]
+  );
+  const wrapCacheRef = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const transformedChildren = (0, import_react5.useMemo)(() => {
+    if (!isReady) return null;
+    if (state.wrappers.size === 0 && state.replacements.size === 0) return children;
+    return transformElementTree(children, state.wrappers, state.replacements, wrapCacheRef.current);
+  }, [children, isReady, state.wrappers, state.replacements]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SidekickContext.Provider, { value: contextValue, children: [
+    isReady ? transformedChildren : null,
+    injectionContainers.map(
+      ({ injection, container }) => (0, import_react_dom.createPortal)(
+        import_react5.default.createElement(injection.component, {}),
+        container,
+        `sidekick-injection-${injection.id}`
+      )
+    )
+  ] });
+}
+
+// src/components/SidekickPanel.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SidekickPanel({ apiEndpoint, deleteEndpoint, toggleEndpoint, onGenerate, onDelete, onToggle }) {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(() => {
+    if (typeof window === "undefined") return false;
+    return sessionStorage.getItem("sidekick_panel_open") === "true";
+  });
+  const [activeTab, setActiveTab] = (0, import_react6.useState)(() => {
+    if (typeof window === "undefined") return "chat";
+    return sessionStorage.getItem("sidekick_panel_tab") || "chat";
+  });
+  const [messages, setMessages] = (0, import_react6.useState)([]);
+  const [input, setInput] = (0, import_react6.useState)("");
+  const [isGenerating, setIsGenerating] = (0, import_react6.useState)(false);
+  const [deletingId, setDeletingId] = (0, import_react6.useState)(null);
+  const [togglingId, setTogglingId] = (0, import_react6.useState)(null);
+  const [editingOverrideId, setEditingOverrideId] = (0, import_react6.useState)(null);
+  const context = useSidekickSafe();
+  const overrides = context?.overrides ?? [];
+  const effectiveDeleteEndpoint = deleteEndpoint || (apiEndpoint ? apiEndpoint.replace("/generate", "/delete") : void 0);
+  const effectiveToggleEndpoint = toggleEndpoint || (apiEndpoint ? apiEndpoint.replace("/generate", "/toggle") : void 0);
+  (0, import_react6.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    sessionStorage.setItem("sidekick_panel_open", isOpen ? "true" : "false");
+  }, [isOpen]);
+  (0, import_react6.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    sessionStorage.setItem("sidekick_panel_tab", activeTab);
+  }, [activeTab]);
+  const messagesStorageKey = editingOverrideId ? `sidekick_edit_messages_${editingOverrideId}` : "sidekick_messages";
+  (0, import_react6.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const stored = sessionStorage.getItem(messagesStorageKey);
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        setMessages(parsed.map((m) => ({ ...m, timestamp: new Date(m.timestamp) })));
+      } catch {
+        setMessages([]);
+      }
+    } else {
+      setMessages([]);
+    }
+  }, [messagesStorageKey]);
+  (0, import_react6.useEffect)(() => {
+    if (typeof window === "undefined" || messages.length === 0) return;
+    sessionStorage.setItem(messagesStorageKey, JSON.stringify(messages));
+  }, [messages, messagesStorageKey]);
+  const handleSubmit = (0, import_react6.useCallback)(async (e) => {
+    e.preventDefault();
+    if (!input.trim() || isGenerating) return;
+    const userMessage = {
+      id: generateId4(),
+      role: "user",
+      content: input.trim(),
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    const assistantMessage = {
+      id: generateId4(),
+      role: "assistant",
+      content: "Generating your customization...",
+      timestamp: /* @__PURE__ */ new Date(),
+      status: "generating"
+    };
+    setMessages((prev) => [...prev, userMessage, assistantMessage]);
+    setInput("");
+    setIsGenerating(true);
+    try {
+      let result;
+      const requestBody = { request: userMessage.content };
+      if (editingOverrideId) {
+        requestBody.overrideId = editingOverrideId;
+      }
+      if (onGenerate) {
+        result = await onGenerate(userMessage.content);
+      } else if (apiEndpoint) {
+        const response = await fetch(apiEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(requestBody)
+        });
+        result = await response.json();
+      } else {
+        result = {
+          success: false,
+          error: "No API endpoint or onGenerate handler configured"
+        };
+      }
+      const verb = editingOverrideId ? "Updated" : "Created";
+      const successMessage = result.success ? `${verb} "${result.name || result.overrideId}"!
+
+${result.description || ""}
+
+Reload the page to apply changes.` : `Failed to generate: ${result.error}`;
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantMessage.id ? {
+            ...m,
+            content: successMessage,
+            status: result.success ? "success" : "error",
+            overrideId: result.overrideId
+          } : m
+        )
+      );
+    } catch (error) {
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantMessage.id ? {
+            ...m,
+            content: `Error: ${error instanceof Error ? error.message : "Unknown error"}`,
+            status: "error"
+          } : m
+        )
+      );
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [input, isGenerating, onGenerate, apiEndpoint, editingOverrideId]);
+  const handleToggleOverride = (0, import_react6.useCallback)(async (overrideId, enabled) => {
+    setTogglingId(overrideId);
+    try {
+      if (onToggle) {
+        await onToggle(overrideId, enabled);
+      } else if (effectiveToggleEndpoint) {
+        const response = await fetch(effectiveToggleEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ overrideId, enabled })
+        });
+        const result = await response.json();
+        if (!result.success) {
+          throw new Error(result.error || "Toggle failed");
+        }
+      } else {
+        setFlag(overrideId, enabled);
+      }
+      window.location.reload();
+    } catch (error) {
+      alert(`Failed to toggle: ${error instanceof Error ? error.message : "Unknown error"}`);
+      setTogglingId(null);
+    }
+  }, [onToggle, effectiveToggleEndpoint]);
+  const handleDeleteOverride = (0, import_react6.useCallback)(async (overrideId) => {
+    if (!confirm(`Are you sure you want to delete this override? This cannot be undone.`)) {
+      return;
+    }
+    setDeletingId(overrideId);
+    try {
+      let result;
+      if (onDelete) {
+        result = await onDelete(overrideId);
+      } else if (effectiveDeleteEndpoint) {
+        const response = await fetch(effectiveDeleteEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ overrideId })
+        });
+        result = await response.json();
+      } else {
+        result = { success: false, error: "No delete endpoint configured" };
+      }
+      if (result.success) {
+        setFlag(overrideId, false);
+        window.location.reload();
+      } else {
+        alert(`Failed to delete: ${result.error}`);
+      }
+    } catch (error) {
+      alert(`Error: ${error instanceof Error ? error.message : "Unknown error"}`);
+    } finally {
+      setDeletingId(null);
+    }
+  }, [onDelete, effectiveDeleteEndpoint]);
+  const handleRegenerateOverride = (0, import_react6.useCallback)((overrideId) => {
+    setEditingOverrideId(overrideId);
+    setActiveTab("chat");
+    setInput("");
+  }, []);
+  const handleEditOverride = (0, import_react6.useCallback)((overrideId) => {
+    setEditingOverrideId(overrideId);
+    setActiveTab("chat");
+    setInput("");
+  }, []);
+  const handleExitEditMode = (0, import_react6.useCallback)(() => {
+    setEditingOverrideId(null);
+    setInput("");
+  }, []);
+  const handleClearHistory = (0, import_react6.useCallback)(() => {
+    setMessages([]);
+    sessionStorage.removeItem(messagesStorageKey);
+  }, [messagesStorageKey]);
+  if (!isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        style: styles.trigger,
+        "aria-label": "Open Sidekick Panel",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SidekickIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.overlay, onWheel: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.panel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { style: styles.title, children: "Sidekick" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => setIsOpen(false), style: styles.closeButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.tabs, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          onClick: () => setActiveTab("chat"),
+          style: {
+            ...styles.tab,
+            ...activeTab === "chat" ? styles.tabActive : {}
+          },
+          children: "Customize"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "button",
+        {
+          onClick: () => setActiveTab("overrides"),
+          style: {
+            ...styles.tab,
+            ...activeTab === "overrides" ? styles.tabActive : {}
+          },
+          children: [
+            "Overrides (",
+            overrides.length,
+            ")"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.content, children: activeTab === "chat" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ChatTab,
+      {
+        messages,
+        input,
+        isGenerating,
+        onInputChange: setInput,
+        onSubmit: handleSubmit,
+        onClearHistory: handleClearHistory,
+        editingOverride: editingOverrideId ? overrides.find((o) => o.id === editingOverrideId) : void 0,
+        onExitEditMode: handleExitEditMode
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      OverridesTab,
+      {
+        overrides,
+        onToggle: handleToggleOverride,
+        onDelete: handleDeleteOverride,
+        onRegenerate: handleRegenerateOverride,
+        onEdit: handleEditOverride,
+        deletingId,
+        togglingId
+      }
+    ) })
+  ] }) });
+}
+function ChatTab({
+  messages,
+  input,
+  isGenerating,
+  onInputChange,
+  onSubmit,
+  onClearHistory,
+  editingOverride,
+  onExitEditMode
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.chatContainer, children: [
+    editingOverride && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.editHeader, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: styles.editHeaderText, children: [
+        "Editing: ",
+        editingOverride.name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: onExitEditMode, style: styles.editHeaderClose, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.messages, children: messages.length === 0 ? editingOverride ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.emptyState, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { style: styles.emptyTitle, children: [
+        'Edit "',
+        editingOverride.name,
+        '"'
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.emptyDescription, children: "Describe what you want to change about this override, and I'll modify the existing code." }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.examples, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.examplesTitle, children: "Try saying:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { style: styles.examplesList, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Change the color to red"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Make it only apply to high priority items"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Add a hover effect"' })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.emptyState, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.emptyTitle, children: "Customize your app" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.emptyDescription, children: "Describe what you want to change in natural language, and I'll generate the code." }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.examples, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.examplesTitle, children: "Try saying:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { style: styles.examplesList, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Add a column showing days until due date"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Add a banner at the top of the sidebar"' }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: '"Highlight overdue tasks in red"' })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          style: {
+            ...styles.message,
+            ...message.role === "user" ? styles.userMessage : styles.assistantMessage
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.messageContent, children: [
+              message.content,
+              message.status === "generating" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles.spinner, children: "\u27F3" })
+            ] }),
+            message.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.successContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.successBadge, children: [
+                "\u2713 ",
+                editingOverride ? "Updated" : "Created"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  onClick: () => window.location.reload(),
+                  style: styles.reloadButton,
+                  children: "Reload to Apply"
+                }
+              )
+            ] }),
+            message.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.errorBadge, children: "\u2715 Failed" })
+          ]
+        },
+        message.id
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: onClearHistory, style: styles.clearButton, children: "Clear history" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { onSubmit, style: styles.inputForm, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: "text",
+          value: input,
+          onChange: (e) => onInputChange(e.target.value),
+          placeholder: "Describe your customization...",
+          disabled: isGenerating,
+          style: styles.input
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: !input.trim() || isGenerating,
+          style: {
+            ...styles.submitButton,
+            ...!input.trim() || isGenerating ? styles.submitButtonDisabled : {}
+          },
+          children: isGenerating ? "..." : "\u2192"
+        }
+      )
+    ] })
+  ] });
+}
+function OverridesTab({ overrides, onToggle, onDelete, onRegenerate, onEdit, deletingId, togglingId }) {
+  const handleToggle = (override) => {
+    onToggle(override.id, !override.enabled);
+  };
+  if (overrides.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.emptyState, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.emptyTitle, children: "No overrides yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.emptyDescription, children: "Use the Customize tab to create your first customization." })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles.overridesList, children: overrides.map((override) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.overrideItem, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.overrideInfo, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: styles.overrideName, children: override.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: styles.overrideDescription, children: override.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles.overrideActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => onEdit(override.id),
+            style: styles.actionButton,
+            children: "Edit"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => onRegenerate(override.id),
+            style: styles.actionButton,
+            children: "Regenerate"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: () => onDelete(override.id),
+            disabled: deletingId === override.id,
+            style: {
+              ...styles.actionButton,
+              ...styles.deleteButton,
+              ...deletingId === override.id ? styles.actionButtonDisabled : {}
+            },
+            children: deletingId === override.id ? "Deleting..." : "Delete"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => handleToggle(override),
+        disabled: togglingId === override.id,
+        style: {
+          ...styles.toggle,
+          ...override.enabled ? styles.toggleOn : styles.toggleOff,
+          ...togglingId === override.id ? styles.toggleDisabled : {}
+        },
+        children: togglingId === override.id ? "..." : override.enabled ? "ON" : "OFF"
+      }
+    )
+  ] }, override.id)) });
+}
+function SidekickIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 17l10 5 10-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M2 12l10 5 10-5" })
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) });
+}
+function generateId4() {
+  return Math.random().toString(36).substring(2, 11);
+}
+var styles = {
+  trigger: {
+    position: "fixed",
+    bottom: "24px",
+    right: "24px",
+    width: "56px",
+    height: "56px",
+    borderRadius: "50%",
+    backgroundColor: "#3B82F6",
+    color: "white",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    zIndex: 9999
+  },
+  overlay: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: "400px",
+    zIndex: 9999,
+    boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.15)",
+    overscrollBehavior: "contain"
+  },
+  panel: {
+    height: "100%",
+    backgroundColor: "white",
+    display: "flex",
+    flexDirection: "column"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 20px",
+    borderBottom: "1px solid #E5E7EB"
+  },
+  title: {
+    margin: 0,
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#111827"
+  },
+  closeButton: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: "4px",
+    color: "#6B7280"
+  },
+  tabs: {
+    display: "flex",
+    borderBottom: "1px solid #E5E7EB"
+  },
+  tab: {
+    flex: 1,
+    padding: "12px 16px",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#6B7280",
+    borderBottom: "2px solid transparent"
+  },
+  tabActive: {
+    color: "#3B82F6",
+    borderBottomColor: "#3B82F6"
+  },
+  content: {
+    flex: 1,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  },
+  chatContainer: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  messages: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "16px",
+    overscrollBehavior: "contain"
+  },
+  emptyState: {
+    textAlign: "center",
+    padding: "40px 20px"
+  },
+  emptyTitle: {
+    margin: "0 0 8px 0",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#111827"
+  },
+  emptyDescription: {
+    margin: "0 0 24px 0",
+    fontSize: "14px",
+    color: "#6B7280"
+  },
+  examples: {
+    textAlign: "left",
+    backgroundColor: "#F9FAFB",
+    borderRadius: "8px",
+    padding: "16px"
+  },
+  examplesTitle: {
+    margin: "0 0 8px 0",
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "#374151"
+  },
+  examplesList: {
+    margin: 0,
+    padding: "0 0 0 20px",
+    fontSize: "13px",
+    color: "#6B7280",
+    lineHeight: 1.8
+  },
+  message: {
+    marginBottom: "12px",
+    padding: "12px 16px",
+    borderRadius: "12px",
+    fontSize: "14px",
+    lineHeight: 1.5
+  },
+  userMessage: {
+    backgroundColor: "#3B82F6",
+    color: "white",
+    marginLeft: "40px"
+  },
+  assistantMessage: {
+    backgroundColor: "#F3F4F6",
+    color: "#111827",
+    marginRight: "40px"
+  },
+  messageContent: {
+    whiteSpace: "pre-wrap"
+  },
+  spinner: {
+    display: "inline-block",
+    animation: "spin 1s linear infinite"
+  },
+  successContainer: {
+    marginTop: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  successBadge: {
+    fontSize: "12px",
+    color: "#059669",
+    fontWeight: 500
+  },
+  reloadButton: {
+    padding: "8px 16px",
+    backgroundColor: "#059669",
+    color: "white",
+    border: "none",
+    borderRadius: "6px",
+    fontSize: "13px",
+    fontWeight: 500,
+    cursor: "pointer"
+  },
+  errorBadge: {
+    marginTop: "8px",
+    fontSize: "12px",
+    color: "#DC2626",
+    fontWeight: 500
+  },
+  clearButton: {
+    background: "none",
+    border: "none",
+    color: "#6B7280",
+    fontSize: "12px",
+    cursor: "pointer",
+    padding: "8px",
+    textAlign: "center",
+    width: "100%"
+  },
+  inputForm: {
+    display: "flex",
+    gap: "8px",
+    padding: "16px",
+    borderTop: "1px solid #E5E7EB"
+  },
+  input: {
+    flex: 1,
+    padding: "12px 16px",
+    border: "1px solid #E5E7EB",
+    borderRadius: "8px",
+    fontSize: "14px",
+    outline: "none"
+  },
+  submitButton: {
+    padding: "12px 20px",
+    backgroundColor: "#3B82F6",
+    color: "white",
+    border: "none",
+    borderRadius: "8px",
+    fontSize: "16px",
+    cursor: "pointer",
+    fontWeight: 600
+  },
+  submitButtonDisabled: {
+    backgroundColor: "#93C5FD",
+    cursor: "not-allowed"
+  },
+  overridesList: {
+    padding: "16px",
+    flex: 1,
+    overflowY: "auto",
+    overscrollBehavior: "contain"
+  },
+  overrideItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px",
+    backgroundColor: "#F9FAFB",
+    borderRadius: "8px",
+    marginBottom: "12px"
+  },
+  overrideInfo: {
+    flex: 1,
+    marginRight: "16px"
+  },
+  overrideName: {
+    margin: "0 0 4px 0",
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#111827"
+  },
+  overrideDescription: {
+    margin: 0,
+    fontSize: "13px",
+    color: "#6B7280"
+  },
+  toggle: {
+    padding: "6px 12px",
+    borderRadius: "4px",
+    border: "none",
+    fontSize: "12px",
+    fontWeight: 600,
+    cursor: "pointer"
+  },
+  toggleOn: {
+    backgroundColor: "#059669",
+    color: "white"
+  },
+  toggleOff: {
+    backgroundColor: "#E5E7EB",
+    color: "#6B7280"
+  },
+  toggleDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  overrideActions: {
+    display: "flex",
+    gap: "8px",
+    marginTop: "8px"
+  },
+  actionButton: {
+    padding: "4px 8px",
+    fontSize: "11px",
+    fontWeight: 500,
+    border: "1px solid #E5E7EB",
+    borderRadius: "4px",
+    backgroundColor: "white",
+    color: "#6B7280",
+    cursor: "pointer"
+  },
+  actionButtonDisabled: {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  deleteButton: {
+    color: "#DC2626",
+    borderColor: "#FCA5A5"
+  },
+  editHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 16px",
+    backgroundColor: "#EFF6FF",
+    borderBottom: "1px solid #BFDBFE"
+  },
+  editHeaderText: {
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#1D4ED8"
+  },
+  editHeaderClose: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#1D4ED8",
+    padding: "2px 6px",
+    borderRadius: "4px"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidekickPanel,
+  SidekickProvider,
+  configureJsxRuntime,
+  createOverride,
+  getFlag,
+  getRegisteredOverrides,
+  getSeenComponentsFromJsx,
+  isJsxRuntimeConfigured,
+  loadFlags,
+  onConfigChange,
+  registerOverride,
+  saveFlags,
+  setFlag,
+  toggleFlag,
+  useActions,
+  useAddedColumns,
+  useColumnOrder,
+  useColumnRenames,
+  useComputedField,
+  useEventEmitter,
+  useFilter,
+  useGroupByOptions,
+  useHiddenColumns,
+  useKeyboardShortcuts,
+  useMenuItems,
+  usePropsModifier,
+  useSidekick,
+  useSidekickSafe,
+  useSortOptions,
+  useTabs,
+  useValidations
+});
+//# sourceMappingURL=index.js.map