unify

package.json

@@ -20,6 +20,8 @@
       "default": "./dist/sigpro.js"
     },
     "./utils": "./dist/sigpro.utils.js",
+    "./grid": "./dist/sigpro.grid.js",
+    "./editor": "./dist/sigpro.editor.js",
     "./vite": "./dist/sigpro.vite.js",
     "./ui": "./dist/sigpro.ui.js"
   },
@@ -45,18 +47,21 @@
     "build:core": "bun build ./src/sigpro.js --bundle --outfile=./dist/sigpro.js --format=esm --minify",
     "build:utils": "bun build ./src/sigpro.utils.js --bundle --outfile=./dist/sigpro.utils.js --format=esm --external ./src/sigpro.js --minify",
     "build:ui": "bun build ./src/sigpro.ui.js --bundle --outfile=./dist/sigpro.ui.js --format=esm --external ./src/sigpro.js --minify",
+    "build:grid": "bun build ./src/sigpro.grid.js --bundle --external sigpro --outfile=./dist/sigpro.grid.js --format=esm --minify",
+    "build:editor": "bun build ./src/sigpro.editor.js --bundle --external sigpro --outfile=./dist/sigpro.editor.js --format=esm --minify",
     "build:vite": "bun build ./src/sigpro.vite.js --bundle --outfile=./dist/sigpro.vite.js --format=esm --external fs --external path  --minify",
     "build:css": "tailwindcss -i ./src/sigpro.ui.css -o ./dist/sigpro.ui.css --minify --content './src/tailwind' && du -h ./dist/sigpro.ui.css",
     "build:convert": "bun build ./src/sigpro.convert.js --bundle --outfile=./docs/sigpro.convert.js --format=esm --external ./src/sigpro.js --minify",
-    "build": "bun run build:core && bun run build:utils && bun run build:ui && bun run build:vite && bun run build:css && bun run build:convert && cp ./dist/* ./docs",
+    "build": "bun run build:core && bun run build:utils && bun run build:ui && bun run build:grid && bun run build:editor && bun run build:vite && bun run build:css && bun run build:convert && cp ./dist/* ./docs",
     "docs": "bun x serve docs"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.471",
+    "@iconify/json": "^2.2.473",
     "@iconify/tailwind4": "^1.2.3",
     "@tailwindcss/cli": "^4.3.0",
     "daisyui": "^5.5.19",
-    "tailwindcss": "^4.3.0"
+    "tailwindcss": "^4.3.0",
+    "ag-grid-community": "^35.3.0"
   },
   "keywords": [
     "signals",

src/grid-e/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "ag-grid-enterprise",
+  "version": "35.2.0",
+  "description": "Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue",
+  "main": "./dist/package/main.cjs.js",
+  "types": "./dist/types/src/main.d.ts",
+  "module": "./main.esm.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/package/main.esm.mjs",
+      "types": "./dist/types/src/main.d.ts",
+      "require": "./dist/package/main.cjs.js",
+      "default": "./dist/package/main.cjs.js"
+    },
+    "./styles/ag-grid-no-native-widgets.css": "./styles/ag-grid-no-native-widgets.css",
+    "./styles/ag-grid-no-native-widgets.min.css": "./styles/ag-grid-no-native-widgets.min.css",
+    "./styles/ag-grid.css": "./styles/ag-grid.css",
+    "./styles/ag-grid.min.css": "./styles/ag-grid.min.css",
+    "./styles/ag-theme-alpine-no-font.css": "./styles/ag-theme-alpine-no-font.css",
+    "./styles/ag-theme-alpine-no-font.min.css": "./styles/ag-theme-alpine-no-font.min.css",
+    "./styles/ag-theme-alpine.css": "./styles/ag-theme-alpine.css",
+    "./styles/ag-theme-alpine.min.css": "./styles/ag-theme-alpine.min.css",
+    "./styles/ag-theme-balham-no-font.css": "./styles/ag-theme-balham-no-font.css",
+    "./styles/ag-theme-balham-no-font.min.css": "./styles/ag-theme-balham-no-font.min.css",
+    "./styles/ag-theme-balham.css": "./styles/ag-theme-balham.css",
+    "./styles/ag-theme-balham.min.css": "./styles/ag-theme-balham.min.css",
+    "./styles/ag-theme-material-no-font.css": "./styles/ag-theme-material-no-font.css",
+    "./styles/ag-theme-material-no-font.min.css": "./styles/ag-theme-material-no-font.min.css",
+    "./styles/ag-theme-material.css": "./styles/ag-theme-material.css",
+    "./styles/ag-theme-material.min.css": "./styles/ag-theme-material.min.css",
+    "./styles/ag-theme-quartz-no-font.css": "./styles/ag-theme-quartz-no-font.css",
+    "./styles/ag-theme-quartz-no-font.min.css": "./styles/ag-theme-quartz-no-font.min.css",
+    "./styles/ag-theme-quartz.css": "./styles/ag-theme-quartz.css",
+    "./styles/ag-theme-quartz.min.css": "./styles/ag-theme-quartz.min.css",
+    "./styles/agGridAlpineFont.css": "./styles/agGridAlpineFont.css",
+    "./styles/agGridAlpineFont.min.css": "./styles/agGridAlpineFont.min.css",
+    "./styles/agGridBalhamFont.css": "./styles/agGridBalhamFont.css",
+    "./styles/agGridBalhamFont.min.css": "./styles/agGridBalhamFont.min.css",
+    "./styles/agGridClassicFont.css": "./styles/agGridClassicFont.css",
+    "./styles/agGridClassicFont.min.css": "./styles/agGridClassicFont.min.css",
+    "./styles/agGridMaterialFont.css": "./styles/agGridMaterialFont.css",
+    "./styles/agGridMaterialFont.min.css": "./styles/agGridMaterialFont.min.css",
+    "./styles/agGridQuartzFont.css": "./styles/agGridQuartzFont.css",
+    "./styles/agGridQuartzFont.min.css": "./styles/agGridQuartzFont.min.css",
+    "./styles": "./styles/_index.scss"
+  },
+  "sideEffects": [
+    "./styles/ag-grid-no-native-widgets.css",
+    "./styles/ag-grid-no-native-widgets.min.css",
+    "./styles/ag-grid.css",
+    "./styles/ag-grid.min.css",
+    "./styles/ag-theme-alpine-no-font.css",
+    "./styles/ag-theme-alpine-no-font.min.css",
+    "./styles/ag-theme-alpine.css",
+    "./styles/ag-theme-alpine.min.css",
+    "./styles/ag-theme-balham-no-font.css",
+    "./styles/ag-theme-balham-no-font.min.css",
+    "./styles/ag-theme-balham.css",
+    "./styles/ag-theme-balham.min.css",
+    "./styles/ag-theme-material-no-font.css",
+    "./styles/ag-theme-material-no-font.min.css",
+    "./styles/ag-theme-material.css",
+    "./styles/ag-theme-material.min.css",
+    "./styles/ag-theme-quartz-no-font.css",
+    "./styles/ag-theme-quartz-no-font.min.css",
+    "./styles/ag-theme-quartz.css",
+    "./styles/ag-theme-quartz.min.css",
+    "./styles/agGridAlpineFont.css",
+    "./styles/agGridAlpineFont.min.css",
+    "./styles/agGridBalhamFont.css",
+    "./styles/agGridBalhamFont.min.css",
+    "./styles/agGridClassicFont.css",
+    "./styles/agGridClassicFont.min.css",
+    "./styles/agGridMaterialFont.css",
+    "./styles/agGridMaterialFont.min.css",
+    "./styles/agGridQuartzFont.css",
+    "./styles/agGridQuartzFont.min.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ag-grid/ag-grid.git"
+  },
+  "keywords": [
+    "ag",
+    "ag-grid",
+    "datagrid",
+    "data-grid",
+    "datatable",
+    "data-table",
+    "grid",
+    "table",
+    "react",
+    "table",
+    "angular",
+    "angular-component",
+    "react",
+    "react-component",
+    "reactjs",
+    "vue",
+    "vuejs"
+  ],
+  "author": "Sean Landsman <sean@thelandsmans.com>",
+  "license": "Commercial",
+  "bugs": {
+    "url": "https://github.com/ag-grid/ag-grid/issues"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie >= 0",
+    "not ie_mob >= 0",
+    "not blackberry > 0"
+  ],
+  "homepage": "https://www.ag-grid.com/",
+  "dependencies": {
+    "ag-grid-community": "35.2.0"
+  },
+  "optionalDependencies": {
+    "ag-charts-community": "13.2.0",
+    "ag-charts-enterprise": "13.2.0"
+  },
+  "devDependencies": {
+    "ag-charts-community": "13.2.0",
+    "ag-charts-enterprise": "13.2.0",
+    "@types/jest": "^29.5.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-canvas-mock": "2.5.2",
+    "canvas": "^3.2.1"
+  }
+}

src/sigpro.editor.js

@@ -0,0 +1,19 @@
+const { $, isF } = window.SigPro
+
+export const Editor = p => {
+  let { value: v, class: x } = p, i = $(0), s = $(""), c = $(0), t = $(0), o = $(0), S = () => window.getSelection().rangeCount ? window.getSelection().getRangeAt(0) : 0, R, r, E = "😀 😊 😉 🧐 😮 🤔 😅 😂 😍 😘 🥰 👍 👎 👌 🤝 🤞 👋 👏 🙌 🙏 💪 ☝️ 👇 👈 👉 🖕 ✅ ⚠️ 🚀 📢 ✉️ ❤️".split(" "),
+  U = () => { t(t() + 1); R && c(R.innerText.length) }, N = () => { if (R) { let H = R.innerHTML; isF(v) ? v(H) : p.onchange?.(H); U() } },
+  X = (m, k = null) => { R?.focus(); if (r) { let w = window.getSelection(); w.removeAllRanges(); w.addRange(r) } document.execCommand(m, 0, k); r = 0; N() },
+  q = (k, Z = null) => { t(); if (!R || i()) return 0; try { if (k == 'formatBlock') { let n = window.getSelection().getRangeAt(0).commonAncestorContainer; while (n && n !== R) { if (n.tagName === Z) return 1; n = n.parentNode } return 0 } return document.queryCommandState(k) } catch (e) { return 0 } },
+  hU = f => { if (f) { let d = new FileReader; d.onload = e => { let I = f.type.startsWith('image/'), z = e.target.result; X("insertHTML", I ? div({ style: "display:inline-block;resize:both;overflow:hidden;vertical-align:bottom;width:200px;border:1px dashed #ccc;padding:2px;cursor:pointer", class: "resizable-img-container" }, [img({ src: z, style: "width:100%;height:100%;object-fit:contain;pointer-events:none" })]) : a({ href: z, download: f.name, contenteditable: "false", style: "display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#f9f9f9;text-decoration:none;color:#333;font-size:12px;margin:2px;cursor:pointer" }, [span({ class: "icon-[lucide--paperclip] w-3 h-3" }), f.name])) }; d.readAsDataURL(f) } },
+  B = (I, m, k) => button({ type: "button", class: () => `btn btn-ghost btn-xs ${q(m, k) ? 'btn-active bg-primary/20' : ''}`, onclick: () => typeof m == 'function' ? m() : X(m, k) }, [span({ class: `icon-[lucide--${I}]` })]);
+
+  return div({ class: `border border-base-300 rounded-box bg-base-100 overflow-hidden flex flex-col ${x||""}` }, [
+    div({ class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
+      div({ class: "flex flex-wrap gap-1 flex-1" }, [B("bold", "bold"), B("italic", "italic"), B("underline", "underline"), input({ type: "color", class: "w-5 h-5 p-0 bg-transparent cursor-pointer", oninput: e => X("foreColor", e.target.value) }), span({ class: "w-px h-5 bg-base-300 mx-1" }), B("align-left", "justifyLeft"), B("align-center", "justifyCenter"), B("align-right", "justifyRight"), span({ class: "w-px h-5 bg-base-300 mx-1" }), B("list", "insertUnorderedList"), B("list-ordered", "insertOrderedList"), B("indent-decrease", "outdent"), B("indent-increase", "indent"), B("quote", () => X("formatBlock", q('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE'), 'BLOCKQUOTE'), span({ class: "w-px h-5 bg-base-300 mx-1" }), B("link", () => { let u = prompt('URL:'); u && X("createLink", u) }), B("paperclip", () => { let I = document.createElement('input'); I.type = 'file'; I.onchange = e => hU(e.target.files[0]); I.click() }), div({ class: "relative" }, [B("smile", () => { r = S(); o(!o()) }), div({ class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => o() ? "" : "display:none" }, E.map(e => span({ class: "cursor-pointer p-1 text-lg", onclick: () => { X("insertText", e); o(0) } }, e)))]), B("undo-2", "undo"), B("redo-2", "redo")]), B("code-2", () => { if (!i()) s(R?.innerHTML || ""); else if (R) { R.innerHTML = s(); N() } i(!i()) })]),
+    div({ class: "relative flex-1 flex flex-col", onclick: () => o(0) }, [
+      div({ ref: l => { if (l && !R) { R = l; l.innerHTML = (isF(v) ? v() : v) || ""; document.execCommand("defaultParagraphSeparator", 0, "br"); l.onclick = e => { let c = e.target.closest('.resizable-img-container'); if (c) { let I = c.querySelector('img'); I && (k => { let O = document.createElement('div'); O.style = "position:fixed;top:0;left:0;width:100%;height:100%;background:#000e;z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out"; O.onclick = () => O.remove(); let M = document.createElement('img'); M.src = k; M.style = "max-width:95%;max-height:95%"; O.appendChild(M); document.body.appendChild(O) })(I.src) } } } }, style: () => `min-height:22rem;${i() ? 'display:none' : ''}`, class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8", contenteditable: "true", oninput: N, onkeydown: e => e.key === 'Tab' && (e.preventDefault(), X("indent")), onkeyup: () => { U(); r = S() }, onmouseup: N, onpaste: e => { e.preventDefault(); X('insertText', e.clipboardData.getData('text/plain')) }, ondrop: e => { e.preventDefault(); hU(e.dataTransfer.files[0]) }, ondragover: e => e.preventDefault() }),
+      textarea({ class: "w-full flex-1 min-h-[22rem] p-4 font-mono text-sm bg-base-200 border-0", style: () => i() ? '' : 'display:none', value: s, oninput: e => { s(e.target.value); if (R) R.innerHTML = e.target.value; p.onchange?.(e.target.value) } })]),
+    div({ class: "px-3 py-1 border-t text-[10px] text-right opacity-60" }, [span(() => c())])
+  ])
+}

src/sigpro.grid.js

@@ -0,0 +1,205 @@
+const { h, watch, onUnmount } = window.SigPro
+
+import {
+  ModuleRegistry,
+  ValidationModule,
+  ColumnAutoSizeModule,
+  CellStyleModule,
+  QuickFilterModule,
+  RowSelectionModule,
+  TextEditorModule,
+  ClientSideRowModelModule,
+  themeQuartz,
+  createGrid,
+  NumberFilterModule,
+  TextFilterModule,
+  DateFilterModule
+} from "ag-grid-community";
+import {
+  MultiFilterModule,
+  SetFilterModule,
+  CellSelectionModule,
+  PivotModule,
+  MasterDetailModule,
+  SideBarModule,
+  ColumnsToolPanelModule,
+  ColumnMenuModule,
+  StatusBarModule,
+  ExcelExportModule,
+  ClipboardModule,
+  ContextMenuModule
+} from "./grid-e";
+
+ModuleRegistry.registerModules([
+  ValidationModule,
+  ColumnAutoSizeModule,
+  CellStyleModule,
+  QuickFilterModule,
+  RowSelectionModule,
+  TextEditorModule,
+  ClientSideRowModelModule,
+  MultiFilterModule,
+  CellSelectionModule,
+  PivotModule,
+  MasterDetailModule,
+  SideBarModule,
+  ColumnsToolPanelModule,
+  ColumnMenuModule,
+  StatusBarModule,
+  ExcelExportModule,
+  ClipboardModule,
+  NumberFilterModule,
+  TextFilterModule,
+  SetFilterModule,
+  DateFilterModule,
+  ContextMenuModule
+]);
+
+const Grid = (props) => {
+  const { data, options, api, on, class: className, style = "height: 100%; width: 100%", dark } = props;
+  let gridApi = null;
+  let cleanupFn = null;
+
+  const getDark = () =>
+    dark !== undefined
+      ? (typeof dark === 'function' ? dark() : dark)
+      : document.documentElement.getAttribute('data-theme') === 'dark' ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  const getTheme = () => {
+    const isDark = getDark();
+
+    if (isDark) {
+      return themeQuartz.withParams({
+        headerFontSize: 14,
+        headerVerticalPaddingScale: 0.4,
+        rowVerticalPaddingScale: 0.4,
+        backgroundColor: "#1d1d1d",
+        foregroundColor: "#ffffff",
+        headerBackgroundColor: "#2a2a2a",
+        headerForegroundColor: "#ffffff",
+        oddRowBackgroundColor: "#262626",
+        borderColor: "#404040",
+        browserColorScheme: "dark"
+      });
+    }
+
+    return themeQuartz.withParams({
+      browserColorScheme: "light",
+      headerFontSize: 14,
+      headerVerticalPaddingScale: 0.4,
+      rowVerticalPaddingScale: 0.4
+    });
+  };
+
+  const initGrid = (container) => {
+    if (cleanupFn) {
+      cleanupFn();
+      cleanupFn = null;
+    }
+    if (gridApi && !gridApi.isDestroyed()) {
+      gridApi.destroy();
+      if (api) api.current = null;
+      gridApi = null;
+    }
+
+    if (!container) return;
+
+    const initialData = typeof data === "function" ? data() : data;
+    const initialOptions = typeof options === "function" ? options() : options;
+
+    const commonEvents = [
+      'onFilterChanged', 'onModelUpdated', 'onGridSizeChanged',
+      'onFirstDataRendered', 'onRowValueChanged', 'onSelectionChanged',
+      'onCellClicked', 'onCellDoubleClicked', 'onCellValueChanged',
+      'onRowClicked', 'onSortChanged', 'onContextMenu',
+      'onColumnResized', 'onColumnMoved', 'onRowDataUpdated',
+      'onCellEditingStarted', 'onCellEditingStopped',
+      'onPaginationChanged', 'onBodyScroll'
+    ];
+
+    const eventHandlers = {};
+    commonEvents.forEach(eventName => {
+      if (on?.[eventName]) {
+        eventHandlers[eventName] = (params) => on[eventName](params);
+      }
+    });
+
+    const gridOptions = {
+      ...initialOptions,
+      theme: getTheme(),
+      rowData: initialData || [],
+      onGridReady: (params) => {
+        gridApi = params.api;
+        if (api) api.current = gridApi;
+        if (on?.onGridReady) on.onGridReady(params);
+
+        if (initialOptions?.autoSizeColumns) {
+          params.api.autoSizeAllColumns();
+        }
+      },
+      ...eventHandlers
+    };
+
+    gridApi = createGrid(container, gridOptions);
+
+    const stopData = watch(() => {
+      if (!gridApi || gridApi.isDestroyed()) return;
+      const newData = typeof data === "function" ? data() : data;
+      if (Array.isArray(newData)) {
+        const currentData = gridApi.getGridOption("rowData");
+        if (newData !== currentData) {
+          gridApi.setGridOption("rowData", newData);
+        }
+      }
+    });
+
+    const stopTheme = watch(() => {
+      if (!gridApi || gridApi.isDestroyed()) return;
+      getDark();
+      const newTheme = getTheme();
+      const currentTheme = gridApi.getGridOption("theme");
+      if (JSON.stringify(newTheme) !== JSON.stringify(currentTheme)) {
+        gridApi.setGridOption("theme", newTheme);
+      }
+    });
+
+    const stopOptions = watch(() => {
+      if (!gridApi || gridApi.isDestroyed() || !options) return;
+      const newOptions = typeof options === "function" ? options() : options;
+      if (newOptions) {
+        Object.entries(newOptions).forEach(([key, val]) => {
+          try {
+            gridApi.setGridOption(key, val);
+          } catch (e) { }
+        });
+      }
+    });
+
+    cleanupFn = () => {
+      stopData();
+      stopTheme();
+      stopOptions();
+      if (gridApi && !gridApi.isDestroyed()) {
+        gridApi.destroy();
+        if (api) api.current = null;
+        gridApi = null;
+      }
+    };
+
+    onUnmount(() => {
+      if (cleanupFn) {
+        cleanupFn();
+        cleanupFn = null;
+      }
+    });
+  };
+
+  return h("div", {
+    class: className,
+    style: style,
+    ref: initGrid
+  });
+};
+
+export { Grid };