@hachej/boring-data-explorer 0.1.40 → 0.1.41

package/dist/front/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 import { ExplorerDataSource, FacetConfig, ExplorerItem, DragPayload, Facets } from '../shared/index.js';
 export { Badge, FacetValue, FacetsArgs, SearchArgs, SearchResult } from '../shared/index.js';
 
@@ -16,6 +16,12 @@ type DataExplorerProps = {
     /** Empty state shown when the top-level result has no rows and no query/filters. */
     emptyState?: ReactNode;
     searchPlaceholder?: string;
+    /** Optional title rendered inside the explorer toolbar (for chromeless left tabs). */
+    toolbarTitle?: ReactNode;
+    /** Optional icon rendered before toolbarTitle. */
+    toolbarIcon?: ComponentType<{
+        className?: string;
+    }>;
     /** Hide the search input. Default true. */
     searchable?: boolean;
     /**
@@ -26,12 +32,14 @@ type DataExplorerProps = {
     query?: string;
     /** Called when the toolbar search changes. Use with `query` for controlled per-tab search. */
     onQueryChange?: (query: string) => void;
+    /** Optional external chrome target for toolbar-only actions such as filters. */
+    toolbarPortalElement?: Element | null;
     /** Page size and debounce — passed through to useExplorerState. */
     pageSize?: number;
     debounceMs?: number;
     className?: string;
 };
-declare function DataExplorer({ adapter, facets: facetConfigs, groupBy, onActivate, getDragPayload, emptyState, searchPlaceholder, searchable, query, onQueryChange, pageSize, debounceMs, className, }: DataExplorerProps): react_jsx_runtime.JSX.Element;
+declare function DataExplorer({ adapter, facets: facetConfigs, groupBy, onActivate, getDragPayload, emptyState, searchPlaceholder, toolbarTitle, toolbarIcon, searchable, query, onQueryChange, toolbarPortalElement, pageSize, debounceMs, className, }: DataExplorerProps): react_jsx_runtime.JSX.Element;
 
 type UseExplorerStateOptions = {
     adapter: ExplorerDataSource;

package/dist/front/index.js

@@ -1,5 +1,6 @@
 // src/front/DataExplorer.tsx
 import { useMemo } from "react";
+import { createPortal } from "react-dom";
 import { ChevronRightIcon, ChevronDownIcon, FilterIcon, SearchIcon, XIcon } from "lucide-react";
 
 // src/front/utils.ts
@@ -353,9 +354,12 @@ function DataExplorer({
   getDragPayload,
   emptyState = "No results",
   searchPlaceholder = "Search\u2026",
+  toolbarTitle,
+  toolbarIcon,
   searchable = true,
   query,
   onQueryChange,
+  toolbarPortalElement,
   pageSize,
   debounceMs,
   className
@@ -375,6 +379,9 @@ function DataExplorer({
   const hasFilters = Object.values(state.filters).some((v) => v.length > 0);
   const treeMode = !!groupBy && !hasQuery && !hasFilters;
   const filterCount = Object.values(state.filters).reduce((n, v) => n + v.length, 0);
+  const useExternalToolbarActions = Boolean(
+    toolbarPortalElement && !showSearch && facetConfigs?.length && !toolbarTitle
+  );
   const groupEntries = useMemo(() => {
     if (!treeMode || !groupBy) return [];
     const config = facetConfigs?.find((f) => f.key === groupBy);
@@ -395,11 +402,27 @@ function DataExplorer({
   }, [treeMode, groupBy, facetConfigs, state.facets]);
   const showEmpty = !state.loading && !treeMode && state.topItems.length === 0 && state.query.length === 0 && !hasFilters;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), "data-slot": "data-explorer", children: [
-    showSearch || facetConfigs?.length ? /* @__PURE__ */ jsx(
+    useExternalToolbarActions && toolbarPortalElement ? createPortal(
+      /* @__PURE__ */ jsx(
+        ExternalToolbarActions,
+        {
+          facetConfigs,
+          facets: state.facets,
+          filters: state.filters,
+          filterCount,
+          onToggleFilter: state.toggleFilter,
+          onClearFilters: state.clearFilters
+        }
+      ),
+      toolbarPortalElement
+    ) : null,
+    (showSearch || facetConfigs?.length) && !useExternalToolbarActions ? /* @__PURE__ */ jsx(
       Toolbar,
       {
         searchable: showSearch,
         searchPlaceholder,
+        title: toolbarTitle,
+        icon: toolbarIcon,
         query: state.query,
         onQueryChange: setToolbarQuery,
         facetConfigs,
@@ -439,6 +462,8 @@ function DataExplorer({
 function Toolbar({
   searchable,
   searchPlaceholder,
+  title,
+  icon: Icon,
   query,
   onQueryChange,
   facetConfigs,
@@ -450,8 +475,12 @@ function Toolbar({
   total
 }) {
   return /* @__PURE__ */ jsxs(UiToolbar, { className: "border-b border-border/60 px-2 py-1.5", children: [
+    title ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 px-1", children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0 text-foreground/80" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[14px] font-medium tracking-tight text-foreground", children: title })
+    ] }) : null,
     total != null ? /* @__PURE__ */ jsx("span", { className: "px-1 font-mono text-[10.5px] uppercase tracking-[0.05em] text-muted-foreground/80", children: total.toLocaleString() }) : null,
-    /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsx("div", { className: title ? "w-1 shrink-0" : "flex-1" }),
     searchable ? /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsxs(
         PopoverTrigger,
@@ -485,47 +514,71 @@ function Toolbar({
         ] }) : null
       ] })
     ] }) : null,
-    facetConfigs?.length ? /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsxs(
-        PopoverTrigger,
-        {
-          "aria-label": "Filters",
-          className: cn(
-            "inline-flex h-7 items-center gap-1 rounded-sm px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
-            filterCount > 0 && "bg-muted text-foreground"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(FilterIcon, { size: 12 }),
-            filterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px]", children: filterCount }) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          side: "right",
-          align: "start",
-          sideOffset: 8,
-          className: "w-64 space-y-3 p-3 text-[12px]",
-          children: [
-            facetConfigs.map((config) => /* @__PURE__ */ jsx(
-              FacetSection,
-              {
-                config,
-                values: facets?.[config.key] ?? [],
-                selected: filters[config.key] ?? [],
-                onToggle: onToggleFilter
-              },
-              config.key
-            )),
-            filterCount > 0 ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "xs", onClick: onClearFilters, className: "gap-1 text-[11px] text-muted-foreground hover:text-foreground", children: [
-              /* @__PURE__ */ jsx(XIcon, { size: 11 }),
-              " Clear all"
-            ] }) : null
-          ]
-        }
-      )
-    ] }) : null
+    /* @__PURE__ */ jsx(
+      FilterControl,
+      {
+        facetConfigs,
+        facets,
+        filters,
+        filterCount,
+        onToggleFilter,
+        onClearFilters
+      }
+    )
+  ] });
+}
+function ExternalToolbarActions(props) {
+  return /* @__PURE__ */ jsx(FilterControl, { ...props });
+}
+function FilterControl({
+  facetConfigs,
+  facets,
+  filters,
+  filterCount,
+  onToggleFilter,
+  onClearFilters
+}) {
+  if (!facetConfigs?.length) return null;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        "aria-label": "Filters",
+        className: cn(
+          "inline-flex h-7 items-center gap-1 rounded-sm px-1.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+          filterCount > 0 && "bg-muted text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(FilterIcon, { size: 12 }),
+          filterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px]", children: filterCount }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: 8,
+        className: "w-64 space-y-3 p-3 text-[12px]",
+        children: [
+          facetConfigs.map((config) => /* @__PURE__ */ jsx(
+            FacetSection,
+            {
+              config,
+              values: facets?.[config.key] ?? [],
+              selected: filters[config.key] ?? [],
+              onToggle: onToggleFilter
+            },
+            config.key
+          )),
+          filterCount > 0 ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "xs", onClick: onClearFilters, className: "gap-1 text-[11px] text-muted-foreground hover:text-foreground", children: [
+            /* @__PURE__ */ jsx(XIcon, { size: 11 }),
+            " Clear all"
+          ] }) : null
+        ]
+      }
+    )
   ] });
 }
 function FacetSection({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-data-explorer",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -41,7 +41,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "tailwind-merge": "^3.5.0",
-    "@hachej/boring-ui-kit": "0.1.40"
+    "@hachej/boring-ui-kit": "0.1.41"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",