@mshuja288/aksuicore 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -7,6 +7,13 @@ Versioning follows [VERSIONING.md](./VERSIONING.md).
 
 ## [Unreleased]
 
+## [0.4.3] — 2026-10-13
+
+### Added
+
+- `RecordWorkspace` persists preview on/off and side-rail expand/collapse globally (`aksui.workspace.chrome`) across all tables
+- Filter values persist per screen at `${columnPrefsKey}.filters` when `columnPrefsKey` is set
+
 ## [0.4.1] — 2026-10-12
 
 ### Fixed

package/dist/aksui.css

@@ -1222,7 +1222,8 @@ button.side-rail-add:hover {
 }
 
 .side-rail-columns,
-.side-rail-download {
+.side-rail-download,
+.side-rail-bulk {
   display: grid;
   gap: 8px;
 }
@@ -1350,6 +1351,79 @@ button.side-rail-download-format:disabled {
   cursor: default;
 }
 
+button.side-rail-bulk-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-bulk-toggle svg {
+  width: 18px;
+  height: 18px;
+}
+
+button.side-rail-bulk-toggle:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-bulk-toggle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.side-rail-bulk-panel {
+  display: grid;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--aks-line);
+  border-radius: var(--aks-radius);
+  background: #faf9f7;
+}
+
+label.side-rail-bulk-mode,
+label.side-rail-bulk-file {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--aks-brand);
+}
+
+button.side-rail-bulk-submit {
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: var(--aks-radius);
+  background: var(--aks-accent, #c45c26);
+  color: #fff;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+button.side-rail-bulk-submit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.side-rail-bulk-report {
+  font-size: 12px;
+  color: var(--aks-brand);
+}
+
+.side-rail-bulk-errors {
+  margin: 6px 0 0;
+  padding-left: 18px;
+}
+
 .side-rail-filters {
   display: grid;
   gap: 12px;

package/dist/index.cjs

@@ -869,9 +869,45 @@ var EXPORT_FORMAT_OPTIONS = [
   { format: "xlsx", label: "Excel" },
   { format: "json", label: "JSON" }
 ];
+var BULK_IMPORT_MODE_OPTIONS = [
+  { mode: "insert", label: "Insert" },
+  { mode: "update", label: "Update" },
+  { mode: "upsert", label: "Upsert" }
+];
 function defaultVisibleKeys(columns) {
   return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
 }
+var WORKSPACE_CHROME_KEY = "aksui.workspace.chrome";
+function readWorkspaceChrome() {
+  if (typeof window === "undefined") {
+    return { previewEnabled: false, sideOpen: false };
+  }
+  try {
+    const raw = window.localStorage.getItem(WORKSPACE_CHROME_KEY);
+    if (!raw) {
+      return { previewEnabled: false, sideOpen: false };
+    }
+    const parsed = JSON.parse(raw);
+    return {
+      previewEnabled: Boolean(parsed.previewEnabled),
+      sideOpen: Boolean(parsed.sideOpen)
+    };
+  } catch {
+    return { previewEnabled: false, sideOpen: false };
+  }
+}
+function writeWorkspaceChrome(chrome) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(WORKSPACE_CHROME_KEY, JSON.stringify(chrome));
+  } catch {
+  }
+}
+function filtersPrefsKey(columnPrefsKey) {
+  return columnPrefsKey ? `${columnPrefsKey}.filters` : void 0;
+}
 function readStoredColumnKeys(prefsKey, fallback, allowed) {
   if (!prefsKey || typeof window === "undefined") {
     return fallback;
@@ -900,6 +936,45 @@ function writeStoredColumnKeys(prefsKey, keys) {
   } catch {
   }
 }
+function readStoredFilters(prefsKey, allowed) {
+  if (!prefsKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const raw = window.localStorage.getItem(prefsKey);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {};
+    }
+    const next = {};
+    for (const [key, value] of Object.entries(parsed)) {
+      if (allowed.has(key) && typeof value === "string" && value.trim()) {
+        next[key] = value;
+      }
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+function writeStoredFilters(prefsKey, filters) {
+  if (!prefsKey || typeof window === "undefined") {
+    return;
+  }
+  try {
+    const trimmed = {};
+    for (const [key, value] of Object.entries(filters)) {
+      if (value.trim()) {
+        trimmed[key] = value;
+      }
+    }
+    window.localStorage.setItem(prefsKey, JSON.stringify(trimmed));
+  } catch {
+  }
+}
 function compareColumnValues(column, left, right) {
   const leftRaw = column.display ? column.display(left) : column.value(left);
   const rightRaw = column.display ? column.display(right) : column.value(right);
@@ -945,6 +1020,13 @@ function PreviewIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "2.4", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
   ] });
 }
+function UploadIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 16.5V7.3", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 10.8 10 7.2l3.5 3.6", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+  ] });
+}
 function DownloadIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3.5v8.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
@@ -994,7 +1076,11 @@ function RecordWorkspace({
   canDelete,
   onDownload,
   canDownload = true,
+  canExport,
   downloadBusy = false,
+  onBulkImport,
+  canImport = true,
+  importBusy = false,
   showColumnPicker = true,
   columnPrefsKey,
   visibleColumnKeys,
@@ -1012,13 +1098,21 @@ function RecordWorkspace({
   const [internalVisibleKeys, setInternalVisibleKeys] = react.useState(
     () => readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys)
   );
-  const [filters, setFilters] = react.useState({});
+  const filterStorageKey = filtersPrefsKey(columnPrefsKey);
+  const [filters, setFilters] = react.useState(
+    () => readStoredFilters(filterStorageKey, allowedKeys)
+  );
   const [sort, setSort] = react.useState(null);
-  const [sideOpen, setSideOpen] = react.useState(false);
+  const [sideOpen, setSideOpen] = react.useState(() => readWorkspaceChrome().sideOpen);
   const [toolsDrawerOpen, setToolsDrawerOpen] = react.useState(false);
   const [downloadOpen, setDownloadOpen] = react.useState(false);
+  const [bulkOpen, setBulkOpen] = react.useState(false);
+  const [bulkMode, setBulkMode] = react.useState("upsert");
+  const [bulkFile, setBulkFile] = react.useState(null);
+  const [bulkReport, setBulkReport] = react.useState(null);
+  const bulkFileInputRef = react.useRef(null);
   const [columnsOpen, setColumnsOpen] = react.useState(false);
-  const [previewEnabled, setPreviewEnabled] = react.useState(false);
+  const [previewEnabled, setPreviewEnabled] = react.useState(() => readWorkspaceChrome().previewEnabled);
   const [previewKey, setPreviewKey] = react.useState(null);
   const [tooltip, setTooltip] = react.useState(null);
   const [pageSize, setPageSize] = react.useState("15");
@@ -1033,6 +1127,9 @@ function RecordWorkspace({
     }
     setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
   }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
+  react.useEffect(() => {
+    setFilters(readStoredFilters(filtersPrefsKey(columnPrefsKey), allowedKeys));
+  }, [allowedKeys, columnPrefsKey]);
   const resolvedVisibleKeys = react.useMemo(() => {
     const source = isControlled ? visibleColumnKeys : internalVisibleKeys;
     const filtered2 = source.filter((key) => allowedKeys.has(key));
@@ -1111,7 +1208,9 @@ function RecordWorkspace({
   const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
   const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
   const showAdd = canAdd && Boolean(onAdd);
-  const showDownload = Boolean(onDownload) && canDownload;
+  const exportAllowed = (canExport ?? true) && canDownload;
+  const showDownload = Boolean(onDownload) && exportAllowed;
+  const showBulkImport = Boolean(onBulkImport) && canImport;
   const showFilters = filterableColumns.length > 0;
   const showColumns = showColumnPicker && columns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
@@ -1156,6 +1255,29 @@ function RecordWorkspace({
     onDownload(format, exportColumns);
     setDownloadOpen(false);
   }
+  async function submitBulkImport() {
+    if (!onBulkImport || importBusy || !bulkFile) {
+      return;
+    }
+    setBulkReport(null);
+    try {
+      const report = await onBulkImport(bulkMode, bulkFile);
+      setBulkReport(report);
+      if (report.applied) {
+        setBulkFile(null);
+        if (bulkFileInputRef.current) {
+          bulkFileInputRef.current.value = "";
+        }
+      }
+    } catch {
+      setBulkReport({
+        totalRows: 0,
+        failed: 1,
+        applied: false,
+        errors: [{ row: 0, code: "ImportFailed", message: "Import request failed." }]
+      });
+    }
+  }
   function cellText(column, item) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
@@ -1168,13 +1290,22 @@ function RecordWorkspace({
   }
   const previewTitle = previewItem && visibleColumns[0] ? cellText(visibleColumns[0], previewItem) : null;
   function changeFilter(key, value) {
-    setFilters((current) => ({ ...current, [key]: value }));
+    setFilters((current) => {
+      const next = { ...current, [key]: value };
+      writeStoredFilters(filterStorageKey, next);
+      return next;
+    });
     setPage(1);
   }
   function clearFilters() {
     setFilters({});
+    writeStoredFilters(filterStorageKey, {});
     setPage(1);
   }
+  function setSideOpenValue(open) {
+    setSideOpen(open);
+    writeWorkspaceChrome({ previewEnabled, sideOpen: open });
+  }
   function toggleSort(column) {
     if (column.sortable === false) {
       return;
@@ -1192,6 +1323,7 @@ function RecordWorkspace({
   }
   function setPreviewEnabledValue(enabled) {
     setPreviewEnabled(enabled);
+    writeWorkspaceChrome({ previewEnabled: enabled, sideOpen });
     setTooltip(null);
     if (!enabled) {
       setPreviewKey(null);
@@ -1252,7 +1384,7 @@ function RecordWorkspace({
             title: "Columns",
             "aria-label": "Columns",
             onClick: () => {
-              setSideOpen(true);
+              setSideOpenValue(true);
               setColumnsOpen(true);
             },
             children: [
@@ -1270,12 +1402,27 @@ function RecordWorkspace({
             "aria-label": "Download",
             disabled: downloadBusy,
             onClick: () => {
-              setSideOpen(true);
+              setSideOpenValue(true);
               setDownloadOpen(true);
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {})
           }
         ) : null,
+        showBulkImport ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-icon",
+            title: "Bulk entry",
+            "aria-label": "Bulk entry",
+            disabled: importBusy,
+            onClick: () => {
+              setSideOpenValue(true);
+              setBulkOpen(true);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {})
+          }
+        ) : null,
         showFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -1400,6 +1547,77 @@ function RecordWorkspace({
           option.format
         )) }) : null
       ] }) : null,
+      showBulkImport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ghost side-rail-bulk-toggle",
+            "aria-expanded": bulkOpen,
+            disabled: importBusy,
+            onClick: () => setBulkOpen((open) => !open),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: importBusy ? "Importing\u2026" : "Bulk entry" })
+            ]
+          }
+        ),
+        bulkOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk-panel", role: "group", "aria-label": "Bulk entry", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-bulk-mode", children: [
+            "Mode",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Select,
+              {
+                value: bulkMode,
+                options: BULK_IMPORT_MODE_OPTIONS.map((option) => ({ value: option.mode, label: option.label })),
+                onChange: (value) => setBulkMode(value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "side-rail-bulk-file", children: [
+            "File",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: bulkFileInputRef,
+                type: "file",
+                accept: ".csv,.xlsx,.json",
+                disabled: importBusy,
+                onChange: (event) => {
+                  setBulkFile(event.target.files?.[0] ?? null);
+                  setBulkReport(null);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "side-rail-bulk-submit",
+              disabled: importBusy || !bulkFile,
+              onClick: () => void submitBulkImport(),
+              children: importBusy ? "Importing\u2026" : "Import"
+            }
+          ),
+          bulkReport ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-bulk-report", role: "status", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: bulkReport.applied ? `Applied ${bulkReport.totalRows} row(s).` : `${bulkReport.failed} error(s) in ${bulkReport.totalRows} row(s).` }),
+            bulkReport.errors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "side-rail-bulk-errors", children: [
+              bulkReport.errors.slice(0, 8).map((error, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                "Row ",
+                error.row,
+                ": ",
+                error.message
+              ] }, `${error.row}-${error.code}-${index}`)),
+              bulkReport.errors.length > 8 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                "\u2026and ",
+                bulkReport.errors.length - 8,
+                " more"
+              ] }) : null
+            ] }) : null
+          ] }) : null
+        ] }) : null
+      ] }) : null,
       showFilters ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-filters", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel-head", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filters" }),
@@ -1601,7 +1819,7 @@ function RecordWorkspace({
                 className: "ghost side-rail-toggle",
                 "aria-expanded": sideOpen,
                 title: sideOpen ? "Collapse" : "Expand",
-                onClick: () => setSideOpen((open) => !open),
+                onClick: () => setSideOpenValue(!sideOpen),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { open: sideOpen }),
                   sideOpen ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Collapse" }) : null