mito-ai 0.1.58__py3-none-any.whl → 0.1.60__py3-none-any.whl

mito_ai-0.1.58.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.03302cc521d72eb56b00.js → mito_ai-0.1.60.data/data/share/jupyter/labextensions/mito_ai/static/lib_index_js.dccfa541c464ee0e5cd4.js

@@ -1060,7 +1060,7 @@ const ChatDropdown = ({ options, onSelect, filterText, isDropdownFromButton = fa
         // Rules first
         ...rules.map((rule) => ({
             type: 'rule',
-            rule: rule
+            rule: rule.name
         })),
         // Cells second (when user types @Cell or @cell)
         ...cellReferences.map((cell) => ({
@@ -1109,17 +1109,18 @@ const ChatDropdown = ({ options, onSelect, filterText, isDropdownFromButton = fa
         })),
     ];
     let searchFilteredOptions = allOptions.filter((option) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (option.type === 'variable') {
-            return option.variable.variable_name.toLowerCase().includes(effectiveFilterText.toLowerCase()) &&
+            return ((_b = (_a = option.variable.variable_name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '').includes(effectiveFilterText.toLowerCase()) &&
                 option.variable.type !== "<class 'module'>" &&
                 option.variable.variable_name !== "FUNCTIONS"; // This is default exported from mitosheet when you run from mitosheet import * as FUNCTIONS
         }
         else if (option.type === 'file') {
-            return option.file.variable_name.toLowerCase().includes(effectiveFilterText.toLowerCase());
+            return ((_d = (_c = option.file.variable_name) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== null && _d !== void 0 ? _d : '').includes(effectiveFilterText.toLowerCase());
         }
         else if (option.type === 'db') {
-            return option.variable.variable_name.toLowerCase().includes(effectiveFilterText.toLowerCase()) ||
-                option.variable.value.toLowerCase().includes(effectiveFilterText.toLowerCase());
+            return ((_f = (_e = option.variable.variable_name) === null || _e === void 0 ? void 0 : _e.toLowerCase()) !== null && _f !== void 0 ? _f : '').includes(effectiveFilterText.toLowerCase()) ||
+                ((_h = (_g = option.variable.value) === null || _g === void 0 ? void 0 : _g.toLowerCase()) !== null && _h !== void 0 ? _h : '').includes(effectiveFilterText.toLowerCase());
         }
         else if (option.type === 'cell') {
             // Match "CellN" (no space)
@@ -1129,7 +1130,7 @@ const ChatDropdown = ({ options, onSelect, filterText, isDropdownFromButton = fa
                 numberText.includes(effectiveFilterText.toLowerCase());
         }
         else {
-            return option.rule.toLowerCase().includes(effectiveFilterText.toLowerCase());
+            return ((_k = (_j = option.rule) === null || _j === void 0 ? void 0 : _j.toLowerCase()) !== null && _k !== void 0 ? _k : '').includes(effectiveFilterText.toLowerCase());
         }
     });
     // If user is searching (has filter text), show all matches
@@ -2162,6 +2163,7 @@ const MarkdownBlock = ({ markdown, renderMimeRegistry, notebookTracker }) => {
     // This ensures re-renders when cells are reordered (even if count stays the same)
     const cellOrderKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
         return Array.from(cellOrder.entries())
+            .filter(([cellId]) => cellId != null) // Filter out entries with undefined/null keys
             .sort((a, b) => a[0].localeCompare(b[0])) // Sort by cellId for stable string
             .map(([cellId, cellNumber]) => `${cellId}:${cellNumber}`)
             .join(',');
@@ -7629,8 +7631,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const ChartWizardButton = ({ onButtonClick }) => {
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_9__["default"], { icon: _icons_MagicWand__WEBPACK_IMPORTED_MODULE_10__["default"], text: "Chart Wizard", title: "Chart Wizard", onClick: onButtonClick, variant: 'purple', width: 'fit-contents', iconPosition: 'left' })));
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_TextAndIconButton__WEBPACK_IMPORTED_MODULE_9__["default"], { icon: _icons_MagicWand__WEBPACK_IMPORTED_MODULE_10__["default"], text: "Chart Wizard", title: "Chart Wizard", onClick: onButtonClick, variant: "purple", width: "fit-contents", iconPosition: "left" }));
 };
 const ChartWizardPlugin = {
     id: 'mito-ai:chart-wizard',
@@ -7817,16 +7818,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @jupyterlab/apputils */ "webpack/sharing/consume/default/@jupyterlab/apputils");
 /* harmony import */ var _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _utils_parser__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/parser */ "./lib/Extensions/ChartWizard/utils/parser.js");
+/* harmony import */ var _utils_chartExport__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/chartExport */ "./lib/Extensions/ChartWizard/utils/chartExport.js");
 /* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
 /* harmony import */ var _utils_strings__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/strings */ "./lib/utils/strings.js");
-/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
-/* harmony import */ var _AddFieldButton__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./AddFieldButton */ "./lib/Extensions/ChartWizard/AddFieldButton.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/BooleanInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/TupleInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/NumberInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/utils.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/ColorInputRow.js");
-/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/StringInputRow.js");
+/* harmony import */ var _components_LoadingDots__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../components/LoadingDots */ "./lib/components/LoadingDots.js");
+/* harmony import */ var _components_ToggleButton__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../components/ToggleButton */ "./lib/components/ToggleButton.js");
+/* harmony import */ var _AddFieldButton__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./AddFieldButton */ "./lib/Extensions/ChartWizard/AddFieldButton.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/BooleanInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/TupleInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/NumberInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/utils.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/ColorInputRow.js");
+/* harmony import */ var _inputs__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./inputs */ "./lib/Extensions/ChartWizard/inputs/StringInputRow.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useChartConfig.js");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./hooks */ "./lib/Extensions/ChartWizard/hooks/useDebouncedNotebookUpdate.js");
 /* harmony import */ var _utils_notebook__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/notebook */ "./lib/utils/notebook.js");
@@ -7846,6 +7849,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 /**
  * Formats a variable name into a human-readable label.
  * Converts snake_case to Title Case (e.g., "figure_size" -> "Figure Size").
@@ -7863,6 +7868,7 @@ const ChartWizardContent = ({ chartData }) => {
     const widgetRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
     const [overlayHeight, setOverlayHeight] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
     const [isActiveCellMismatch, setIsActiveCellMismatch] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+    const [exportFormat, setExportFormat] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('png');
     // Reset currentSourceCode when switching to a different chart
     (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
         setCurrentSourceCode(null);
@@ -7995,6 +8001,18 @@ const ChartWizardContent = ({ chartData }) => {
         // Update the cell with the updated code
         updateNotebookCell(updatedCode);
     }, [updateNotebookCell]);
+    /**
+     * Exports the chart image to disk via the chartExport utility; shows a notification on error.
+     */
+    const handleExportChart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {
+        void (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_7__.logEvent)('chart_wizard_export_clicked');
+        if (!chartData)
+            return;
+        const result = await (0,_utils_chartExport__WEBPACK_IMPORTED_MODULE_9__.exportChartImage)(chartData, exportFormat);
+        if (!result.success) {
+            _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.Notification.emit(result.error, 'error', { autoClose: 5000 });
+        }
+    }, [chartData, exportFormat]);
     /**
      * Renders the appropriate input field component based on variable type.
      */
@@ -8007,22 +8025,22 @@ const ChartWizardContent = ({ chartData }) => {
         };
         switch (variable.type) {
             case 'boolean':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_9__.BooleanInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_10__.BooleanInputRow, { key: variable.name, ...commonProps });
             case 'tuple':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_10__.TupleInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_11__.TupleInputRow, { key: variable.name, ...commonProps });
             case 'number':
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_11__.NumberInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_12__.NumberInputRow, { key: variable.name, ...commonProps });
             case 'string': {
                 // String input - check if it's a hex color
                 const stringValue = variable.value;
-                const isColor = (0,_inputs__WEBPACK_IMPORTED_MODULE_12__.isHexColor)(stringValue);
+                const isColor = (0,_inputs__WEBPACK_IMPORTED_MODULE_13__.isHexColor)(stringValue);
                 if (isColor) {
-                    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_13__.ColorInputRow, { key: variable.name, ...commonProps });
+                    return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_14__.ColorInputRow, { key: variable.name, ...commonProps });
                 }
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_14__.StringInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_15__.StringInputRow, { key: variable.name, ...commonProps });
             }
             default:
-                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_14__.StringInputRow, { key: variable.name, ...commonProps });
+                return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_inputs__WEBPACK_IMPORTED_MODULE_15__.StringInputRow, { key: variable.name, ...commonProps });
         }
     }, [handleVariableChange]);
     // Memoize input fields to prevent unnecessary re-renders
@@ -8061,7 +8079,12 @@ const ChartWizardContent = ({ chartData }) => {
         hasConfig ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-config-container" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "chart-wizard-config-description" }, "Edit values below to customize your chart. Changes will be reflected in the notebook."),
             inputFields,
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AddFieldButton__WEBPACK_IMPORTED_MODULE_15__["default"], { code: currentSourceCode || (chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode) || null, onFieldAdded: handleFieldAdded, clearPendingUpdate: clearPendingUpdate, onLoadingStateChange: setIsAddingField }))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-no-config" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AddFieldButton__WEBPACK_IMPORTED_MODULE_16__["default"], { code: currentSourceCode || (chartData === null || chartData === void 0 ? void 0 : chartData.sourceCode) || null, onFieldAdded: handleFieldAdded, clearPendingUpdate: clearPendingUpdate, onLoadingStateChange: setIsAddingField }),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-export-section" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", { className: "chart-wizard-section-heading" }, "Export"),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-export-format-row" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_ToggleButton__WEBPACK_IMPORTED_MODULE_17__["default"], { leftText: "PNG", rightText: "JPG", isLeftSelected: exportFormat === 'png', onChange: (isPng) => setExportFormat(isPng ? 'png' : 'jpeg') })),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "button-base button-purple add-field-button", type: "button", title: "Save chart image to file", onClick: handleExportChart }, "Export image")))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-no-config" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null,
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("strong", null, "This chart isn't ready for Chart Wizard yet."),
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null),
@@ -8070,13 +8093,13 @@ const ChartWizardContent = ({ chartData }) => {
                 "Converting",
                 ' ',
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "chart-wizard-loading-dots" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__["default"], null)))) : ('Convert')))),
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_18__["default"], null)))) : ('Convert')))),
         isAddingField && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-overlay", style: { height: overlayHeight > 0 ? `${overlayHeight}px` : '100%' } },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-overlay-text" },
                 "Adding new field",
                 ' ',
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "chart-wizard-loading-dots" },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_16__["default"], null)))))));
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingDots__WEBPACK_IMPORTED_MODULE_18__["default"], null)))))));
 };
 class ChartWizardWidget extends _jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_1__.ReactWidget {
     constructor() {
@@ -8321,10 +8344,46 @@ __webpack_require__.r(__webpack_exports__);
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
  */
 
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/** Use slider when range is small and decimal-friendly (e.g. opacity 0–1). */
+const SLIDER_RANGE_THRESHOLD = 2;
+/** Step for decimal ranges: fine for 0–1, coarser for 1–2. */
+function decimalStep(min, max) {
+    const range = max - min;
+    return range <= 1 ? 0.01 : 0.1;
+}
+const SliderWithNumberInput = ({ value, min, max, step, label, onChange }) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-number-slider-row" },
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange(clamp(parseFloat(e.target.value), min, max)), className: "chart-wizard-range-slider", "aria-label": label }),
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", min: min, max: max, step: step, value: value, onChange: (e) => {
+            let v = parseFloat(e.target.value);
+            if (Number.isNaN(v))
+                v = min;
+            onChange(clamp(v, min, max));
+        }, className: "chart-wizard-number-input chart-wizard-number-input-narrow", "aria-label": `${label} (number)` })));
+const NumberInputOnly = ({ value, min, max, step, onChange }) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: value, min: min, max: max, step: step, onChange: (e) => {
+        let v = parseFloat(e.target.value);
+        if (Number.isNaN(v))
+            v = min !== null && min !== void 0 ? min : 0;
+        if (min !== undefined && max !== undefined)
+            v = clamp(v, min, max);
+        onChange(v);
+    }, className: "chart-wizard-number-input" }));
 const NumberInputRow = ({ variable, label, onVariableChange }) => {
+    const numValue = variable.value;
+    const min = variable.min;
+    const max = variable.max;
+    const hasRange = min !== undefined && max !== undefined;
+    const rangeSpan = hasRange ? max - min : 0;
+    const useSlider = hasRange && rangeSpan <= SLIDER_RANGE_THRESHOLD;
+    const step = useSlider ? decimalStep(min, max) : 1;
+    const handleChange = (value) => {
+        onVariableChange(variable.name, value);
+    };
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: variable.name, className: "chart-wizard-input-row" },
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { className: "chart-wizard-input-label" }, label),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: variable.value, onChange: (e) => onVariableChange(variable.name, parseFloat(e.target.value) || 0), className: "chart-wizard-number-input" })));
+        useSlider && min !== undefined && max !== undefined ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SliderWithNumberInput, { value: numValue, min: min, max: max, step: step, label: label, onChange: handleChange })) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NumberInputOnly, { value: numValue, min: min, max: max, step: step, onChange: handleChange }))));
 };
 
 
@@ -8374,20 +8433,31 @@ __webpack_require__.r(__webpack_exports__);
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
  */
 
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
 const TupleInputRow = ({ variable, label, onVariableChange }) => {
     const tupleValue = variable.value;
+    const min = variable.min;
+    const max = variable.max;
+    const clampOrIdentity = (v, fallback) => {
+        if (min !== undefined && max !== undefined) {
+            return clamp(v, min, max);
+        }
+        return Number.isNaN(v) ? fallback : v;
+    };
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: variable.name, className: "chart-wizard-input-row" },
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { className: "chart-wizard-input-label" }, label),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "chart-wizard-tuple-container" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, "("),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: tupleValue[0], onChange: (e) => {
-                    const newValue = [parseFloat(e.target.value) || 0, tupleValue[1]];
-                    onVariableChange(variable.name, newValue);
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: tupleValue[0], min: min, max: max, step: min !== undefined && max !== undefined && max - min <= 1 ? 'any' : 1, onChange: (e) => {
+                    const v = clampOrIdentity(parseFloat(e.target.value), 0);
+                    onVariableChange(variable.name, [v, tupleValue[1]]);
                 }, className: "chart-wizard-tuple-input" }),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, ","),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: tupleValue[1], onChange: (e) => {
-                    const newValue = [tupleValue[0], parseFloat(e.target.value) || 0];
-                    onVariableChange(variable.name, newValue);
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "number", value: tupleValue[1], min: min, max: max, step: min !== undefined && max !== undefined && max - min <= 1 ? 'any' : 1, onChange: (e) => {
+                    const v = clampOrIdentity(parseFloat(e.target.value), 0);
+                    onVariableChange(variable.name, [tupleValue[0], v]);
                 }, className: "chart-wizard-tuple-input" }),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, ")"))));
 };
@@ -8442,6 +8512,263 @@ const normalizeHexColor = (value) => {
 };
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/utils/chartExport.js":
+/*!*********************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/utils/chartExport.js ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   exportChartImage: () => (/* binding */ exportChartImage)
+/* harmony export */ });
+/* harmony import */ var _imageFinder__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./imageFinder */ "./lib/Extensions/ChartWizard/utils/imageFinder.js");
+/* harmony import */ var _fileSaver__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fileSaver */ "./lib/Extensions/ChartWizard/utils/fileSaver.js");
+/* harmony import */ var _download__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./download */ "./lib/Extensions/ChartWizard/utils/download.js");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+
+
+/**
+ * Exports the chart image to the user's disk. Uses File System Access API when available
+ * so the user can choose the save location; otherwise triggers a download.
+ *
+ * @param chartData - Chart wizard data identifying the notebook panel and cell
+ * @param format - Export format: 'png' or 'jpeg'
+ * @returns Result indicating success or an error message for the UI to display
+ */
+async function exportChartImage(chartData, format = 'png') {
+    const found = (0,_imageFinder__WEBPACK_IMPORTED_MODULE_0__.findChartImageDataUrl)(chartData);
+    if (!found.ok)
+        return { success: false, error: found.error };
+    if ((0,_fileSaver__WEBPACK_IMPORTED_MODULE_1__.isFileSystemAccessAvailable)()) {
+        try {
+            await (0,_fileSaver__WEBPACK_IMPORTED_MODULE_1__.saveWithFilePicker)(found.dataUrl, format);
+        }
+        catch (err) {
+            if (err.name === 'AbortError') {
+                return { success: true };
+            }
+            await (0,_download__WEBPACK_IMPORTED_MODULE_2__.downloadImage)(found.dataUrl, format);
+        }
+    }
+    else {
+        await (0,_download__WEBPACK_IMPORTED_MODULE_2__.downloadImage)(found.dataUrl, format);
+    }
+    return { success: true };
+}
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/utils/download.js":
+/*!******************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/utils/download.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   downloadImage: () => (/* binding */ downloadImage)
+/* harmony export */ });
+/* harmony import */ var _imageConverter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./imageConverter */ "./lib/Extensions/ChartWizard/utils/imageConverter.js");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+const SUGGESTED_NAMES = {
+    png: 'chart.png',
+    jpeg: 'chart.jpg'
+};
+/**
+ * Triggers a browser download of a URL.
+ */
+function triggerDownload(url, filename) {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+}
+/**
+ * Downloads an image using the browser's fallback download mechanism.
+ */
+async function downloadImage(dataUrl, format) {
+    if (format === 'jpeg') {
+        const blob = await (0,_imageConverter__WEBPACK_IMPORTED_MODULE_0__.dataUrlToBlob)(dataUrl, format);
+        const url = URL.createObjectURL(blob);
+        triggerDownload(url, SUGGESTED_NAMES.jpeg);
+        URL.revokeObjectURL(url);
+    }
+    else {
+        triggerDownload(dataUrl, SUGGESTED_NAMES.png);
+    }
+}
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/utils/fileSaver.js":
+/*!*******************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/utils/fileSaver.js ***!
+  \*******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   isFileSystemAccessAvailable: () => (/* binding */ isFileSystemAccessAvailable),
+/* harmony export */   saveWithFilePicker: () => (/* binding */ saveWithFilePicker)
+/* harmony export */ });
+/* harmony import */ var _imageConverter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./imageConverter */ "./lib/Extensions/ChartWizard/utils/imageConverter.js");
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+const SUGGESTED_NAMES = {
+    png: 'chart.png',
+    jpeg: 'chart.jpg'
+};
+const FILE_PICKER_TYPES = {
+    png: [{ description: 'PNG Image', accept: { 'image/png': ['.png'] } }],
+    jpeg: [{ description: 'JPEG Image', accept: { 'image/jpeg': ['.jpg', '.jpeg'] } }]
+};
+/**
+ * Checks if the File System Access API is available.
+ */
+function isFileSystemAccessAvailable() {
+    return ('showSaveFilePicker' in window &&
+        typeof window.showSaveFilePicker ===
+            'function');
+}
+/**
+ * Saves a blob to disk using the File System Access API.
+ */
+async function writeBlobToFile(blob, handle) {
+    const writable = await handle.createWritable();
+    try {
+        await writable.write(blob);
+    }
+    finally {
+        await writable.close();
+    }
+}
+/**
+ * Saves an image to disk using the File System Access API.
+ */
+async function saveWithFilePicker(dataUrl, format) {
+    var _a, _b;
+    const handle = await ((_b = (_a = window).showSaveFilePicker) === null || _b === void 0 ? void 0 : _b.call(_a, {
+        suggestedName: SUGGESTED_NAMES[format],
+        types: FILE_PICKER_TYPES[format]
+    }));
+    if (!handle)
+        return;
+    const blob = await (0,_imageConverter__WEBPACK_IMPORTED_MODULE_0__.dataUrlToBlob)(dataUrl, format);
+    await writeBlobToFile(blob, handle);
+}
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/utils/imageConverter.js":
+/*!************************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/utils/imageConverter.js ***!
+  \************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   dataUrlToBlob: () => (/* binding */ dataUrlToBlob),
+/* harmony export */   dataUrlToJpegBlob: () => (/* binding */ dataUrlToJpegBlob)
+/* harmony export */ });
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+const JPEG_QUALITY = 1.0;
+/**
+ * Converts a data URL image to a JPEG blob.
+ */
+function dataUrlToJpegBlob(dataUrl) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Could not get canvas context'));
+                return;
+            }
+            ctx.drawImage(img, 0, 0);
+            canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))), 'image/jpeg', JPEG_QUALITY);
+        };
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = dataUrl;
+    });
+}
+/**
+ * Converts a data URL to a blob in the specified format.
+ */
+async function dataUrlToBlob(dataUrl, format) {
+    if (format === 'jpeg') {
+        return dataUrlToJpegBlob(dataUrl);
+    }
+    return fetch(dataUrl).then((r) => r.blob());
+}
+
+
+/***/ }),
+
+/***/ "./lib/Extensions/ChartWizard/utils/imageFinder.js":
+/*!*********************************************************!*\
+  !*** ./lib/Extensions/ChartWizard/utils/imageFinder.js ***!
+  \*********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   findChartImageDataUrl: () => (/* binding */ findChartImageDataUrl)
+/* harmony export */ });
+/* harmony import */ var _jupyterlab_cells__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @jupyterlab/cells */ "webpack/sharing/consume/default/@jupyterlab/cells");
+/* harmony import */ var _jupyterlab_cells__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_cells__WEBPACK_IMPORTED_MODULE_0__);
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+
+/**
+ * Finds the chart image data URL from the notebook cell output.
+ */
+function findChartImageDataUrl(chartData) {
+    const notebookPanel = chartData.notebookTracker.find((panel) => panel.id === chartData.notebookPanelId);
+    if (!notebookPanel) {
+        return { ok: false, error: 'Could not find the notebook.' };
+    }
+    const cellWidget = notebookPanel.content.widgets.find((cell) => cell.model.id === chartData.cellId);
+    if (!(cellWidget instanceof _jupyterlab_cells__WEBPACK_IMPORTED_MODULE_0__.CodeCell)) {
+        return { ok: false, error: 'Could not find the chart cell.' };
+    }
+    const outputNode = cellWidget.outputArea.node;
+    const img = outputNode.querySelector('.jp-RenderedImage img[src^="data:image"]');
+    if (!img || !img.src || !img.src.startsWith('data:image')) {
+        return {
+            ok: false,
+            error: 'No chart image found. Re-run the chart cell and try again.'
+        };
+    }
+    return { ok: true, dataUrl: img.src };
+}
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/ChartWizard/utils/parser.js":
@@ -8473,9 +8800,21 @@ function parseChartConfig(sourceCode) {
     }
     const configSection = sourceCode.substring(startIndex + configStartMarker.length, endIndex).trim();
     const lines = configSection.split('\n').map(line => line.trim()).filter(line => line.length > 0);
+    // First pass: collect # RANGE lines (format: # RANGE VARIABLE_NAME MIN MAX)
+    const rangeByVar = new Map();
+    const rangeRegex = /^#\s*RANGE\s+([A-Z_][A-Z0-9_]*)\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*$/;
+    for (const line of lines) {
+        const rangeMatch = line.match(rangeRegex);
+        if (rangeMatch && rangeMatch[1] && rangeMatch[2] !== undefined && rangeMatch[3] !== undefined) {
+            const varName = rangeMatch[1];
+            const minVal = parseFloat(rangeMatch[2]);
+            const maxVal = parseFloat(rangeMatch[3]);
+            rangeByVar.set(varName, { min: minVal, max: maxVal });
+        }
+    }
     const variables = [];
     for (const line of lines) {
-        // Skip comment lines
+        // Skip comment-only lines (RANGE lines already processed above)
         if (line.startsWith('#')) {
             continue;
         }
@@ -8486,10 +8825,12 @@ function parseChartConfig(sourceCode) {
             const valueStr = match[2];
             const parsed = parseValue(valueStr.trim());
             if (parsed) {
+                const range = rangeByVar.get(varName);
                 variables.push({
                     name: varName,
                     value: parsed.value,
-                    type: parsed.type
+                    type: parsed.type,
+                    ...(range && { min: range.min, max: range.max })
                 });
             }
         }
@@ -8642,6 +8983,9 @@ function updateChartConfig(sourceCode, variables) {
     // Use updated variables if available, otherwise keep original
     const variablesToWrite = parsed.variables.map(v => varMap.get(v.name) || v);
     for (const variable of variablesToWrite) {
+        if (variable.min !== undefined && variable.max !== undefined) {
+            newConfigSection += `# RANGE ${variable.name} ${variable.min} ${variable.max}\n`;
+        }
         const formattedValue = formatValue(variable.value, variable.type);
         newConfigSection += `${variable.name} = ${formattedValue}\n`;
     }
@@ -9306,10 +9650,10 @@ const getFullErrorMessageFromTraceback = (tracebackArray) => {
 
 /***/ }),
 
-/***/ "./lib/Extensions/MitoThemeLight/index.js":
-/*!************************************************!*\
-  !*** ./lib/Extensions/MitoThemeLight/index.js ***!
-  \************************************************/
+/***/ "./lib/Extensions/MitoThemes/index.js":
+/*!********************************************!*\
+  !*** ./lib/Extensions/MitoThemes/index.js ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -9326,8 +9670,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_jupyterlab_ui_components__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "webpack/sharing/consume/default/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _components_RunCellButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../components/RunCellButton */ "./lib/components/RunCellButton.js");
-/* harmony import */ var _utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/lineNumbers */ "./lib/utils/lineNumbers.js");
+/* harmony import */ var _components_RunCellButton__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../components/RunCellButton */ "./lib/components/RunCellButton.js");
+/* harmony import */ var _utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/lineNumbers */ "./lib/utils/lineNumbers.js");
+/* harmony import */ var _palettes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./palettes */ "./lib/Extensions/MitoThemes/palettes.js");
 /* harmony import */ var _style_RunCellButton_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../style/RunCellButton.css */ "./style/RunCellButton.css");
 /*
  * Copyright (c) Saga Inc.
@@ -9341,6 +9686,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Updates cell numbers for all cells in a notebook.
  * Uses notebook.widgets which is always in the correct order.
@@ -9378,6 +9724,8 @@ function setupCellNumbering(notebookPanel) {
         updateAllCellNumbers(notebookPanel);
     });
     observer.observe(notebook.node, { childList: true, subtree: true });
+    // Initial update
+    updateAllCellNumbers(notebookPanel);
     // Return cleanup function
     return () => {
         var _a;
@@ -9394,20 +9742,24 @@ function setupCellNumbering(notebookPanel) {
     };
 }
 /**
- * A plugin for the Mito Light Theme.
+ * A plugin for the Mito Themes (Light and Dark).
  *
- * The Run Cell Button, cell numbering, and hidden default toolbar buttons only apply
- * when the Mito Light theme is active.
+ * Registers both Mito Light and Mito Dark themes.
+ * The Run Cell Button, cell numbering, and hidden default toolbar buttons apply
+ * when either Mito theme is active.
  */
 const plugin = {
-    id: 'mito_ai:theme',
-    description: 'Adds the Mito Light theme.',
+    id: 'mito_ai:themes',
+    description: 'Adds the Mito Light and Dark themes.',
     requires: [_jupyterlab_apputils__WEBPACK_IMPORTED_MODULE_0__.IThemeManager, _jupyterlab_translation__WEBPACK_IMPORTED_MODULE_1__.ITranslator, _jupyterlab_notebook__WEBPACK_IMPORTED_MODULE_2__.INotebookTracker],
     activate: (app, manager, translator, notebookTracker) => {
         const trans = translator.load('jupyterlab');
+        // CSS path - single CSS file for both themes (uses CSS variables set by palettes)
         const style = 'mito_ai/index.css';
-        // Store connection for cleanup
-        let widgetAddedConnection = null;
+        const palettes = new _palettes__WEBPACK_IMPORTED_MODULE_6__.MitoPalettes();
+        // Store connections for cleanup
+        let lightWidgetAddedConnection = null;
+        let darkWidgetAddedConnection = null;
         // Store cell numbering cleanup functions for each notebook
         const cellNumberingCleanups = new Map();
         // Add Run Cell button to notebook toolbar
@@ -9428,7 +9780,7 @@ const plugin = {
                     this.addClass('mito-run-cell-button-widget');
                 }
                 render() {
-                    return react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_components_RunCellButton__WEBPACK_IMPORTED_MODULE_6__["default"], { notebookPanel: this.panel });
+                    return react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_components_RunCellButton__WEBPACK_IMPORTED_MODULE_7__["default"], { notebookPanel: this.panel });
                 }
             }
             const runCellWidget = new RunCellButtonWidget(notebookPanel);
@@ -9467,54 +9819,65 @@ const plugin = {
                 cellNumberingCleanups.delete(notebookPanel);
             }
         };
-        // Add buttons and cell numbering to all notebooks
-        const addButtonsToAllNotebooks = () => {
+        // Add cell numbering to a notebook panel (guard against duplicates)
+        const addCellNumbering = (notebookPanel) => {
+            if (cellNumberingCleanups.has(notebookPanel)) {
+                return;
+            }
+            const cleanup = setupCellNumbering(notebookPanel);
+            if (cleanup) {
+                cellNumberingCleanups.set(notebookPanel, cleanup);
+                // Also cleanup when notebook is disposed
+                notebookPanel.disposed.connect(() => {
+                    cellNumberingCleanups.delete(notebookPanel);
+                });
+            }
+        };
+        // Add buttons and cell numbering to all notebooks (for a specific theme)
+        const addButtonsToAllNotebooks = (themeName) => {
             notebookTracker.forEach(widget => {
                 addRunCellButton(widget);
                 // Enable line numbers if needed
-                void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__.enableLineNumbersIfNeeded)(app, widget);
+                void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__.enableLineNumbersIfNeeded)(app, widget);
                 // Setup cell numbering
-                const cleanup = setupCellNumbering(widget);
-                if (cleanup) {
-                    cellNumberingCleanups.set(widget, cleanup);
-                    // Also cleanup when notebook is disposed
-                    widget.disposed.connect(() => {
-                        cellNumberingCleanups.delete(widget);
-                    });
-                }
+                addCellNumbering(widget);
             });
             // Connect to new notebooks
-            widgetAddedConnection = (sender, widget) => {
+            const widgetAddedHandler = (sender, widget) => {
                 setTimeout(() => {
                     // Check if widget is still valid before proceeding
                     if (widget.isDisposed) {
                         return;
                     }
-                    // Only add if Mito Light theme is still active
-                    if (manager.theme === 'Mito Light') {
+                    // Only add if the specified theme is still active
+                    if (manager.theme === themeName) {
                         addRunCellButton(widget);
                         // Enable line numbers if needed
-                        void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_7__.enableLineNumbersIfNeeded)(app, widget);
+                        void (0,_utils_lineNumbers__WEBPACK_IMPORTED_MODULE_8__.enableLineNumbersIfNeeded)(app, widget);
                         // Setup cell numbering
-                        const cleanup = setupCellNumbering(widget);
-                        if (cleanup) {
-                            cellNumberingCleanups.set(widget, cleanup);
-                            // Also cleanup when notebook is disposed
-                            widget.disposed.connect(() => {
-                                cellNumberingCleanups.delete(widget);
-                            });
-                        }
+                        addCellNumbering(widget);
                     }
                 }, 100);
             };
-            notebookTracker.widgetAdded.connect(widgetAddedConnection);
+            if (themeName === 'Mito Light') {
+                lightWidgetAddedConnection = widgetAddedHandler;
+                notebookTracker.widgetAdded.connect(lightWidgetAddedConnection);
+            }
+            else if (themeName === 'Mito Dark') {
+                darkWidgetAddedConnection = widgetAddedHandler;
+                notebookTracker.widgetAdded.connect(darkWidgetAddedConnection);
+            }
         };
         // Remove buttons and cell numbering from all notebooks
         const removeButtonsFromAllNotebooks = () => {
             // Disconnect from new notebooks
-            if (widgetAddedConnection) {
-                notebookTracker.widgetAdded.disconnect(widgetAddedConnection);
-                widgetAddedConnection = null;
+            if (lightWidgetAddedConnection) {
+                notebookTracker.widgetAdded.disconnect(lightWidgetAddedConnection);
+                lightWidgetAddedConnection = null;
+            }
+            if (darkWidgetAddedConnection) {
+                notebookTracker.widgetAdded.disconnect(darkWidgetAddedConnection);
+                darkWidgetAddedConnection = null;
             }
             // Remove from all existing notebooks
             notebookTracker.forEach(widget => {
@@ -9524,33 +9887,323 @@ const plugin = {
             // Clear all cleanup functions
             cellNumberingCleanups.clear();
         };
+        // Register Mito Light theme
         manager.register({
             name: 'Mito Light',
             displayName: trans.__('Mito Light'),
             isLight: true,
             themeScrollbars: false,
             load: async () => {
-                // Load theme CSS (hides default buttons)
+                // Set CSS variables for light theme before loading CSS
+                palettes.setColorsLight();
+                // Load theme CSS (hides default buttons, applies light theme variables)
                 await manager.loadCSS(style);
                 // Add Run Cell buttons to all notebooks and enable line numbers
-                addButtonsToAllNotebooks();
+                addButtonsToAllNotebooks('Mito Light');
             },
             unload: async () => {
                 // Remove Run Cell buttons from all notebooks
                 removeButtonsFromAllNotebooks();
             }
         });
-        // Set Mito Light as default theme if user hasn't explicitly chosen a different theme
-        // This runs after registration so the theme is available
-        if (manager.theme === 'JupyterLab Light' || !manager.theme) {
-            void manager.setTheme('Mito Light');
-        }
+        // Register Mito Dark theme
+        manager.register({
+            name: 'Mito Dark',
+            displayName: trans.__('Mito Dark'),
+            isLight: false,
+            themeScrollbars: false,
+            load: async () => {
+                // Set CSS variables for dark theme before loading CSS
+                palettes.setColorsDark();
+                // Load theme CSS (hides default buttons, applies dark theme variables)
+                await manager.loadCSS(style);
+                // Add Run Cell buttons to all notebooks and enable line numbers
+                addButtonsToAllNotebooks('Mito Dark');
+            },
+            unload: async () => {
+                // Remove Run Cell buttons from all notebooks
+                removeButtonsFromAllNotebooks();
+            }
+        });
+        // Flag to prevent infinite recursion when we convert themes
+        let isConvertingTheme = false;
+        // Helper function to convert non-Mito themes to corresponding Mito theme
+        const convertToMitoTheme = (themeName) => {
+            // Prevent infinite recursion - if we're already converting, don't do it again
+            if (isConvertingTheme) {
+                return;
+            }
+            if (!themeName) {
+                // No theme set, default to Mito Light
+                isConvertingTheme = true;
+                void manager.setTheme('Mito Light').finally(() => {
+                    isConvertingTheme = false;
+                });
+                return;
+            }
+            const isMitoTheme = themeName === 'Mito Light' || themeName === 'Mito Dark';
+            if (isMitoTheme) {
+                // Already a Mito theme, don't change - this ensures user's Mito theme preference is preserved
+                return;
+            }
+            // Convert non-Mito themes to corresponding Mito theme
+            isConvertingTheme = true;
+            if (themeName === 'JupyterLab Dark' || themeName.includes('Dark')) {
+                void manager.setTheme('Mito Dark').finally(() => {
+                    isConvertingTheme = false;
+                });
+            }
+            else {
+                // Default to light theme for any other non-Mito theme (including JupyterLab Light)
+                void manager.setTheme('Mito Light').finally(() => {
+                    isConvertingTheme = false;
+                });
+            }
+        };
+        // Wait for app restoration to complete before checking/setting theme
+        // This ensures saved theme preferences are loaded first
+        void app.restored.then(() => {
+            // Convert theme on initial load if needed
+            convertToMitoTheme(manager.theme);
+        });
+        // Listen for theme changes and automatically convert to Mito theme
+        // This ensures that when users switch themes, they get converted to Mito themes
+        // and the preference is saved properly
+        manager.themeChanged.connect(() => {
+            // Use manager.theme to get the current theme after the change
+            convertToMitoTheme(manager.theme);
+        });
     },
     autoStart: true
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (plugin);
 
 
+/***/ }),
+
+/***/ "./lib/Extensions/MitoThemes/palettes.js":
+/*!***********************************************!*\
+  !*** ./lib/Extensions/MitoThemes/palettes.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MitoPalettes: () => (/* binding */ MitoPalettes)
+/* harmony export */ });
+/*
+ * Copyright (c) Saga Inc.
+ * Distributed under the terms of the GNU Affero General Public License v3.0 License.
+ */
+/**
+ * MitoPalettes class sets CSS variables for light and dark themes.
+ * Similar to catppuccin's approach, this allows a single CSS file to work
+ * for both themes by setting different variable values before loading CSS.
+ */
+class MitoPalettes {
+    /**
+     * Set CSS variables for the light theme
+     */
+    setColorsLight() {
+        // Border colors
+        document.documentElement.style.setProperty('--mito-theme-border-color0', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-border-color1', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-border-color2', '#e0e0e0');
+        document.documentElement.style.setProperty('--mito-theme-border-color3', '#eee');
+        document.documentElement.style.setProperty('--mito-theme-inverse-border-color', '#757575');
+        // UI Font colors
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color2', 'rgba(0, 0, 0, 0.54)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color3', 'rgba(0, 0, 0, 0.38)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color1', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color2', 'rgba(255, 255, 255, 0.7)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color3', 'rgba(255, 255, 255, 0.5)');
+        // Content Font colors
+        document.documentElement.style.setProperty('--mito-theme-content-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color2', 'rgba(0, 0, 0, 0.54)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color3', 'rgba(0, 0, 0, 0.38)');
+        document.documentElement.style.setProperty('--mito-theme-content-link-color', '#0d47a1');
+        document.documentElement.style.setProperty('--mito-theme-content-link-visited-color', '#7b1fa2');
+        // Layout colors
+        document.documentElement.style.setProperty('--mito-theme-layout-color0', 'white');
+        document.documentElement.style.setProperty('--mito-theme-layout-color1', 'white');
+        document.documentElement.style.setProperty('--mito-theme-layout-color2', '#eee');
+        document.documentElement.style.setProperty('--mito-theme-layout-color3', '#bdbdbd');
+        document.documentElement.style.setProperty('--mito-theme-layout-color4', '#757575');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color0', '#111');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color1', '#212121');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color2', '#424242');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color3', '#616161');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color4', '#757575');
+        // Brand colors (using purple variables from light theme)
+        document.documentElement.style.setProperty('--mito-theme-brand-color0', 'var(--purple-900)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color1', 'var(--purple-700)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color2', 'var(--purple-500)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color3', 'var(--purple-300)');
+        document.documentElement.style.setProperty('--mito-theme-brand-color4', 'var(--purple-300)');
+        // Primary button colors (light mode: blue theme to avoid pinkish-purple)
+        document.documentElement.style.setProperty('--mito-theme-button-background', 'var(--blue-300)');
+        document.documentElement.style.setProperty('--mito-theme-button-border', 'var(--blue-900)');
+        document.documentElement.style.setProperty('--mito-theme-button-text', 'var(--blue-900)');
+        document.documentElement.style.setProperty('--mito-theme-button-hover-background', 'var(--blue-400)');
+        // Cell editor colors
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-background', '#f5f5f5');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-border-color', '#e0e0e0');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-active-background', 'var(--mito-theme-layout-color0)');
+        document.documentElement.style.setProperty('--mito-theme-cell-prompt-not-active-font-color', '#616161');
+        document.documentElement.style.setProperty('--mito-theme-cell-outprompt-font-color', '#bf5b3d');
+        // Notebook colors
+        document.documentElement.style.setProperty('--mito-theme-notebook-select-background', 'var(--mito-theme-layout-color1)');
+        document.documentElement.style.setProperty('--mito-theme-notebook-multiselected-color', '#e3f2fd');
+        // Rendermime colors
+        document.documentElement.style.setProperty('--mito-theme-rendermime-error-background', '#fdd');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-background', '#ebebeb');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-hover-background', '#e1f5fe');
+        // Dialog colors
+        document.documentElement.style.setProperty('--mito-theme-dialog-background', 'rgba(0, 0, 0, 0.25)');
+        // Input field colors
+        document.documentElement.style.setProperty('--mito-theme-input-background', '#f5f5f5');
+        document.documentElement.style.setProperty('--mito-theme-input-border-color', 'var(--mito-theme-inverse-border-color)');
+        // Editor colors
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-background', '#d9d9d9');
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-focused-background', '#d7d4f0');
+        document.documentElement.style.setProperty('--mito-theme-editor-cursor-color', 'var(--mito-theme-ui-font-color0)');
+        // Line number colors (grey/white/blue instead of pink)
+        document.documentElement.style.setProperty('--mito-theme-line-number-color', '#92999F');
+        // Code mirror colors
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-keyword-color', '#008000');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-atom-color', '#88f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-number-color', '#080');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-def-color', '#00f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-color', '#212121');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-2-color', 'rgb(0, 54, 109)');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-3-color', '#085');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-punctuation-color', '#05a');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-property-color', '#05a');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-operator-color', '#7800c2');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-comment-color', '#408080');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-color', '#ba2121');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-2-color', '#708');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-meta-color', '#a2f');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-qualifier-color', '#555');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-builtin-color', '#008000');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-bracket-color', '#997');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-tag-color', '#170');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-attribute-color', '#00c');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-header-color', 'blue');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-quote-color', '#090');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-link-color', '#00c');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-error-color', '#f00');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-hr-color', '#999');
+        // Vega colors
+        document.documentElement.style.setProperty('--mito-theme-vega-background', 'white');
+    }
+    /**
+     * Set CSS variables for the dark theme
+     */
+    setColorsDark() {
+        // Border colors
+        document.documentElement.style.setProperty('--mito-theme-border-color0', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-border-color1', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-border-color2', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-border-color3', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-inverse-border-color', '#5a5a5a');
+        // UI Font colors
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color1', 'rgba(255, 255, 255, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color2', 'rgba(255, 255, 255, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-ui-font-color3', 'rgba(255, 255, 255, 0.4)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color0', 'rgba(0, 0, 0, 1)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color1', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color2', 'rgba(0, 0, 0, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-ui-inverse-font-color3', 'rgba(0, 0, 0, 0.4)');
+        // Content Font colors
+        document.documentElement.style.setProperty('--mito-theme-content-font-color0', 'rgba(255, 255, 255, 1)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color1', 'rgba(255, 255, 255, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color2', 'rgba(255, 255, 255, 0.6)');
+        document.documentElement.style.setProperty('--mito-theme-content-font-color3', 'rgba(255, 255, 255, 0.4)');
+        document.documentElement.style.setProperty('--mito-theme-content-link-color', '#7c93ee');
+        document.documentElement.style.setProperty('--mito-theme-content-link-visited-color', '#b39ddb');
+        // Layout colors
+        document.documentElement.style.setProperty('--mito-theme-layout-color0', '#1a1a1a');
+        document.documentElement.style.setProperty('--mito-theme-layout-color1', '#1e1e1e');
+        document.documentElement.style.setProperty('--mito-theme-layout-color2', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-layout-color3', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-layout-color4', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color0', '#ffffff');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color1', '#f0f0f0');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color2', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color3', '#a0a0a0');
+        document.documentElement.style.setProperty('--mito-theme-inverse-layout-color4', '#6e6e6e');
+        // Brand colors (pink-purple theme for dark, starting with #C65FAA)
+        document.documentElement.style.setProperty('--mito-theme-brand-color0', '#C65FAA');
+        document.documentElement.style.setProperty('--mito-theme-brand-color1', '#D97BC0');
+        document.documentElement.style.setProperty('--mito-theme-brand-color2', '#E8A3D5');
+        document.documentElement.style.setProperty('--mito-theme-brand-color3', '#F4D1EA');
+        document.documentElement.style.setProperty('--mito-theme-brand-color4', '#FAE8F5');
+        // Primary button colors (dark mode: lighter brand background, dark brand border)
+        document.documentElement.style.setProperty('--mito-theme-button-background', '#F4D1EA');
+        document.documentElement.style.setProperty('--mito-theme-button-border', '#C65FAA');
+        document.documentElement.style.setProperty('--mito-theme-button-text', 'rgba(0, 0, 0, 0.87)');
+        document.documentElement.style.setProperty('--mito-theme-button-hover-background', '#FAE8F5');
+        // Cell editor colors
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-background', '#1e1e1e');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-border-color', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-cell-editor-active-background', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-cell-prompt-not-active-font-color', '#6e6e6e');
+        document.documentElement.style.setProperty('--mito-theme-cell-outprompt-font-color', '#f59e0b');
+        // Notebook colors
+        document.documentElement.style.setProperty('--mito-theme-notebook-select-background', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-notebook-multiselected-color', 'rgba(198, 95, 170, 0.2)');
+        // Rendermime colors
+        document.documentElement.style.setProperty('--mito-theme-rendermime-error-background', 'rgba(244, 67, 54, 0.2)');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-background', '#252526');
+        document.documentElement.style.setProperty('--mito-theme-rendermime-table-row-hover-background', '#2d2d2d');
+        // Dialog colors
+        document.documentElement.style.setProperty('--mito-theme-dialog-background', 'rgba(0, 0, 0, 0.5)');
+        // Input field colors
+        document.documentElement.style.setProperty('--mito-theme-input-background', '#2d2d2d');
+        document.documentElement.style.setProperty('--mito-theme-input-border-color', '#3c3c3c');
+        // Editor colors
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-background', '#3c3c3c');
+        document.documentElement.style.setProperty('--mito-theme-editor-selected-focused-background', '#3d4a5c');
+        document.documentElement.style.setProperty('--mito-theme-editor-cursor-color', '#ffffff');
+        // Line number colors (grey/white/blue instead of pink)
+        document.documentElement.style.setProperty('--mito-theme-line-number-color', '#92999F');
+        // Code mirror colors
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-keyword-color', '#c586c0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-atom-color', '#b5cea8');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-number-color', '#b5cea8');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-def-color', '#dcdcaa');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-2-color', '#4fc1ff');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-variable-3-color', '#4ec9b0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-punctuation-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-property-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-operator-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-comment-color', '#6a9955');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-color', '#ce9178');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-string-2-color', '#ce9178');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-meta-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-qualifier-color', '#d4d4d4');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-builtin-color', '#4ec9b0');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-bracket-color', '#ffd700');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-tag-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-attribute-color', '#9cdcfe');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-header-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-quote-color', '#6a9955');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-link-color', '#569cd6');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-error-color', '#f44747');
+        document.documentElement.style.setProperty('--mito-theme-mirror-editor-hr-color', '#6e6e6e');
+        // Vega colors
+        document.documentElement.style.setProperty('--mito-theme-vega-background', '#1e1e1e');
+    }
+}
+
+
 /***/ }),
 
 /***/ "./lib/Extensions/NotebookFooter/NotebookFooter.js":
@@ -10845,6 +11498,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const RulesForm = ({ formData, formError, onInputChange, onSubmit, onClose, isEditing }) => {
+    var _a;
     const [isLoading, setIsLoading] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -10865,13 +11519,20 @@ const RulesForm = ({ formData, formError, onInputChange, onSubmit, onClose, isEd
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "text", id: "name", name: "name", value: formData.name, onChange: onInputChange, placeholder: "Enter rule name", required: true })),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "form-group" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { htmlFor: "description" }, "Rule Content"),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { id: "description", name: "description", value: formData.description, onChange: onInputChange, placeholder: "Enter or paste rule content here", rows: 30, required: true, className: "form-textarea" })),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "form-actions" },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: "button-base button-gray", onClick: onClose, disabled: isLoading }, "Cancel"),
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "submit", className: "button-base button-purple", disabled: isLoading }, isLoading ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
-                "Saving Rule",
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { style: { color: 'var(--purple-700)' } },
-                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingCircle__WEBPACK_IMPORTED_MODULE_3__["default"], null)))) : (isEditing ? 'Update Rule' : 'Add Rule')))));
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", { id: "description", name: "description", value: formData.description, onChange: onInputChange, placeholder: "Enter or paste rule content here", rows: 10, required: true, className: "form-textarea" })),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rules-form-footer" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rules-form-footer-left" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "form-group-checkbox" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", { type: "checkbox", id: "isDefault", name: "isDefault", checked: (_a = formData.isDefault) !== null && _a !== void 0 ? _a : false, onChange: onInputChange }),
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", { htmlFor: "isDefault" }, "Default rule")),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("sub", { className: "rules-form-footer-sub" },
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, "Default rules are auto-applied to every prompt."))),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "form-actions" },
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: "button-base button-gray", onClick: onClose, disabled: isLoading }, "Cancel"),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "submit", className: "button-base button-purple", disabled: isLoading }, isLoading ? (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,
+                    "Saving Rule",
+                    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { style: { color: 'var(--purple-700)' } },
+                        react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_components_LoadingCircle__WEBPACK_IMPORTED_MODULE_3__["default"], null)))) : (isEditing ? 'Update Rule' : 'Add Rule'))))));
 };
 
 
@@ -10889,9 +11550,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "webpack/sharing/consume/default/react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _RulesForm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./RulesForm */ "./lib/Extensions/SettingsManager/rules/RulesForm.js");
-/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
-/* harmony import */ var _utils_fileName__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/fileName */ "./lib/utils/fileName.js");
+/* harmony import */ var _RulesForm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./RulesForm */ "./lib/Extensions/SettingsManager/rules/RulesForm.js");
+/* harmony import */ var _restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../restAPI/RestAPI */ "./lib/restAPI/RestAPI.js");
+/* harmony import */ var _utils_fileName__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/fileName */ "./lib/utils/fileName.js");
+/* harmony import */ var _style_button_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../style/button.css */ "./style/button.css");
 /*
  * Copyright (c) Saga Inc.
  * Distributed under the terms of the GNU Affero General Public License v3.0 License.
@@ -10900,19 +11562,23 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 const RulesPage = () => {
     const [modalStatus, setModalStatus] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);
     const [rules, setRules] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
     const [error, setError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const [editingRuleName, setEditingRuleName] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
     const [formData, setFormData] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
         name: '',
-        description: ''
+        description: '',
+        isDefault: false
     });
     const [formError, setFormError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+    const [filterDefaultOnly, setFilterDefaultOnly] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
     const fetchRules = async () => {
         try {
-            const rules = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__.getRules)();
-            setRules(rules.sort());
+            const rulesList = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getRules)();
+            setRules(rulesList.sort((a, b) => a.name.localeCompare(b.name)));
         }
         catch (err) {
             setError(err instanceof Error ? err.message : 'An error occurred');
@@ -10922,35 +11588,66 @@ const RulesPage = () => {
         void fetchRules();
     }, []);
     const handleInputChange = (e) => {
-        const { name, value } = e.target;
+        const target = e.target;
+        const name = target.name;
+        const value = target.type === 'checkbox'
+            ? target.checked
+            : target.value;
         setFormData(prev => ({ ...prev, [name]: value }));
     };
     const handleSubmit = async (e) => {
         e.preventDefault();
-        // Make sure tha the rule is a valid file name
-        if (!(0,_utils_fileName__WEBPACK_IMPORTED_MODULE_2__.isValidFileName)(formData.name)) {
-            setFormError('Invalid rule name. Rules must contain only alphanumeric characters, underscores, or hyphens.');
+        const slugifiedName = (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_3__.slugifyRuleName)(formData.name);
+        if (!slugifiedName) {
+            setFormError('Rule name is required. Use letters, numbers, spaces, hyphens, or underscores.');
             return;
         }
-        else {
-            setFormError(null);
+        setFormError(null);
+        await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.setRule)(slugifiedName, formData.description, formData.isDefault);
+        if (editingRuleName && editingRuleName !== slugifiedName) {
+            await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.deleteRule)(editingRuleName);
         }
-        await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__.setRule)(formData.name, formData.description);
         setModalStatus(undefined);
+        setEditingRuleName(null);
         setFormData({
             name: '',
-            description: ''
+            description: '',
+            isDefault: false
         });
         void fetchRules();
     };
-    const handleRuleClick = async (rule) => {
-        const ruleContent = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_1__.getRule)(rule);
+    const handleRuleClick = async (ruleName) => {
+        const ruleFile = ruleName.includes('.md') ? ruleName : `${ruleName}.md`;
+        const { content: ruleContent, isDefault } = await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.getRule)(ruleFile);
+        const nameWithoutExt = (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_3__.stripFileEnding)(ruleFile);
+        setEditingRuleName(nameWithoutExt);
         setFormData({
-            name: (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_2__.stripFileEnding)(rule),
-            description: ruleContent || ''
+            name: nameWithoutExt,
+            description: ruleContent || '',
+            isDefault
         });
         setModalStatus('edit rule');
     };
+    const handleDeleteRule = async (e, ruleItem) => {
+        e.stopPropagation();
+        const ruleName = (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_3__.stripFileEnding)(ruleItem.name);
+        if (!window.confirm(`Are you sure you want to delete the rule "${ruleName}"?`)) {
+            return;
+        }
+        try {
+            await (0,_restAPI_RestAPI__WEBPACK_IMPORTED_MODULE_2__.deleteRule)(ruleName);
+            if (editingRuleName === ruleName) {
+                setModalStatus(undefined);
+                setEditingRuleName(null);
+                setFormData({ name: '', description: '', isDefault: false });
+            }
+            void fetchRules();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to delete rule');
+        }
+    };
+    const displayedRules = filterDefaultOnly ? rules.filter(r => r.isDefault) : rules;
     return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null,
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "settings-header" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h2", null, "Rules"),
@@ -10958,20 +11655,29 @@ const RulesPage = () => {
                 react__WEBPACK_IMPORTED_MODULE_0___default().createElement("b", null, "\uFF0B Add Rule"))),
         react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Rules provide more context to Ai models to help them follow your preferences, adhere to your organization's style guides, learn niche topics, and be a better colleague."),
         error && react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "error" }, error),
-        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rules-list" }, rules && rules.length > 0 ? rules.map((rule) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: rule, className: "rule-item", onClick: () => handleRuleClick(rule) },
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rules-list-filter" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: !filterDefaultOnly ? 'button-base button-gray rules-list-filter-active' : 'button-base button-gray', onClick: () => setFilterDefaultOnly(false) }, "All"),
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: filterDefaultOnly ? 'button-base button-gray rules-list-filter-active' : 'button-base button-gray', onClick: () => setFilterDefaultOnly(true) }, "Default only")),
+        react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rules-list" }, displayedRules.length > 0 ? displayedRules.map((ruleItem) => (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { key: ruleItem.name, className: "rule-item", onClick: () => handleRuleClick(ruleItem.name) },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rule-content" },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", { className: "rule-name" }, (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_2__.stripFileEnding)(rule)),
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { className: "rule-description" }, "Click update to edit this rule's description and settings.")),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", { className: "rule-name" },
+                    (0,_utils_fileName__WEBPACK_IMPORTED_MODULE_3__.stripFileEnding)(ruleItem.name),
+                    ruleItem.isDefault && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { className: "rule-badge" }, "Default")))),
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "rule-actions" },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: "button-base button-gray" }, "Update"))))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "empty-state" },
-            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "No rules created yet. Add your first rule to get started!")))),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: "button-base button-gray" }, "Update"),
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { type: "button", className: "button-base button-red", onClick: e => handleDeleteRule(e, ruleItem) }, "Delete"))))) : (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "empty-state" },
+            react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, filterDefaultOnly
+                ? 'No default rules. Mark a rule as default in the form to see it here.'
+                : 'No rules created yet. Add your first rule to get started!')))),
         modalStatus && (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "modal-overlay" },
             react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { className: "modal-content modal-content-large", onClick: e => e.stopPropagation() },
-                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_RulesForm__WEBPACK_IMPORTED_MODULE_3__.RulesForm, { formData: formData, formError: formError, onInputChange: handleInputChange, onSubmit: handleSubmit, onClose: () => {
+                react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_RulesForm__WEBPACK_IMPORTED_MODULE_4__.RulesForm, { formData: formData, formError: formError, onInputChange: handleInputChange, onSubmit: handleSubmit, onClose: () => {
                         setModalStatus(undefined);
+                        setEditingRuleName(null);
                         setFormData({
                             name: '',
-                            description: ''
+                            description: '',
+                            isDefault: false
                         });
                     }, isEditing: modalStatus === 'edit rule' }))))));
 };
@@ -12626,16 +13332,6 @@ const MODEL_MAPPINGS = [
         speed: 'Fast',
         complexityHandling: 'Medium'
     },
-    {
-        displayName: _utils_models__WEBPACK_IMPORTED_MODULE_3__.CLAUDE_SONNET_DISPLAY_NAME,
-        fullName: _utils_models__WEBPACK_IMPORTED_MODULE_3__.CLAUDE_SONNET_MODEL_NAME,
-        type: 'smart',
-        goodFor: [...GOOD_FOR_SMART],
-        provider: 'Anthropic',
-        tokenLimit: '1M',
-        speed: 'Medium',
-        complexityHandling: 'High'
-    },
     {
         displayName: _utils_models__WEBPACK_IMPORTED_MODULE_3__.GEMINI_3_FLASH_DISPLAY_NAME,
         fullName: _utils_models__WEBPACK_IMPORTED_MODULE_3__.GEMINI_3_FLASH_MODEL_NAME,
@@ -14686,7 +15382,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Extensions_SettingsManager_SettingsManagerPlugin__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Extensions/SettingsManager/SettingsManagerPlugin */ "./lib/Extensions/SettingsManager/SettingsManagerPlugin.js");
 /* harmony import */ var _Extensions_VersionCheck__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Extensions/VersionCheck */ "./lib/Extensions/VersionCheck/index.js");
 /* harmony import */ var _Extensions_NotebookFooter__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./Extensions/NotebookFooter */ "./lib/Extensions/NotebookFooter/index.js");
-/* harmony import */ var _Extensions_MitoThemeLight__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Extensions/MitoThemeLight */ "./lib/Extensions/MitoThemeLight/index.js");
+/* harmony import */ var _Extensions_MitoThemes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./Extensions/MitoThemes */ "./lib/Extensions/MitoThemes/index.js");
 /* harmony import */ var _Extensions_AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./Extensions/AppManager/ManageAppsPlugin */ "./lib/Extensions/AppManager/ManageAppsPlugin.js");
 /* harmony import */ var _Extensions_ChartWizard_ChartWizardPlugin__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./Extensions/ChartWizard/ChartWizardPlugin */ "./lib/Extensions/ChartWizard/ChartWizardPlugin.js");
 /*
@@ -14722,7 +15418,7 @@ __webpack_require__.r(__webpack_exports__);
     _Extensions_VersionCheck__WEBPACK_IMPORTED_MODULE_9__.versionCheckPlugin,
     _Extensions_NotebookFooter__WEBPACK_IMPORTED_MODULE_10__["default"],
     _Extensions_AppManager_ManageAppsPlugin__WEBPACK_IMPORTED_MODULE_11__["default"],
-    _Extensions_MitoThemeLight__WEBPACK_IMPORTED_MODULE_12__["default"],
+    _Extensions_MitoThemes__WEBPACK_IMPORTED_MODULE_12__["default"],
     _Extensions_ChartWizard_ChartWizardPlugin__WEBPACK_IMPORTED_MODULE_13__["default"]
 ]);
 
@@ -14739,6 +15435,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   addChartField: () => (/* binding */ addChartField),
 /* harmony export */   convertChartCode: () => (/* binding */ convertChartCode),
+/* harmony export */   deleteRule: () => (/* binding */ deleteRule),
 /* harmony export */   getChatHistoryThread: () => (/* binding */ getChatHistoryThread),
 /* harmony export */   getChatHistoryThreads: () => (/* binding */ getChatHistoryThreads),
 /* harmony export */   getDatabaseConnections: () => (/* binding */ getDatabaseConnections),
@@ -14804,10 +15501,14 @@ const updateSettings = async (settingsKey, settingsValue) => {
 RULES ENDPOINTS
 
 ************************************/
-const setRule = async (ruleName, ruleContent) => {
+const setRule = async (ruleName, ruleContent, isDefault) => {
+    const body = { content: ruleContent };
+    if (isDefault !== undefined) {
+        body.is_default = isDefault;
+    }
     const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)(`rules/${ruleName}`, {
         method: 'PUT',
-        body: JSON.stringify({ content: ruleContent }),
+        body: JSON.stringify(body),
     });
     if (resp.error) {
         throw new Error(resp.error.message);
@@ -14815,19 +15516,31 @@ const setRule = async (ruleName, ruleContent) => {
     return resp.data || '';
 };
 const getRule = async (ruleName) => {
-    var _a;
+    var _a, _b;
     const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)(`rules/${ruleName}`);
     if (resp.error) {
         throw new Error(resp.error.message);
     }
-    return (_a = resp.data) === null || _a === void 0 ? void 0 : _a.content;
+    return {
+        content: (_a = resp.data) === null || _a === void 0 ? void 0 : _a.content,
+        isDefault: Boolean((_b = resp.data) === null || _b === void 0 ? void 0 : _b.is_default)
+    };
 };
 const getRules = async () => {
     const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)(`rules`);
     if (resp.error) {
         throw new Error(resp.error.message);
     }
-    return resp.data || [];
+    const data = resp.data || [];
+    return data.map(r => ({ name: r.name, isDefault: Boolean(r.is_default) }));
+};
+const deleteRule = async (ruleName) => {
+    const resp = await (0,_utils__WEBPACK_IMPORTED_MODULE_0__.requestAPI)(`rules/${ruleName}`, {
+        method: 'DELETE',
+    });
+    if (resp.error) {
+        throw new Error(resp.error.message);
+    }
 };
 /************************************
 
@@ -16154,6 +16867,7 @@ const isErrorFixupMessage = (promptType, message, messageContent) => {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   isValidFileName: () => (/* binding */ isValidFileName),
+/* harmony export */   slugifyRuleName: () => (/* binding */ slugifyRuleName),
 /* harmony export */   stripFileEnding: () => (/* binding */ stripFileEnding)
 /* harmony export */ });
 /*
@@ -16165,6 +16879,19 @@ __webpack_require__.r(__webpack_exports__);
 const isValidFileName = (fileName) => {
     return /^[a-zA-Z0-9_-]+$/.test(fileName);
 };
+/**
+ * Converts a rule name to a valid file-name slug: spaces and other separators
+ * become hyphens, invalid characters removed, multiple hyphens collapsed.
+ */
+const slugifyRuleName = (name) => {
+    return name
+        .trim()
+        .replace(/\s+/g, '-')
+        .replace(/[^a-zA-Z0-9_-]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '')
+        .toLowerCase();
+};
 const stripFileEnding = (rule) => {
     return rule.replace('.md', '');
 };
@@ -16446,7 +17173,6 @@ async function getAvailableModels() {
         return [
             GPT_4_1_MODEL_NAME,
             GPT_5_2_MODEL_NAME,
-            CLAUDE_SONNET_MODEL_NAME,
             CLAUDE_HAIKU_MODEL_NAME,
             GEMINI_3_FLASH_MODEL_NAME,
             GEMINI_3_PRO_MODEL_NAME,
@@ -18411,8 +19137,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .add-field-container {
     margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e0e0e0;
 }
 
 .add-field-button {
@@ -18431,7 +19155,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     font-family: inherit;
     box-sizing: border-box;
 }
-`, "",{"version":3,"sources":["webpack://./style/AddFieldButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,gBAAgB;IAChB,iBAAiB;IACjB,6BAA6B;AACjC;;AAEA;IACI,WAAW;AACf;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,sBAAsB;IACtB,kBAAkB;IAClB,iBAAiB;IACjB,gBAAgB;IAChB,oBAAoB;IACpB,sBAAsB;AAC1B","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.add-field-container {\n    margin-top: 16px;\n    padding-top: 16px;\n    border-top: 1px solid #e0e0e0;\n}\n\n.add-field-button {\n    width: 100%;\n}\n\n.add-field-dialog-textarea {\n    width: 100%;\n    padding: 8px;\n    margin-top: 10px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    min-height: 100px;\n    resize: vertical;\n    font-family: inherit;\n    box-sizing: border-box;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/AddFieldButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,gBAAgB;AACpB;;AAEA;IACI,WAAW;AACf;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,eAAe;IACf,sBAAsB;IACtB,kBAAkB;IAClB,iBAAiB;IACjB,gBAAgB;IAChB,oBAAoB;IACpB,sBAAsB;AAC1B","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.add-field-container {\n    margin-top: 16px;\n}\n\n.add-field-button {\n    width: 100%;\n}\n\n.add-field-dialog-textarea {\n    width: 100%;\n    padding: 8px;\n    margin-top: 10px;\n    font-size: 14px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    min-height: 100px;\n    resize: vertical;\n    font-family: inherit;\n    box-sizing: border-box;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -20217,6 +20941,63 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     box-sizing: border-box;
 }
 
+.chart-wizard-number-slider-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+}
+
+.chart-wizard-range-slider {
+    flex: 1;
+    min-width: 0;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--jp-border-color2);
+    border-radius: 3px;
+    outline: none;
+}
+
+.chart-wizard-range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jp-brand-color1);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.chart-wizard-range-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jp-brand-color1);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.chart-wizard-range-slider:focus {
+    outline: none;
+}
+
+.chart-wizard-range-slider:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
+}
+
+.chart-wizard-range-slider:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
+}
+
+.chart-wizard-number-input-narrow {
+    width: 72px;
+    flex-shrink: 0;
+}
+
 .chart-wizard-color-container {
     display: flex;
     gap: 8px;
@@ -20247,6 +21028,27 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     min-height: 0;
 }
 
+.chart-wizard-export-section {
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid var(--jp-border-color2);
+}
+
+.chart-wizard-export-format-row {
+    margin-bottom: 12px;
+}
+
+.chart-wizard-export-format-row .toggle-button-container {
+    width: 100%;
+}
+
+.chart-wizard-section-heading {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 12px 0;
+    color: var(--jp-content-font-color1);
+}
+
 .chart-wizard-empty-state,
 .chart-wizard-no-config {
     flex: 1;
@@ -20327,7 +21129,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .chart-wizard-warning-button:active {
     background-color: var(--yellow-300);
-}`, "",{"version":3,"sources":["webpack://./style/ChartWizardWidget.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,aAAa;IACb,YAAY;IACZ,gBAAgB;IAChB,aAAa;IACb,sBAAsB;IACtB,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,QAAQ;AACZ;;AAEA;IACI,mBAAmB;IACnB,mBAAmB;IACnB,8BAA8B;IAC9B,mBAAmB;IACnB,SAAS;AACb;;AAEA;IACI,oCAAoC;IACpC,eAAe;IACf,gBAAgB;IAChB,oBAAoB;AACxB;;AAEA;IACI,OAAO;IACP,SAAS;IACT,eAAe;AACnB;;AAEA;IACI,kBAAkB;IAClB,oBAAoB;IACpB,mBAAmB;IACnB,eAAe;IACf,cAAc;AAClB;;AAEA;IACI,kBAAkB;IAClB,UAAU;IACV,eAAe;IACf,QAAQ;IACR,SAAS;IACT,SAAS;AACb;;AAEA;IACI,kBAAkB;IAClB,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,yCAAyC;IACzC,mBAAmB;IACnB,sCAAsC;IACtC,sBAAsB;AAC1B;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,uBAAuB;IACvB,kBAAkB;IAClB,+BAA+B;IAC/B,wCAAwC;AAC5C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;IACI,2BAA2B;AAC/B;;AAEA;IACI,6CAA6C;AACjD;;AAEA;IACI,yCAAyC;AAC7C;;AAEA;IACI,wCAAwC;AAC5C;;AAEA;;;;IAII,WAAW;IACX,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,QAAQ;IACR,WAAW;AACf;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,OAAO;IACP,aAAa;AACjB;;AAEA;;IAEI,OAAO;IACP,aAAa;IACb,sBAAsB;IACtB,uBAAuB;AAC3B;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,gBAAgB;AACpB;;AAEA;IACI,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,gFAAgF;IAChF,gBAAgB;IAChB,0CAA0C;IAC1C,aAAa;IACb,mBAAmB;IACnB,uBAAuB;IACvB,aAAa;IACb,mBAAmB;AACvB;;AAEA;IACI,eAAe;IACf,gBAAgB;IAChB,WAAW;AACf;;AAEA;IACI,mCAAmC;IACnC,wBAAwB;IACxB,kBAAkB;IAClB,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;IACf,gBAAgB;IAChB,mCAAmC;IACnC,aAAa;IACb,sBAAsB;IACtB,SAAS;AACb;;AAEA;IACI,OAAO;AACX;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,mCAAmC;IACnC,wBAAwB;IACxB,YAAY;IACZ,iBAAiB;IACjB,kBAAkB;IAClB,eAAe;IACf,gBAAgB;IAChB,eAAe;IACf,sBAAsB;IACtB,sCAAsC;AAC1C;;AAEA;IACI,mCAAmC;AACvC;;AAEA;IACI,mCAAmC;AACvC","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chart-wizard-widget {\n    padding: 10px;\n    height: 100%;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n}\n\n.chart-wizard-input-row {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 15px;\n    gap: 5px;\n}\n\n.chart-wizard-boolean-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n    gap: 12px;\n}\n\n.chart-wizard-input-label {\n    color: var(--jp-content-font-color2);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: none;\n}\n\n.chart-wizard-boolean-label {\n    flex: 1;\n    margin: 0;\n    cursor: pointer;\n}\n\n.chart-wizard-toggle-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n\n.chart-wizard-toggle-input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    width: 0;\n    height: 0;\n    margin: 0;\n}\n\n.chart-wizard-toggle-slider {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 24px;\n    background-color: var(--jp-border-color2);\n    border-radius: 12px;\n    transition: background-color 0.3s ease;\n    box-sizing: border-box;\n}\n\n.chart-wizard-toggle-slider::before {\n    content: '';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    left: 2px;\n    top: 2px;\n    background-color: white;\n    border-radius: 50%;\n    transition: transform 0.3s ease;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color1);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider::before {\n    transform: translateX(20px);\n}\n\n.chart-wizard-toggle-input:focus + .chart-wizard-toggle-slider {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n\n.chart-wizard-toggle-input:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-border-color1);\n}\n\n.chart-wizard-toggle-input:checked:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color0);\n}\n\n.chart-wizard-number-input,\n.chart-wizard-text-input,\n.chart-wizard-color-input,\n.chart-wizard-tuple-input {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.chart-wizard-color-container {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n}\n\n.chart-wizard-color-picker {\n    flex-shrink: 0;\n}\n\n.chart-wizard-color-input {\n    flex: 1;\n}\n\n.chart-wizard-tuple-container {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n}\n\n.chart-wizard-tuple-input {\n    flex: 1;\n}\n\n.chart-wizard-config-container {\n    flex: 1;\n    min-height: 0;\n}\n\n.chart-wizard-empty-state,\n.chart-wizard-no-config {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.chart-wizard-no-config p {\n    text-align: center;\n}\n\n.chart-wizard-loading-dots {\n    display: inline-block;\n    min-width: 1.5em;\n    text-align: left;\n}\n\n.chart-wizard-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    /* Height is set dynamically via inline style to cover full scrollable content */\n    min-height: 100%;\n    background-color: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    pointer-events: all;\n}\n\n.chart-wizard-overlay-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n}\n\n.chart-wizard-warning {\n    background-color: var(--yellow-100);\n    color: var(--yellow-900);\n    padding: 10px 12px;\n    border-radius: 4px;\n    margin-bottom: 15px;\n    font-size: 13px;\n    line-height: 1.4;\n    border: 1px solid var(--yellow-300);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.chart-wizard-warning-content {\n    flex: 1;\n}\n\n.chart-wizard-warning strong {\n    font-weight: 600;\n}\n\n.chart-wizard-warning-button {\n    background-color: var(--yellow-600);\n    color: var(--yellow-900);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    align-self: flex-start;\n    transition: background-color 0.2s ease;\n}\n\n.chart-wizard-warning-button:hover {\n    background-color: var(--yellow-500);\n}\n\n.chart-wizard-warning-button:active {\n    background-color: var(--yellow-300);\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/ChartWizardWidget.css"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.chart-wizard-widget {\n    padding: 10px;\n    height: 100%;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n}\n\n.chart-wizard-input-row {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 15px;\n    gap: 5px;\n}\n\n.chart-wizard-boolean-row {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 12px;\n    gap: 12px;\n}\n\n.chart-wizard-input-label {\n    color: var(--jp-content-font-color2);\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: none;\n}\n\n.chart-wizard-boolean-label {\n    flex: 1;\n    margin: 0;\n    cursor: pointer;\n}\n\n.chart-wizard-toggle-container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    flex-shrink: 0;\n}\n\n.chart-wizard-toggle-input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    width: 0;\n    height: 0;\n    margin: 0;\n}\n\n.chart-wizard-toggle-slider {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 24px;\n    background-color: var(--jp-border-color2);\n    border-radius: 12px;\n    transition: background-color 0.3s ease;\n    box-sizing: border-box;\n}\n\n.chart-wizard-toggle-slider::before {\n    content: '';\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    left: 2px;\n    top: 2px;\n    background-color: white;\n    border-radius: 50%;\n    transition: transform 0.3s ease;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color1);\n}\n\n.chart-wizard-toggle-input:checked + .chart-wizard-toggle-slider::before {\n    transform: translateX(20px);\n}\n\n.chart-wizard-toggle-input:focus + .chart-wizard-toggle-slider {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);\n}\n\n.chart-wizard-toggle-input:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-border-color1);\n}\n\n.chart-wizard-toggle-input:checked:hover + .chart-wizard-toggle-slider {\n    background-color: var(--jp-brand-color0);\n}\n\n.chart-wizard-number-input,\n.chart-wizard-text-input,\n.chart-wizard-color-input,\n.chart-wizard-tuple-input {\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.chart-wizard-number-slider-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n}\n\n.chart-wizard-range-slider {\n    flex: 1;\n    min-width: 0;\n    height: 6px;\n    -webkit-appearance: none;\n    appearance: none;\n    background: var(--jp-border-color2);\n    border-radius: 3px;\n    outline: none;\n}\n\n.chart-wizard-range-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--jp-brand-color1);\n    cursor: pointer;\n    border: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-range-slider::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--jp-brand-color1);\n    cursor: pointer;\n    border: none;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.chart-wizard-range-slider:focus {\n    outline: none;\n}\n\n.chart-wizard-range-slider:focus::-webkit-slider-thumb {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);\n}\n\n.chart-wizard-range-slider:focus::-moz-range-thumb {\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);\n}\n\n.chart-wizard-number-input-narrow {\n    width: 72px;\n    flex-shrink: 0;\n}\n\n.chart-wizard-color-container {\n    display: flex;\n    gap: 8px;\n    width: 100%;\n}\n\n.chart-wizard-color-picker {\n    flex-shrink: 0;\n}\n\n.chart-wizard-color-input {\n    flex: 1;\n}\n\n.chart-wizard-tuple-container {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n}\n\n.chart-wizard-tuple-input {\n    flex: 1;\n}\n\n.chart-wizard-config-container {\n    flex: 1;\n    min-height: 0;\n}\n\n.chart-wizard-export-section {\n    margin-top: 24px;\n    padding-top: 20px;\n    border-top: 1px solid var(--jp-border-color2);\n}\n\n.chart-wizard-export-format-row {\n    margin-bottom: 12px;\n}\n\n.chart-wizard-export-format-row .toggle-button-container {\n    width: 100%;\n}\n\n.chart-wizard-section-heading {\n    font-size: 14px;\n    font-weight: 600;\n    margin: 0 0 12px 0;\n    color: var(--jp-content-font-color1);\n}\n\n.chart-wizard-empty-state,\n.chart-wizard-no-config {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.chart-wizard-no-config p {\n    text-align: center;\n}\n\n.chart-wizard-loading-dots {\n    display: inline-block;\n    min-width: 1.5em;\n    text-align: left;\n}\n\n.chart-wizard-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    /* Height is set dynamically via inline style to cover full scrollable content */\n    min-height: 100%;\n    background-color: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    pointer-events: all;\n}\n\n.chart-wizard-overlay-text {\n    font-size: 16px;\n    font-weight: 500;\n    color: #333;\n}\n\n.chart-wizard-warning {\n    background-color: var(--yellow-100);\n    color: var(--yellow-900);\n    padding: 10px 12px;\n    border-radius: 4px;\n    margin-bottom: 15px;\n    font-size: 13px;\n    line-height: 1.4;\n    border: 1px solid var(--yellow-300);\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.chart-wizard-warning-content {\n    flex: 1;\n}\n\n.chart-wizard-warning strong {\n    font-weight: 600;\n}\n\n.chart-wizard-warning-button {\n    background-color: var(--yellow-600);\n    color: var(--yellow-900);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    align-self: flex-start;\n    transition: background-color 0.2s ease;\n}\n\n.chart-wizard-warning-button:hover {\n    background-color: var(--yellow-500);\n}\n\n.chart-wizard-warning-button:active {\n    background-color: var(--yellow-300);\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -22412,12 +23214,11 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .model-option:hover {
   background-color: var(--jp-layout-color2);
-  color: var(--purple-700);
 }
 
 .model-option.selected {
   background-color: var(--jp-layout-color2);
-  color: var(--purple-700);
+  color: var(--jp-brand-color2);
 }
 
 /* When inside chat-controls - ensure proper alignment with other controls */
@@ -22573,7 +23374,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .model-tooltip-bullet-item:last-child {
   margin-bottom: 0;
-}`, "",{"version":3,"sources":["webpack://./style/ModelSelector.css"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* ModelSelector.css - responsive design with compact mode */\n\n.model-selector {\n  position: relative;\n  flex: 0 0 auto;\n  margin: 0 8px;\n  height: 20px; /* Match height of other elements */\n  display: flex;\n  align-items: center; /* Center vertically */\n  color: var(--jp-ui-font-color2);\n}\n\n.model-selector:hover {\n  color: var(--jp-ui-font-color1);\n}\n\n.model-selector-dropdown {\n  position: relative;\n  height: 20px; /* Fixed height to match other elements */\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center; /* Ensure content is vertically centered */\n  width: min-content;\n  max-width: 18ch;\n}\n\n\n.selected-model {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n}\n\n.dropdown-arrow {\n  font-size: 8px;\n  transition: transform 0.2s;\n  margin-left: 4px;\n  flex-shrink: 0; /* Prevent arrow from shrinking */\n}\n\n/* Model options dropdown */\n.model-options {\n  position: absolute;\n  bottom: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: auto;\n}\n\n.model-option {\n  padding: 4px 8px;\n  font-size: 12px;\n  /* Keep this size for readability */\n  color: var(--jp-content-font-color1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n  white-space: nowrap;\n  /* Prevent text wrapping */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.model-option-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-type-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.model-option:hover {\n  background-color: var(--jp-layout-color2);\n  color: var(--purple-700);\n}\n\n.model-option.selected {\n  background-color: var(--jp-layout-color2);\n  color: var(--purple-700);\n}\n\n/* When inside chat-controls - ensure proper alignment with other controls */\n.chat-controls .model-selector {\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.chat-controls .model-selector-dropdown {\n  height: 20px;\n  align-self: center;\n}\n\n/* Ensure dropdown appears above other elements */\n.model-options {\n  z-index: 1010;\n  /* Higher z-index to ensure visibility */\n}\n\n.model-name {\n  display: inline-block;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: bottom;\n}\n\n/* On wider screens, show only the name of the model*/\n.model-icon {\n  display: none;\n}\n\n.model-name {\n  display: inline;\n}\n\n/* On compact screens, show only the icon */\n@container (max-width: 260px) {\n\n  /* Shift the dropdown to the left to help prevent right-edge overflow */\n  .model-options {\n    left: -40px;\n  }\n\n  .model-icon {\n    display: inline;\n  }\n\n  .model-name {\n    display: none;\n  }\n}\n\n/* Model tooltip - appears to the right of the dropdown, rendered via portal */\n.model-tooltip {\n  position: fixed;\n  top: var(--tooltip-top, 200px);\n  left: var(--tooltip-left, 200px);\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  padding: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 10000; /* High z-index to appear above Jupyter notebook */\n  width: 280px;\n  pointer-events: none; /* Prevent tooltip from blocking mouse events */\n}\n\n.model-tooltip-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.model-tooltip-header {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.model-tooltip-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.model-tooltip-title-icon {\n  flex-shrink: 0;\n  opacity: 0.8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.model-tooltip-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  line-height: 1.2;\n}\n\n.model-tooltip-metadata {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 12px;\n  font-size: 11px;\n}\n\n.model-tooltip-metadata-item {\n  display: flex;\n  gap: 4px;\n}\n\n.model-tooltip-metadata-label {\n  color: var(--jp-content-font-color2);\n  font-weight: 500;\n}\n\n.model-tooltip-metadata-value {\n  color: var(--jp-content-font-color1);\n  font-weight: 600;\n}\n\n.model-tooltip-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.model-tooltip-section-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.model-tooltip-bullet-list {\n  margin: 0;\n  padding-left: 16px;\n  list-style-type: disc;\n}\n\n.model-tooltip-bullet-item {\n  font-size: 12px;\n  color: var(--jp-content-font-color2);\n  line-height: 1.5;\n  margin-bottom: 4px;\n}\n\n.model-tooltip-bullet-item:last-child {\n  margin-bottom: 0;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/ModelSelector.css"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* ModelSelector.css - responsive design with compact mode */\n\n.model-selector {\n  position: relative;\n  flex: 0 0 auto;\n  margin: 0 8px;\n  height: 20px; /* Match height of other elements */\n  display: flex;\n  align-items: center; /* Center vertically */\n  color: var(--jp-ui-font-color2);\n}\n\n.model-selector:hover {\n  color: var(--jp-ui-font-color1);\n}\n\n.model-selector-dropdown {\n  position: relative;\n  height: 20px; /* Fixed height to match other elements */\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center; /* Ensure content is vertically centered */\n  width: min-content;\n  max-width: 18ch;\n}\n\n\n.selected-model {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n}\n\n.dropdown-arrow {\n  font-size: 8px;\n  transition: transform 0.2s;\n  margin-left: 4px;\n  flex-shrink: 0; /* Prevent arrow from shrinking */\n}\n\n/* Model options dropdown */\n.model-options {\n  position: absolute;\n  bottom: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  width: auto;\n}\n\n.model-option {\n  padding: 4px 8px;\n  font-size: 12px;\n  /* Keep this size for readability */\n  color: var(--jp-content-font-color1);\n  cursor: pointer;\n  transition: background-color 0.2s;\n  white-space: nowrap;\n  /* Prevent text wrapping */\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.model-option-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.model-type-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.model-option:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.model-option.selected {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-brand-color2);\n}\n\n/* When inside chat-controls - ensure proper alignment with other controls */\n.chat-controls .model-selector {\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n\n.chat-controls .model-selector-dropdown {\n  height: 20px;\n  align-self: center;\n}\n\n/* Ensure dropdown appears above other elements */\n.model-options {\n  z-index: 1010;\n  /* Higher z-index to ensure visibility */\n}\n\n.model-name {\n  display: inline-block;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: bottom;\n}\n\n/* On wider screens, show only the name of the model*/\n.model-icon {\n  display: none;\n}\n\n.model-name {\n  display: inline;\n}\n\n/* On compact screens, show only the icon */\n@container (max-width: 260px) {\n\n  /* Shift the dropdown to the left to help prevent right-edge overflow */\n  .model-options {\n    left: -40px;\n  }\n\n  .model-icon {\n    display: inline;\n  }\n\n  .model-name {\n    display: none;\n  }\n}\n\n/* Model tooltip - appears to the right of the dropdown, rendered via portal */\n.model-tooltip {\n  position: fixed;\n  top: var(--tooltip-top, 200px);\n  left: var(--tooltip-left, 200px);\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 4px;\n  padding: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  z-index: 10000; /* High z-index to appear above Jupyter notebook */\n  width: 280px;\n  pointer-events: none; /* Prevent tooltip from blocking mouse events */\n}\n\n.model-tooltip-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.model-tooltip-header {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.model-tooltip-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.model-tooltip-title-icon {\n  flex-shrink: 0;\n  opacity: 0.8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.model-tooltip-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  line-height: 1.2;\n}\n\n.model-tooltip-metadata {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 12px;\n  font-size: 11px;\n}\n\n.model-tooltip-metadata-item {\n  display: flex;\n  gap: 4px;\n}\n\n.model-tooltip-metadata-label {\n  color: var(--jp-content-font-color2);\n  font-weight: 500;\n}\n\n.model-tooltip-metadata-value {\n  color: var(--jp-content-font-color1);\n  font-weight: 600;\n}\n\n.model-tooltip-section {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.model-tooltip-section-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-content-font-color1);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.model-tooltip-bullet-list {\n  margin: 0;\n  padding-left: 16px;\n  list-style-type: disc;\n}\n\n.model-tooltip-bullet-item {\n  font-size: 12px;\n  color: var(--jp-content-font-color2);\n  line-height: 1.5;\n  margin-bottom: 4px;\n}\n\n.model-tooltip-bullet-item:last-child {\n  margin-bottom: 0;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -23378,10 +24179,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
 /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_base_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../node_modules/css-loader/dist/cjs.js!./base.css */ "./node_modules/css-loader/dist/cjs.js!./style/base.css");
 // Imports
 
 
+
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_base_css__WEBPACK_IMPORTED_MODULE_2__["default"]);
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `/*
  * Copyright (c) Saga Inc.
@@ -23400,7 +24204,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     transition: border-color 0.2s;
     font-family: var(--jp-ui-font-family);
     resize: vertical;
-    min-height: 120px;
+    min-height: 100px;
+    max-height: 50vh;
 }
 
 .rules-form textarea:focus {
@@ -23416,29 +24221,96 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     display: block;
 }
 
+.rules-form .form-group-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.rules-form .form-group-checkbox input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.rules-form .form-group-checkbox label {
+    margin: 0;
+    cursor: pointer;
+}
+
+.rules-form-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 24px;
+    flex-wrap: wrap;
+}
+
+.rules-form-footer-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.rules-form-footer-left .form-group-checkbox {
+    margin: 0;
+}
+
+.rules-form-footer-sub {
+    margin: 0;
+    color: var(--jp-ui-font-color2);
+    font-size: 12px;
+}
+
+.rules-form .form-actions {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/* Rules list filter */
+.rules-list-filter {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    margin-bottom: 12px;
+}
+
+.rules-list-filter .button-base {
+    padding: 6px 12px;
+    font-size: 13px;
+}
+
+.rules-list-filter .rules-list-filter-active {
+    background-color: var(--jp-layout-color2);
+    font-weight: 500;
+}
+
 /* Rules List Styling */
 .rules-list {
-    margin-top: 24px;
+    margin-top: 0;
     display: flex;
     flex-direction: column;
-    gap: 16px;
 }
 
 .rules-list .rule-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px;
-    border: 1px solid var(--jp-border-color1);
-    border-radius: 8px;
-    background: var(--jp-layout-color0);
-    transition: border-color 0.2s, box-shadow 0.2s;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--jp-border-color1);
+    transition: color 0.15s ease;
     cursor: pointer;
 }
 
-.rules-list .rule-item:hover {
-    border-color: var(--jp-border-color2);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+.rules-list .rule-item:last-child {
+    border-bottom: none;
+}
+
+.rules-list .rule-item:hover .rule-name {
+    color: var(--purple-600);
 }
 
 .rules-list .rule-content {
@@ -23447,18 +24319,25 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .rules-list .rule-name {
-    margin: 0 0 8px 0;
+    margin: 0;
     color: var(--jp-ui-font-color1);
     font-size: 14px;
     font-weight: 500;
     line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-.rules-list .rule-description {
-    margin: 0;
-    color: var(--jp-ui-font-color2);
-    font-size: 14px;
-    line-height: 1.5;
+.rules-list .rule-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1;
+    border-radius: 3px;
+    background-color: var(--purple-300);
+    color: var(--purple-700);
 }
 
 .rules-list .rule-actions {
@@ -23477,7 +24356,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
     margin: 0;
     font-size: 16px;
 }
-`, "",{"version":3,"sources":["webpack://./style/RulesForm.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;IACI,WAAW;IACX,sBAAsB;IACtB,iBAAiB;IACjB,yCAAyC;IACzC,kBAAkB;IAClB,mCAAmC;IACnC,+BAA+B;IAC/B,eAAe;IACf,6BAA6B;IAC7B,qCAAqC;IACrC,gBAAgB;IAChB,iBAAiB;AACrB;;AAEA;IACI,aAAa;IACb,+BAA+B;IAC/B,6CAA6C;AACjD;;AAEA;IACI,+BAA+B;IAC/B,eAAe;IACf,kBAAkB;IAClB,cAAc;AAClB;;AAEA,uBAAuB;AACvB;IACI,gBAAgB;IAChB,aAAa;IACb,sBAAsB;IACtB,SAAS;AACb;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,aAAa;IACb,yCAAyC;IACzC,kBAAkB;IAClB,mCAAmC;IACnC,8CAA8C;IAC9C,eAAe;AACnB;;AAEA;IACI,qCAAqC;IACrC,wCAAwC;AAC5C;;AAEA;IACI,OAAO;IACP,kBAAkB;AACtB;;AAEA;IACI,iBAAiB;IACjB,+BAA+B;IAC/B,eAAe;IACf,gBAAgB;IAChB,cAAc;AAClB;;AAEA;IACI,SAAS;IACT,+BAA+B;IAC/B,eAAe;IACf,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,QAAQ;AACZ;;AAEA;IACI,kBAAkB;IAClB,kBAAkB;IAClB,+BAA+B;IAC/B,kBAAkB;AACtB;;AAEA;IACI,SAAS;IACT,eAAe;AACnB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.rules-form textarea {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 8px 12px;\n    border: 1px solid var(--jp-border-color1);\n    border-radius: 4px;\n    background: var(--jp-layout-color0);\n    color: var(--jp-ui-font-color1);\n    font-size: 14px;\n    transition: border-color 0.2s;\n    font-family: var(--jp-ui-font-family);\n    resize: vertical;\n    min-height: 120px;\n}\n\n.rules-form textarea:focus {\n    outline: none;\n    border-color: var(--purple-500);\n    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);\n}\n\n.rules-form .form-group sub {\n    color: var(--jp-ui-font-color2);\n    margin-top: 4px;\n    margin-bottom: 4px;\n    display: block;\n}\n\n/* Rules List Styling */\n.rules-list {\n    margin-top: 24px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.rules-list .rule-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid var(--jp-border-color1);\n    border-radius: 8px;\n    background: var(--jp-layout-color0);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    cursor: pointer;\n}\n\n.rules-list .rule-item:hover {\n    border-color: var(--jp-border-color2);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.rules-list .rule-content {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.rules-list .rule-name {\n    margin: 0 0 8px 0;\n    color: var(--jp-ui-font-color1);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n}\n\n.rules-list .rule-description {\n    margin: 0;\n    color: var(--jp-ui-font-color2);\n    font-size: 14px;\n    line-height: 1.5;\n}\n\n.rules-list .rule-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.rules-list .empty-state {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--jp-ui-font-color2);\n    font-style: italic;\n}\n\n.rules-list .empty-state p {\n    margin: 0;\n    font-size: 16px;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/RulesForm.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAIF;IACI,WAAW;IACX,sBAAsB;IACtB,iBAAiB;IACjB,yCAAyC;IACzC,kBAAkB;IAClB,mCAAmC;IACnC,+BAA+B;IAC/B,eAAe;IACf,6BAA6B;IAC7B,qCAAqC;IACrC,gBAAgB;IAChB,iBAAiB;IACjB,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,+BAA+B;IAC/B,6CAA6C;AACjD;;AAEA;IACI,+BAA+B;IAC/B,eAAe;IACf,kBAAkB;IAClB,cAAc;AAClB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,QAAQ;AACZ;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,eAAe;AACnB;;AAEA;IACI,SAAS;IACT,eAAe;AACnB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,8BAA8B;IAC9B,SAAS;IACT,gBAAgB;IAChB,eAAe;AACnB;;AAEA;IACI,aAAa;IACb,mBAAmB;IACnB,QAAQ;IACR,eAAe;AACnB;;AAEA;IACI,SAAS;AACb;;AAEA;IACI,SAAS;IACT,+BAA+B;IAC/B,eAAe;AACnB;;AAEA;IACI,gBAAgB;IAChB,aAAa;IACb,cAAc;AAClB;;AAEA,sBAAsB;AACtB;IACI,aAAa;IACb,QAAQ;IACR,gBAAgB;IAChB,mBAAmB;AACvB;;AAEA;IACI,iBAAiB;IACjB,eAAe;AACnB;;AAEA;IACI,yCAAyC;IACzC,gBAAgB;AACpB;;AAEA,uBAAuB;AACvB;IACI,aAAa;IACb,aAAa;IACb,sBAAsB;AAC1B;;AAEA;IACI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,eAAe;IACf,gDAAgD;IAChD,4BAA4B;IAC5B,eAAe;AACnB;;AAEA;IACI,mBAAmB;AACvB;;AAEA;IACI,wBAAwB;AAC5B;;AAEA;IACI,OAAO;IACP,kBAAkB;AACtB;;AAEA;IACI,SAAS;IACT,+BAA+B;IAC/B,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,aAAa;IACb,mBAAmB;IACnB,QAAQ;AACZ;;AAEA;IACI,qBAAqB;IACrB,gBAAgB;IAChB,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,kBAAkB;IAClB,mCAAmC;IACnC,wBAAwB;AAC5B;;AAEA;IACI,aAAa;IACb,QAAQ;AACZ;;AAEA;IACI,kBAAkB;IAClB,kBAAkB;IAClB,+BAA+B;IAC/B,kBAAkB;AACtB;;AAEA;IACI,SAAS;IACT,eAAe;AACnB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n@import url('base.css');\n\n.rules-form textarea {\n    width: 100%;\n    box-sizing: border-box;\n    padding: 8px 12px;\n    border: 1px solid var(--jp-border-color1);\n    border-radius: 4px;\n    background: var(--jp-layout-color0);\n    color: var(--jp-ui-font-color1);\n    font-size: 14px;\n    transition: border-color 0.2s;\n    font-family: var(--jp-ui-font-family);\n    resize: vertical;\n    min-height: 100px;\n    max-height: 50vh;\n}\n\n.rules-form textarea:focus {\n    outline: none;\n    border-color: var(--purple-500);\n    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);\n}\n\n.rules-form .form-group sub {\n    color: var(--jp-ui-font-color2);\n    margin-top: 4px;\n    margin-bottom: 4px;\n    display: block;\n}\n\n.rules-form .form-group-checkbox {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rules-form .form-group-checkbox input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n}\n\n.rules-form .form-group-checkbox label {\n    margin: 0;\n    cursor: pointer;\n}\n\n.rules-form-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-top: 24px;\n    flex-wrap: wrap;\n}\n\n.rules-form-footer-left {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.rules-form-footer-left .form-group-checkbox {\n    margin: 0;\n}\n\n.rules-form-footer-sub {\n    margin: 0;\n    color: var(--jp-ui-font-color2);\n    font-size: 12px;\n}\n\n.rules-form .form-actions {\n    border-top: none;\n    margin-top: 0;\n    padding-top: 0;\n}\n\n/* Rules list filter */\n.rules-list-filter {\n    display: flex;\n    gap: 8px;\n    margin-top: 16px;\n    margin-bottom: 12px;\n}\n\n.rules-list-filter .button-base {\n    padding: 6px 12px;\n    font-size: 13px;\n}\n\n.rules-list-filter .rules-list-filter-active {\n    background-color: var(--jp-layout-color2);\n    font-weight: 500;\n}\n\n/* Rules List Styling */\n.rules-list {\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.rules-list .rule-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--jp-border-color1);\n    transition: color 0.15s ease;\n    cursor: pointer;\n}\n\n.rules-list .rule-item:last-child {\n    border-bottom: none;\n}\n\n.rules-list .rule-item:hover .rule-name {\n    color: var(--purple-600);\n}\n\n.rules-list .rule-content {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.rules-list .rule-name {\n    margin: 0;\n    color: var(--jp-ui-font-color1);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rules-list .rule-badge {\n    display: inline-block;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-weight: 500;\n    line-height: 1;\n    border-radius: 3px;\n    background-color: var(--purple-300);\n    color: var(--purple-700);\n}\n\n.rules-list .rule-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.rules-list .empty-state {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--jp-ui-font-color2);\n    font-style: italic;\n}\n\n.rules-list .empty-state p {\n    margin: 0;\n    font-size: 16px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -23522,8 +24401,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   width: 100%;
   border-radius: 4px;
   overflow: hidden;
-  background-color: var(--blue-300);
-  border: 0.5px solid var(--blue-900);
+  /* Theme-aware button colors set by Mito palettes */
+  background-color: var(--mito-theme-button-background, var(--blue-300));
+  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));
+  transition: all 0.15s ease;
+}
+
+.mito-run-cell-button-group:hover {
+  background-color: var(--mito-theme-button-hover-background, var(--blue-400));
 }
 
 /* Shared button styles */
@@ -23534,7 +24419,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   padding: 0;
   border-radius: 0;
   cursor: pointer;
-  color: var(--blue-900);
+  /* Theme-aware text color */
+  color: var(--mito-theme-button-text, var(--blue-900));
   font-size: 13px;
   font-weight: 400;
   transition: background-color 0.15s ease;
@@ -23543,7 +24429,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .mito-run-cell-button:hover {
-  background-color: var(--blue-400);
+  background-color: transparent;
 }
 
 /* Main button (left side - play icon + text) */
@@ -23560,8 +24446,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   background: linear-gradient(
     to bottom,
     transparent,
-    var(--blue-900) 20%,
-    var(--blue-900) 80%,
+    var(--mito-theme-button-border, var(--blue-900)) 20%,
+    var(--mito-theme-button-border, var(--blue-900)) 80%,
     transparent
   );
   opacity: 0.4;
@@ -23579,8 +24465,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 /* Play icon styling */
 .mito-run-cell-button-main > svg {
-  color: var(--blue-900);
-  fill: var(--blue-900);
+  color: var(--mito-theme-button-text, var(--blue-900));
+  fill: var(--mito-theme-button-text, var(--blue-900));
   width: 12px;
   height: 12px;
   flex-shrink: 0;
@@ -23590,7 +24476,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 .mito-run-cell-button-dropdown svg {
   width: 14px;
   height: 14px;
-  color: var(--blue-900);
+  color: var(--mito-theme-button-text, var(--blue-900));
 }
 
 /* Ensure chevron path only uses stroke, not fill */
@@ -23601,6 +24487,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 
 .mito-run-cell-button-text {
   white-space: nowrap;
+  color: var(--mito-theme-button-text, var(--blue-900));
 }
 
 /* Running state - applied to the group */
@@ -23738,7 +24625,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 .jp-Notebook-toolbar {
   display: flex;
   align-items: center;
-}`, "",{"version":3,"sources":["webpack://./style/RunCellButton.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,cAAc;EACd,YAAY;AACd;;AAEA,yCAAyC;AACzC;EACE,aAAa;EACb,mBAAmB;EACnB,oCAAoC;EACpC,WAAW;EACX,kBAAkB;EAClB,gBAAgB;EAChB,iCAAiC;EACjC,mCAAmC;AACrC;;AAEA,yBAAyB;AACzB;EACE,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,UAAU;EACV,gBAAgB;EAChB,eAAe;EACf,sBAAsB;EACtB,eAAe;EACf,gBAAgB;EAChB,uCAAuC;EACvC,YAAY;EACZ,6BAA6B;AAC/B;;AAEA;EACE,iCAAiC;AACnC;;AAEA,+CAA+C;AAC/C;EACE,OAAO;EACP,QAAQ;EACR,eAAe;AACjB;;AAEA,4BAA4B;AAC5B;EACE,UAAU;EACV,YAAY;EACZ;;;;;;GAMC;EACD,YAAY;EACZ,cAAc;AAChB;;AAEA,2CAA2C;AAC3C;EACE,cAAc;EACd,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,gBAAgB;AAClB;;AAEA,sBAAsB;AACtB;EACE,sBAAsB;EACtB,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,cAAc;AAChB;;AAEA,oBAAoB;AACpB;EACE,WAAW;EACX,YAAY;EACZ,sBAAsB;AACxB;;AAEA,mDAAmD;AACnD;EACE,UAAU;EACV,oBAAoB;AACtB;;AAEA;EACE,mBAAmB;AACrB;;AAEA,yCAAyC;AACzC;EACE,8BAA8B;AAChC;;AAEA;;EAEE,kCAAkC;EAClC,uBAAuB;AACzB;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE;;;;;;GAMC;EACD,YAAY;AACd;;AAEA,uCAAuC;AACvC;EACE,uBAAuB;EACvB,sBAAsB;EACtB,WAAW;EACX,YAAY;AACd;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,yCAAyC;EACzC,yCAAyC;EACzC,kBAAkB;EAClB,wCAAwC;EACxC,gBAAgB;EAChB,mBAAmB;EACnB,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,0BAA0B;EAC1B,eAAe;EACf,gBAAgB;EAChB,+BAA+B;EAC/B,yBAAyB;EACzB,qBAAqB;AACvB;;AAEA;EACE,WAAW;EACX,yCAAyC;EACzC,aAAa;AACf;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,iBAAiB;EACjB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,+BAA+B;EAC/B,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,QAAQ;AACV;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW,EAAE,mCAAmC;EAChD,YAAY;EACZ,cAAc;EACd,+BAA+B;EAC/B,cAAc,EAAE,kDAAkD;AACpE;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,cAAc,EAAE,0BAA0B;EAC1C,cAAc,EAAE,qDAAqD;EACrE,+BAA+B;AACjC;;AAEA;EACE,OAAO;AACT;;AAEA;EACE,+BAA+B;EAC/B,eAAe;EACf,iBAAiB;EACjB,YAAY;AACd;;AAEA,gEAAgE;AAChE;EACE,iBAAiB;EACjB,WAAW,EAAE,2BAA2B;AAC1C;;AAEA,qDAAqD;AACrD;EACE,aAAa;EACb,mBAAmB;AACrB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.mito-run-cell-button-container {\n  position: relative;\n  display: block;\n  width: 160px;\n}\n\n/* Button group - contains both buttons */\n.mito-run-cell-button-group {\n  display: flex;\n  align-items: center;\n  height: var(--toolbar-button-height);\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  background-color: var(--blue-300);\n  border: 0.5px solid var(--blue-900);\n}\n\n/* Shared button styles */\n.mito-run-cell-button {\n  display: flex;\n  align-items: center;\n  border: none;\n  padding: 0;\n  border-radius: 0;\n  cursor: pointer;\n  color: var(--blue-900);\n  font-size: 13px;\n  font-weight: 400;\n  transition: background-color 0.15s ease;\n  height: 100%;\n  background-color: transparent;\n}\n\n.mito-run-cell-button:hover {\n  background-color: var(--blue-400);\n}\n\n/* Main button (left side - play icon + text) */\n.mito-run-cell-button-main {\n  flex: 1;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n/* Divider between buttons */\n.mito-run-cell-button-divider {\n  width: 1px;\n  height: 14px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--blue-900) 20%,\n    var(--blue-900) 80%,\n    transparent\n  );\n  opacity: 0.4;\n  flex-shrink: 0;\n}\n\n/* Dropdown button (right side - chevron) */\n.mito-run-cell-button-dropdown {\n  padding: 0 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0;\n}\n\n/* Play icon styling */\n.mito-run-cell-button-main > svg {\n  color: var(--blue-900);\n  fill: var(--blue-900);\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n\n/* Chevron styling */\n.mito-run-cell-button-dropdown svg {\n  width: 14px;\n  height: 14px;\n  color: var(--blue-900);\n}\n\n/* Ensure chevron path only uses stroke, not fill */\n.mito-run-cell-button-dropdown svg path {\n  fill: none;\n  stroke: currentColor;\n}\n\n.mito-run-cell-button-text {\n  white-space: nowrap;\n}\n\n/* Running state - applied to the group */\n.mito-run-cell-button-running {\n  border-color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button,\n.mito-run-cell-button-running .mito-run-cell-button-dropdown {\n  background-color: var(--green-300);\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown:hover {\n  background-color: var(--green-500);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-divider {\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--green-900) 20%,\n    var(--green-900) 80%,\n    transparent\n  );\n  opacity: 0.5;\n}\n\n/* LoadingCircle styling when running */\n.mito-run-cell-button-running .mito-run-cell-button-main > svg {\n  color: var(--green-900);\n  fill: var(--green-900);\n  width: 16px;\n  height: 16px;\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-text {\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown svg {\n  color: var(--green-900);\n}\n\n.mito-run-cell-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 1000;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 3px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  min-width: 200px;\n  white-space: nowrap;\n  padding: 4px 0;\n}\n\n.mito-run-cell-dropdown-section {\n  display: flex;\n  flex-direction: column;\n}\n\n.mito-run-cell-dropdown-section-header {\n  padding: 6px 12px 4px 12px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-ui-font-color2);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mito-run-cell-dropdown-separator {\n  height: 1px;\n  background-color: var(--jp-layout-color2);\n  margin: 4px 0;\n}\n\n.mito-run-cell-dropdown-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 6px 12px;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 400;\n  gap: 8px;\n}\n\n.mito-run-cell-dropdown-item:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.mito-run-cell-dropdown-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px; /* Fixed width to align all icons */\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--jp-ui-font-color1);\n  line-height: 0; /* Remove extra line height for better alignment */\n}\n\n.mito-run-cell-dropdown-item-icon svg {\n  width: 16px;\n  height: 16px;\n  display: block; /* Remove inline spacing */\n  margin: 0 auto; /* Center the icon within the fixed width container */\n  color: var(--jp-ui-font-color1); \n}\n\n.mito-run-cell-dropdown-item-label {\n  flex: 1;\n}\n\n.mito-run-cell-dropdown-item-shortcut {\n  color: var(--jp-ui-font-color2);\n  font-size: 11px;\n  margin-left: 10px;\n  opacity: 0.7;\n}\n\n/* Position the button widget on the right side of the toolbar */\n.jp-Notebook-toolbar .mito-run-cell-button-widget {\n  margin-left: auto;\n  order: 9999; /* Ensure it appears last */\n}\n\n/* Ensure toolbar uses flexbox for proper alignment */\n.jp-Notebook-toolbar {\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./style/RunCellButton.css"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n.mito-run-cell-button-container {\n  position: relative;\n  display: block;\n  width: 160px;\n}\n\n/* Button group - contains both buttons */\n.mito-run-cell-button-group {\n  display: flex;\n  align-items: center;\n  height: var(--toolbar-button-height);\n  width: 100%;\n  border-radius: 4px;\n  overflow: hidden;\n  /* Theme-aware button colors set by Mito palettes */\n  background-color: var(--mito-theme-button-background, var(--blue-300));\n  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));\n  transition: all 0.15s ease;\n}\n\n.mito-run-cell-button-group:hover {\n  background-color: var(--mito-theme-button-hover-background, var(--blue-400));\n}\n\n/* Shared button styles */\n.mito-run-cell-button {\n  display: flex;\n  align-items: center;\n  border: none;\n  padding: 0;\n  border-radius: 0;\n  cursor: pointer;\n  /* Theme-aware text color */\n  color: var(--mito-theme-button-text, var(--blue-900));\n  font-size: 13px;\n  font-weight: 400;\n  transition: background-color 0.15s ease;\n  height: 100%;\n  background-color: transparent;\n}\n\n.mito-run-cell-button:hover {\n  background-color: transparent;\n}\n\n/* Main button (left side - play icon + text) */\n.mito-run-cell-button-main {\n  flex: 1;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n/* Divider between buttons */\n.mito-run-cell-button-divider {\n  width: 1px;\n  height: 14px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--mito-theme-button-border, var(--blue-900)) 20%,\n    var(--mito-theme-button-border, var(--blue-900)) 80%,\n    transparent\n  );\n  opacity: 0.4;\n  flex-shrink: 0;\n}\n\n/* Dropdown button (right side - chevron) */\n.mito-run-cell-button-dropdown {\n  padding: 0 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0;\n}\n\n/* Play icon styling */\n.mito-run-cell-button-main > svg {\n  color: var(--mito-theme-button-text, var(--blue-900));\n  fill: var(--mito-theme-button-text, var(--blue-900));\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n}\n\n/* Chevron styling */\n.mito-run-cell-button-dropdown svg {\n  width: 14px;\n  height: 14px;\n  color: var(--mito-theme-button-text, var(--blue-900));\n}\n\n/* Ensure chevron path only uses stroke, not fill */\n.mito-run-cell-button-dropdown svg path {\n  fill: none;\n  stroke: currentColor;\n}\n\n.mito-run-cell-button-text {\n  white-space: nowrap;\n  color: var(--mito-theme-button-text, var(--blue-900));\n}\n\n/* Running state - applied to the group */\n.mito-run-cell-button-running {\n  border-color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button,\n.mito-run-cell-button-running .mito-run-cell-button-dropdown {\n  background-color: var(--green-300);\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown:hover {\n  background-color: var(--green-500);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-divider {\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    var(--green-900) 20%,\n    var(--green-900) 80%,\n    transparent\n  );\n  opacity: 0.5;\n}\n\n/* LoadingCircle styling when running */\n.mito-run-cell-button-running .mito-run-cell-button-main > svg {\n  color: var(--green-900);\n  fill: var(--green-900);\n  width: 16px;\n  height: 16px;\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-text {\n  color: var(--green-900);\n}\n\n.mito-run-cell-button-running .mito-run-cell-button-dropdown svg {\n  color: var(--green-900);\n}\n\n.mito-run-cell-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 1000;\n  background-color: var(--jp-layout-color1);\n  border: 1px solid var(--jp-layout-color2);\n  border-radius: 3px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  min-width: 200px;\n  white-space: nowrap;\n  padding: 4px 0;\n}\n\n.mito-run-cell-dropdown-section {\n  display: flex;\n  flex-direction: column;\n}\n\n.mito-run-cell-dropdown-section-header {\n  padding: 6px 12px 4px 12px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--jp-ui-font-color2);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mito-run-cell-dropdown-separator {\n  height: 1px;\n  background-color: var(--jp-layout-color2);\n  margin: 4px 0;\n}\n\n.mito-run-cell-dropdown-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 6px 12px;\n  text-align: left;\n  border: none;\n  background: none;\n  color: var(--jp-ui-font-color1);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 400;\n  gap: 8px;\n}\n\n.mito-run-cell-dropdown-item:hover {\n  background-color: var(--jp-layout-color2);\n}\n\n.mito-run-cell-dropdown-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px; /* Fixed width to align all icons */\n  height: 16px;\n  flex-shrink: 0;\n  color: var(--jp-ui-font-color1);\n  line-height: 0; /* Remove extra line height for better alignment */\n}\n\n.mito-run-cell-dropdown-item-icon svg {\n  width: 16px;\n  height: 16px;\n  display: block; /* Remove inline spacing */\n  margin: 0 auto; /* Center the icon within the fixed width container */\n  color: var(--jp-ui-font-color1); \n}\n\n.mito-run-cell-dropdown-item-label {\n  flex: 1;\n}\n\n.mito-run-cell-dropdown-item-shortcut {\n  color: var(--jp-ui-font-color2);\n  font-size: 11px;\n  margin-left: 10px;\n  opacity: 0.7;\n}\n\n/* Position the button widget on the right side of the toolbar */\n.jp-Notebook-toolbar .mito-run-cell-button-widget {\n  margin-left: auto;\n  order: 9999; /* Ensure it appears last */\n}\n\n/* Ensure toolbar uses flexbox for proper alignment */\n.jp-Notebook-toolbar {\n  display: flex;\n  align-items: center;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -24622,14 +25509,16 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
 }
 
 .button-blue {
-  background-color: var(--blue-300);
-  color: var(--blue-900) !important;
-  border: 0.5px solid var(--blue-900);
+  /* Theme-aware button colors set by Mito palettes */
+  background-color: var(--mito-theme-button-background, var(--blue-300));
+  color: var(--mito-theme-button-text, var(--blue-900)) !important;
+  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));
   border-radius: 4px;
+  transition: all 0.15s ease;
 }
 
 .button-blue:hover {
-  background-color: var(--blue-400);
+  background-color: var(--mito-theme-button-hover-background, var(--blue-400));
 }
 
 .button-dark-purple {
@@ -24654,7 +25543,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/*
   font-size: 12px;
   padding: 2px 5px;
 }
-`, "",{"version":3,"sources":["webpack://./style/button.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;;;;CAIC;;AAED;EACE,YAAY;EACZ,kBAAkB;EAClB,eAAe;EACf,eAAe;EACf,2EAA2E;EAC3E,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;AACtB;;AAEA;EACE,kCAAkC;EAClC,kCAAkC;AACpC;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE,gCAAgC;EAChC,gCAAgC;AAClC;;AAEA;EACE,gCAAgC;AAClC;;AAEA;EACE,yCAAyC;EACzC,+CAA+C;AACjD;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,mCAAmC;EACnC,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,iCAAiC;EACjC,iCAAiC;EACjC,mCAAmC;EACnC,kBAAkB;AACpB;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,mCAAmC;EACnC,8BAA8B;AAChC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,oCAAoC;EACpC,eAAe;EACf,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* \n    Classes that can be used for any button, making it easier to keep \n    the theme consistent. For example, use them to make a textButton or\n    textAndIconButton green.\n*/\n\n.button-base {\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 14px;\n  /* Make sure the button grows large enough so that the text does not wrap */\n  white-space: nowrap;\n  padding: 5px 10px;\n}\n\n.button-base:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-green {\n  background-color: var(--green-400);\n  color: var(--green-900) !important;\n}\n\n.button-green:hover {\n  background-color: var(--green-500);\n}\n\n.button-red {\n  background-color: var(--red-400);\n  color: var(--red-900) !important;\n}\n\n.button-red:hover {\n  background-color: var(--red-500);\n}\n\n.button-gray {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-content-font-color1) !important;\n}\n\n.button-gray:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n.button-purple {\n  background-color: var(--purple-300);\n  color: var(--purple-700) !important;\n}\n\n.button-purple:hover {\n  background-color: var(--purple-400);\n}\n\n.button-purple:disabled:hover {\n  background-color: var(--purple-300);\n}\n\n.button-blue {\n  background-color: var(--blue-300);\n  color: var(--blue-900) !important;\n  border: 0.5px solid var(--blue-900);\n  border-radius: 4px;\n}\n\n.button-blue:hover {\n  background-color: var(--blue-400);\n}\n\n.button-dark-purple {\n  background-color: var(--purple-500);\n  color: var(--white) !important;\n}\n\n.button-dark-purple:hover {\n  background-color: var(--purple-600);\n}\n\n.button-width-block {\n  width: 100%;\n}\n\n.button-width-fit-contents {\n  width: fit-content;\n}\n\n.button-small {\n  height: var(--toolbar-button-height);\n  font-size: 12px;\n  padding: 2px 5px;\n}\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./style/button.css"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;;;;CAIC;;AAED;EACE,YAAY;EACZ,kBAAkB;EAClB,eAAe;EACf,eAAe;EACf,2EAA2E;EAC3E,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;AACtB;;AAEA;EACE,kCAAkC;EAClC,kCAAkC;AACpC;;AAEA;EACE,kCAAkC;AACpC;;AAEA;EACE,gCAAgC;EAChC,gCAAgC;AAClC;;AAEA;EACE,gCAAgC;AAClC;;AAEA;EACE,yCAAyC;EACzC,+CAA+C;AACjD;;AAEA;EACE,yCAAyC;AAC3C;;AAEA;EACE,mCAAmC;EACnC,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,mDAAmD;EACnD,sEAAsE;EACtE,gEAAgE;EAChE,oEAAoE;EACpE,kBAAkB;EAClB,0BAA0B;AAC5B;;AAEA;EACE,4EAA4E;AAC9E;;AAEA;EACE,mCAAmC;EACnC,8BAA8B;AAChC;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,kBAAkB;AACpB;;AAEA;EACE,oCAAoC;EACpC,eAAe;EACf,gBAAgB;AAClB","sourcesContent":["/*\n * Copyright (c) Saga Inc.\n * Distributed under the terms of the GNU Affero General Public License v3.0 License.\n */\n\n/* \n    Classes that can be used for any button, making it easier to keep \n    the theme consistent. For example, use them to make a textButton or\n    textAndIconButton green.\n*/\n\n.button-base {\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n  font-size: 14px;\n  /* Make sure the button grows large enough so that the text does not wrap */\n  white-space: nowrap;\n  padding: 5px 10px;\n}\n\n.button-base:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-green {\n  background-color: var(--green-400);\n  color: var(--green-900) !important;\n}\n\n.button-green:hover {\n  background-color: var(--green-500);\n}\n\n.button-red {\n  background-color: var(--red-400);\n  color: var(--red-900) !important;\n}\n\n.button-red:hover {\n  background-color: var(--red-500);\n}\n\n.button-gray {\n  background-color: var(--jp-layout-color2);\n  color: var(--jp-content-font-color1) !important;\n}\n\n.button-gray:hover {\n  background-color: var(--jp-layout-color3);\n}\n\n.button-purple {\n  background-color: var(--purple-300);\n  color: var(--purple-700) !important;\n}\n\n.button-purple:hover {\n  background-color: var(--purple-400);\n}\n\n.button-purple:disabled:hover {\n  background-color: var(--purple-300);\n}\n\n.button-blue {\n  /* Theme-aware button colors set by Mito palettes */\n  background-color: var(--mito-theme-button-background, var(--blue-300));\n  color: var(--mito-theme-button-text, var(--blue-900)) !important;\n  border: 0.5px solid var(--mito-theme-button-border, var(--blue-900));\n  border-radius: 4px;\n  transition: all 0.15s ease;\n}\n\n.button-blue:hover {\n  background-color: var(--mito-theme-button-hover-background, var(--blue-400));\n}\n\n.button-dark-purple {\n  background-color: var(--purple-500);\n  color: var(--white) !important;\n}\n\n.button-dark-purple:hover {\n  background-color: var(--purple-600);\n}\n\n.button-width-block {\n  width: 100%;\n}\n\n.button-width-fit-contents {\n  width: fit-content;\n}\n\n.button-small {\n  height: var(--toolbar-button-height);\n  font-size: 12px;\n  padding: 2px 5px;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -24697,7 +25586,7 @@ module.exports = "<svg width=\"22\" height=\"17\" viewBox=\"0 0 22 17\" fill=\"n
   \********************************/
 /***/ ((module) => {
 
-module.exports = "<svg width=\"19\" height=\"20\" viewBox=\"0 0 19 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M15.0626 4.8125C15.5466 4.8125 15.9376 5.20352 15.9376 5.6875C15.9376 6.17148 15.5466 6.5625 15.0626 6.5625C14.5787 6.5625 14.1876 6.17148 14.1876 5.6875C14.1876 5.20352 14.5787 4.8125 15.0626 4.8125ZM12.0001 4.8125C12.4841 4.8125 12.8751 5.20352 12.8751 5.6875C12.8751 6.17148 12.4841 6.5625 12.0001 6.5625C11.5162 6.5625 11.1251 6.17148 11.1251 5.6875C11.1251 5.20352 11.5162 4.8125 12.0001 4.8125ZM8.93764 4.8125C9.42162 4.8125 9.81264 5.20352 9.81264 5.6875C9.81264 6.17148 9.42162 6.5625 8.93764 6.5625C8.45365 6.5625 8.06264 6.17148 8.06264 5.6875C8.06264 5.20352 8.45365 4.8125 8.93764 4.8125ZM12.0001 0C15.8665 0 19.0001 2.5457 19.0001 5.6875C19.0001 6.98906 18.456 8.18125 17.5537 9.14102C17.9611 10.2184 18.8087 11.1316 18.8224 11.1426C19.0029 11.334 19.0521 11.6129 18.9482 11.8535C18.8443 12.0941 18.6064 12.25 18.3439 12.25C16.6622 12.25 15.3361 11.5473 14.5404 10.984C13.7501 11.2328 12.897 11.375 12.0001 11.375C8.13373 11.375 5.00014 8.8293 5.00014 5.6875C5.00014 2.5457 8.13373 0 12.0001 0ZM12.0001 10.0625C12.7302 10.0625 13.4521 9.95039 14.1439 9.73164L14.7646 9.53477L15.2978 9.91211C15.6888 10.1883 16.2247 10.4973 16.8701 10.7051C16.6705 10.3742 16.4763 10.0023 16.3259 9.60586L16.0361 8.8375L16.5994 8.24141C17.0943 7.71367 17.6876 6.84141 17.6876 5.6875C17.6876 3.27578 15.1365 1.3125 12.0001 1.3125C8.86381 1.3125 6.31264 3.27578 6.31264 5.6875C6.31264 8.09922 8.86381 10.0625 12.0001 10.0625Z\" fill=\"var(--purple-600)\" class=\"jp-icon-selectable\"/>\n    <path d=\"M7 7C3.13359 7 0 9.5457 0 12.6875C0 14.0437 0.585156 15.2852 1.55859 16.2613C1.2168 17.6395 0.0738281 18.8672 0.0601563 18.8809C0 18.9438 -0.0164062 19.0367 0.0191406 19.1188C0.0546875 19.2008 0.13125 19.25 0.21875 19.25C2.03164 19.25 3.39063 18.3805 4.06328 17.8445C4.95742 18.1809 5.95 18.375 7 18.375C10.8664 18.375 14 15.8293 14 12.6875C14 9.5457 10.8664 7 7 7ZM3.5 13.5625C3.01602 13.5625 2.625 13.1715 2.625 12.6875C2.625 12.2035 3.01602 11.8125 3.5 11.8125C3.98398 11.8125 4.375 12.2035 4.375 12.6875C4.375 13.1715 3.98398 13.5625 3.5 13.5625ZM7 13.5625C6.51602 13.5625 6.125 13.1715 6.125 12.6875C6.125 12.2035 6.51602 11.8125 7 11.8125C7.48398 11.8125 7.875 12.2035 7.875 12.6875C7.875 13.1715 7.48398 13.5625 7 13.5625ZM10.5 13.5625C10.016 13.5625 9.625 13.1715 9.625 12.6875C9.625 12.2035 10.016 11.8125 10.5 11.8125C10.984 11.8125 11.375 12.2035 11.375 12.6875C11.375 13.1715 10.984 13.5625 10.5 13.5625Z\" fill=\"var(--purple-700)\" class=\"jp-icon-selectable\"/>\n</svg>\n";
+module.exports = "<svg width=\"19\" height=\"20\" viewBox=\"0 0 19 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M15.0626 4.8125C15.5466 4.8125 15.9376 5.20352 15.9376 5.6875C15.9376 6.17148 15.5466 6.5625 15.0626 6.5625C14.5787 6.5625 14.1876 6.17148 14.1876 5.6875C14.1876 5.20352 14.5787 4.8125 15.0626 4.8125ZM12.0001 4.8125C12.4841 4.8125 12.8751 5.20352 12.8751 5.6875C12.8751 6.17148 12.4841 6.5625 12.0001 6.5625C11.5162 6.5625 11.1251 6.17148 11.1251 5.6875C11.1251 5.20352 11.5162 4.8125 12.0001 4.8125ZM8.93764 4.8125C9.42162 4.8125 9.81264 5.20352 9.81264 5.6875C9.81264 6.17148 9.42162 6.5625 8.93764 6.5625C8.45365 6.5625 8.06264 6.17148 8.06264 5.6875C8.06264 5.20352 8.45365 4.8125 8.93764 4.8125ZM12.0001 0C15.8665 0 19.0001 2.5457 19.0001 5.6875C19.0001 6.98906 18.456 8.18125 17.5537 9.14102C17.9611 10.2184 18.8087 11.1316 18.8224 11.1426C19.0029 11.334 19.0521 11.6129 18.9482 11.8535C18.8443 12.0941 18.6064 12.25 18.3439 12.25C16.6622 12.25 15.3361 11.5473 14.5404 10.984C13.7501 11.2328 12.897 11.375 12.0001 11.375C8.13373 11.375 5.00014 8.8293 5.00014 5.6875C5.00014 2.5457 8.13373 0 12.0001 0ZM12.0001 10.0625C12.7302 10.0625 13.4521 9.95039 14.1439 9.73164L14.7646 9.53477L15.2978 9.91211C15.6888 10.1883 16.2247 10.4973 16.8701 10.7051C16.6705 10.3742 16.4763 10.0023 16.3259 9.60586L16.0361 8.8375L16.5994 8.24141C17.0943 7.71367 17.6876 6.84141 17.6876 5.6875C17.6876 3.27578 15.1365 1.3125 12.0001 1.3125C8.86381 1.3125 6.31264 3.27578 6.31264 5.6875C6.31264 8.09922 8.86381 10.0625 12.0001 10.0625Z\" fill=\"var(--jp-brand-color0)\" class=\"jp-icon-selectable\"/>\n    <path d=\"M7 7C3.13359 7 0 9.5457 0 12.6875C0 14.0437 0.585156 15.2852 1.55859 16.2613C1.2168 17.6395 0.0738281 18.8672 0.0601563 18.8809C0 18.9438 -0.0164062 19.0367 0.0191406 19.1188C0.0546875 19.2008 0.13125 19.25 0.21875 19.25C2.03164 19.25 3.39063 18.3805 4.06328 17.8445C4.95742 18.1809 5.95 18.375 7 18.375C10.8664 18.375 14 15.8293 14 12.6875C14 9.5457 10.8664 7 7 7ZM3.5 13.5625C3.01602 13.5625 2.625 13.1715 2.625 12.6875C2.625 12.2035 3.01602 11.8125 3.5 11.8125C3.98398 11.8125 4.375 12.2035 4.375 12.6875C4.375 13.1715 3.98398 13.5625 3.5 13.5625ZM7 13.5625C6.51602 13.5625 6.125 13.1715 6.125 12.6875C6.125 12.2035 6.51602 11.8125 7 11.8125C7.48398 11.8125 7.875 12.2035 7.875 12.6875C7.875 13.1715 7.48398 13.5625 7 13.5625ZM10.5 13.5625C10.016 13.5625 9.625 13.1715 9.625 12.6875C9.625 12.2035 10.016 11.8125 10.5 11.8125C10.984 11.8125 11.375 12.2035 11.375 12.6875C11.375 13.1715 10.984 13.5625 10.5 13.5625Z\" fill=\"var(--jp-brand-color1)\" class=\"jp-icon-selectable\"/>\n</svg>\n";
 
 /***/ }),
 
@@ -27290,4 +28179,4 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
 /***/ })
 
 }]);
-//# sourceMappingURL=lib_index_js.03302cc521d72eb56b00.js.map
+//# sourceMappingURL=lib_index_js.dccfa541c464ee0e5cd4.js.map