@upbound/monarch-blocks 0.6.0 → 0.7.1

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { CelFilterBar, RELATIVE_DURATION_PRESET_VALUES, allowsMultipleConditions
 export { C as CelColumnDefinition, a as CelColumnOption, b as CelConditionValue, c as CelFilterBarProps, d as CelFilterCondition, e as CelFilterGroup, f as CelFilterSchema, g as CelFilterTree, h as CelOperator, i as CelRestrictedOptionSelectPayload, j as CheckboxCelValue, k as CompileResult, D as DateCelValue, M as MapKeyCelValue, l as MultiTextCelValue, P as PillActiveSurface, R as RadioCelValue, m as RelativeDurationPreset, V as ValidationIssue, n as isCelFilterCondition, o as isCelFilterGroup, p as isCheckboxCelValue, q as isDateCelValue, r as isMapKeyCelValue, s as isMultiTextCelValue } from './types-BULiU2qC.js';
 export { ChartAction, ChartConfig, ChartContainer, ChartDescription, ChartFooter, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent } from './chart.js';
 export { ChatInput, ChatInputProps, ChatInterface, ChatInterfaceProps, ChatMessage, ChatMessageBubble, ChatRoutine, ChatSession, ChatSessionList, ChatSessionListProps, ChatThread, ChatThreadProps, ChatToolCall } from './chat-interface.js';
-export { CodeBlock, CodeBlockBody, CodeBlockCopyButton, CodeBlockDownloadButton, CodeBlockFooter, CodeBlockHeader } from './code-block.js';
+export { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton, CodeBlockDownloadButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLanguage } from './code-block.js';
 export { CellContextualFilter, CellContextualFilterProps, ColumnOptions, ColumnOptionsProps, ContextualMenuAction, DataTable, DataTableBody, DataTableCelFilterConfig, DataTableCell, DataTableExpandedRow, DataTableFilterVisibilityConfig, DataTableGroupRow, DataTableHeader, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRow, DataTableRowProps, DataTableSkeletonBody, DataTableValueCell, DataTableValueCellProps, ExpandButton, RowActionItem, RowActions, RowCountRelation, StickyHeaderConfig, TableHookOptions, TableLayout, TimestampCell, ViewFilter, ViewFilterProps, getActionsColumnDefinition, getExpandColumnDefinition, normalizePageSizeOptions } from './data-table.js';
 export { D as DataTableEmptyConfig, a as DataTableEmptyView, d as defaultEmptyConfig, b as defaultErrorConfig, c as defaultNoFilterFoundConfig } from './empty-view-DO36LNvk.js';
 export { ActiveFilter, CheckboxFilterDefinition, CheckboxFilterValue, DateFilterDefinition, DateFilterValue, FilterBar, FilterBarProps, FilterChip, FilterDefinition, FilterOption, FilterType, FilterValue, MultiTextFilterDefinition, MultiTextFilterValue, RadioFilterDefinition, RadioFilterValue, TextFilterDefinition, TextFilterValue } from './filter-bar.js';

package/dist/index.js

@@ -36,37 +36,7 @@ import * as React from "react";
 import { Icon } from "@upbound/monarch-core";
 
 // src/lib/utils.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "display-hero",
-            "display-kpi-sm",
-            "display-kpi",
-            "display-kpi-lg",
-            "display-feature",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "body-lg",
-            "body",
-            "body-sm",
-            "caption",
-            "eyebrow"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import { cn } from "@upbound/monarch-core/utils";
 function sortBy(items, getKey) {
   return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
 }
@@ -1296,7 +1266,7 @@ function CelAddFilterButton({
         if (column) onSelect(column.id);
       },
       children: [
-        /* @__PURE__ */ jsxs(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: [
+        /* @__PURE__ */ jsxs(ComboboxTrigger, { "aria-label": "Add filter", showIndicator: false, render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: [
           /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
           "Add filter"
         ] }),
@@ -2892,7 +2862,7 @@ function ChatInterface(_a) {
 }
 
 // src/code-block.tsx
-import { useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { Icon as Icon3 } from "@upbound/monarch-core";
 import {
   Card,
@@ -2903,6 +2873,36 @@ import {
   TooltipContent as TooltipContent2,
   TooltipTrigger as TooltipTrigger2
 } from "@upbound/monarch-core";
+
+// src/lib/highlight.ts
+import { createHighlighter } from "shiki";
+var CODE_BLOCK_LANGUAGES = ["tsx", "typescript", "bash", "shell", "json", "css", "yaml"];
+var HIGHLIGHTER_KEY = "__monarch_shiki_highlighter__";
+function getHighlighter() {
+  const g = globalThis;
+  if (!g[HIGHLIGHTER_KEY]) {
+    g[HIGHLIGHTER_KEY] = createHighlighter({
+      themes: ["github-light-high-contrast", "github-dark-dimmed"],
+      langs: [...CODE_BLOCK_LANGUAGES]
+    }).catch((error) => {
+      delete g[HIGHLIGHTER_KEY];
+      throw error;
+    });
+  }
+  return g[HIGHLIGHTER_KEY];
+}
+async function highlightCode(code, lang) {
+  const hl = await getHighlighter();
+  return hl.codeToHtml(code, {
+    lang,
+    themes: {
+      light: "github-light-high-contrast",
+      dark: "github-dark-dimmed"
+    }
+  });
+}
+
+// src/code-block.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function CodeBlock(_a) {
   var _b = _a, {
@@ -2943,24 +2943,48 @@ function CodeBlockHeader(_a) {
     }, props)
   );
 }
+var LINE_NUMBER_GUTTER = cn(
+  "[&_code]:[counter-reset:line]",
+  "[&_.line]:before:[counter-increment:line]",
+  "[&_.line]:before:content-[counter(line)]",
+  "[&_.line]:before:inline-block",
+  "[&_.line]:before:w-6",
+  "[&_.line]:before:mr-3",
+  "[&_.line]:before:text-right",
+  "[&_.line]:before:text-muted-foreground",
+  "[&_.line]:before:text-[0.75rem]",
+  "[&_.line]:before:select-none"
+);
 function CodeBlockBody(_a) {
   var _b = _a, {
     className,
     code,
-    html,
-    lineNumbers,
     maxHeight,
     copyButton,
     downloadButton
   } = _b, props = __objRest(_b, [
     "className",
     "code",
-    "html",
-    "lineNumbers",
     "maxHeight",
     "copyButton",
     "downloadButton"
   ]);
+  const { content, lineNumbers } = code;
+  const [html, setHtml] = useState5(null);
+  const language = code.type === "parsed" ? code.language : null;
+  useEffect3(() => {
+    if (!language) {
+      setHtml(null);
+      return;
+    }
+    let cancelled = false;
+    highlightCode(content, language).then((result) => {
+      if (!cancelled) setHtml(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [content, language]);
   return /* @__PURE__ */ jsxs4(CardContent, __spreadProps(__spreadValues({ "data-line-numbers": lineNumbers || void 0, className: cn("relative p-0!", className) }, props), { children: [
     (copyButton || downloadButton) && /* @__PURE__ */ jsxs4("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100", children: [
       copyButton,
@@ -2971,16 +2995,20 @@ function CodeBlockBody(_a) {
       {
         className: cn("overflow-x-auto", maxHeight && "overflow-y-auto"),
         style: maxHeight ? { maxHeight } : void 0,
-        children: html ? /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx6(
           "div",
           {
-            className: "[&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
-            dangerouslySetInnerHTML: { __html: html }
+            className: cn(
+              "[&_code]:font-mono [&_pre]:m-0 [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3",
+              html && "[&_pre]:bg-transparent!",
+              lineNumbers && LINE_NUMBER_GUTTER
+            ),
+            children: html ? /* @__PURE__ */ jsx6("div", { dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { className: lineNumbers ? void 0 : "whitespace-pre", children: lineNumbers ? content.split("\n").map((line, i) => /* @__PURE__ */ jsxs4("span", { className: "line", children: [
+              line,
+              "\n"
+            ] }, i)) : content }) })
           }
-        ) : lineNumbers ? /* @__PURE__ */ jsx6("pre", { className: "p-4 group-data-[size=sm]/code-block:p-3", children: /* @__PURE__ */ jsx6("code", { className: "font-mono", children: code.split("\n").map((line, i) => /* @__PURE__ */ jsxs4("span", { className: "line", children: [
-          line,
-          "\n"
-        ] }, i)) }) }) : /* @__PURE__ */ jsx6("pre", { className: "p-4 group-data-[size=sm]/code-block:p-3", children: /* @__PURE__ */ jsx6("code", { className: "font-mono whitespace-pre", children: code }) })
+        )
       }
     )
   ] }));
@@ -3181,10 +3209,9 @@ import { Icon as Icon4 } from "@upbound/monarch-core";
 // src/lib/data-table/utils.ts
 var TO_EACH_SIDE = 2;
 function normalizeColumnOrdering(columnOrdering, allColumnIds) {
-  const validIds = new Set(allColumnIds);
   const seenIds = /* @__PURE__ */ new Set();
   const trackedColumnIds = columnOrdering.filter((columnId) => {
-    if (!validIds.has(columnId) || seenIds.has(columnId)) return false;
+    if (seenIds.has(columnId)) return false;
     seenIds.add(columnId);
     return true;
   });
@@ -3713,7 +3740,7 @@ function getColumnFilterCount(filterValue, filter) {
 }
 
 // src/hooks/use-table-column-resizing.ts
-import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3, useState as useState7 } from "react";
 var RESIZE_MIN = 40;
 var RESIZE_MAX = 500;
 var RESIZE_MAX_UNBOUNDED = Number.MAX_SAFE_INTEGER;
@@ -3802,7 +3829,7 @@ function useTableColumnResizing({
 } = {}) {
   const [columnSizing, setColumnSizing] = useState7(() => clampSizing(initialSizing != null ? initialSizing : {}, maxSize));
   const persistTimerRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!initialSizing) return;
     const next = clampSizing(initialSizing, maxSize);
     setColumnSizing((prev) => {
@@ -3811,7 +3838,7 @@ function useTableColumnResizing({
       return keys.every((k) => prev[k] === next[k]) ? prev : next;
     });
   }, [initialSizing, maxSize]);
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
       if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
     };
@@ -4523,9 +4550,9 @@ function DataTableSortIcon({ sortOrder }) {
   return /* @__PURE__ */ jsx13(
     Icon9,
     {
-      name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
       size: "xs",
-      className: "text-primary group-hover/col-actions:text-foreground group-data-[state=open]/col-actions:text-foreground mr-0.5 shrink-0"
+      name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
+      className: "text-foreground group-hover/col-actions:text-foreground group-data-[state=open]/col-actions:text-foreground mr-0.5 shrink-0"
     }
   );
 }
@@ -4617,7 +4644,7 @@ function HeaderCellContent({
       "aria-label": shouldShowActionsMenu ? headerTitle ? `${headerTitle} column actions` : "Column actions" : void 0,
       className: cn(
         "group/col-actions text-muted-foreground -mx-2 -my-1 flex min-w-0 items-center gap-1 truncate rounded-md px-2 py-1 text-left font-medium motion-safe:transition-colors",
-        sorted && "text-primary",
+        sorted && "text-foreground",
         shouldShowActionsMenu ? "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 cursor-pointer" : "cursor-default"
       ),
       children: [
@@ -5105,7 +5132,7 @@ function FilterBar(_a) {
               if (filter) handleAddFilter(filter.key);
             },
             children: [
-              /* @__PURE__ */ jsxs12(ComboboxTrigger2, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx14(Button7, { variant: "outline" }), children: [
+              /* @__PURE__ */ jsxs12(ComboboxTrigger2, { "aria-label": "Add filter", showIndicator: false, render: /* @__PURE__ */ jsx14(Button7, { variant: "outline" }), children: [
                 /* @__PURE__ */ jsx14(Icon10, { name: "plus", "data-icon": "inline-start" }),
                 "Add filter"
               ] }),
@@ -5683,6 +5710,7 @@ function SectionHeaderTabs(_a) {
 // src/data-table/data-table.tsx
 import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE = 20;
+var STICKY_HEADER_MAX_HEIGHT_CLASS = "max-h-[calc(100svh-250px)]";
 function DataTable({
   id,
   config,
@@ -6020,9 +6048,10 @@ function DataTable({
             "div",
             {
               ref: tableBodyScrollRef,
+              "data-testid": "table-scroll-container",
               className: cn(
                 "min-h-0 flex-1 overflow-auto rounded-lg border **:data-[slot=table-container]:overflow-visible",
-                !!stickyHeader && "max-h-[calc(100svh-250px)]"
+                !!stickyHeader && !fitContent && STICKY_HEADER_MAX_HEIGHT_CLASS
               ),
               children: /* @__PURE__ */ jsxs13(
                 DataTableRoot,
@@ -6660,7 +6689,7 @@ var GraphActionsProvider = React14.forwardRef(
 GraphActionsProvider.displayName = "GraphActionsProvider";
 
 // src/graph/graph.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import {
   getCoreRowModel as getCoreRowModel2,
   getFacetedRowModel as getFacetedRowModel2,
@@ -6671,15 +6700,8 @@ import {
 import { Icon as Icon14, InputGroup as InputGroup4, InputGroupAddon as InputGroupAddon4, InputGroupInput as InputGroupInput3 } from "@upbound/monarch-core";
 
 // src/graph/graph-view.tsx
-import * as React15 from "react";
-import {
-  Background,
-  Controls,
-  MiniMap,
-  ReactFlow,
-  ReactFlowProvider,
-  useReactFlow
-} from "reactflow";
+import * as React16 from "react";
+import { Background, Controls, MiniMap, ReactFlow, ReactFlowProvider } from "reactflow";
 
 // src/graph/hooks/useAutoLayout.ts
 import { useMemo as useMemo10 } from "react";
@@ -6885,25 +6907,50 @@ var useNodeVisibility = (nodes, edges) => {
   return { nodes: visibleNodes, edges: visibleEdges };
 };
 
+// src/graph/hooks/useViewportFocus.ts
+import * as React15 from "react";
+import { useReactFlow, useStore } from "reactflow";
+function getViewportFocusCenter(node) {
+  var _a;
+  const compact = node.type !== "loading" && Boolean((_a = node.data) == null ? void 0 : _a.compact);
+  const height = compact ? GRAPH_NODE_COLLAPSED_HEIGHT : GRAPH_NODE_HEIGHT;
+  return {
+    x: node.position.x + GRAPH_NODE_WIDTH / 2,
+    y: node.position.y + height / 2
+  };
+}
+function useViewportFocus(nodeMap, viewportFocusNodeId) {
+  const { setCenter } = useReactFlow();
+  const viewportReady = useStore((state) => state.width > 0 && state.height > 0);
+  const node = viewportFocusNodeId ? nodeMap.get(viewportFocusNodeId) : void 0;
+  React15.useEffect(() => {
+    if (!node || !viewportReady) {
+      return;
+    }
+    const { x, y } = getViewportFocusCenter(node);
+    setCenter(x, y, { zoom: 1 });
+  }, [node == null ? void 0 : node.id, viewportReady, setCenter]);
+}
+
 // src/graph/graph-view.tsx
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var GraphViewInternal = ({ nodeTypes: parentNodeTypes, edgeTypes: parentEdgeTypes, children, viewportFocusNodeId }) => {
   const { nodes, edges, toggleNodeExpansion } = useGraphActionsContext();
-  const nodeTypes = React15.useMemo(
+  const nodeTypes = React16.useMemo(
     () => __spreadValues({
       default: GraphNode,
       loading: GraphNodeSkeleton
     }, parentNodeTypes),
     [parentNodeTypes]
   );
-  const edgeTypes = React15.useMemo(
+  const edgeTypes = React16.useMemo(
     () => __spreadValues({
       default: GraphEdge
     }, parentEdgeTypes),
     [parentEdgeTypes]
   );
   const { nodes: visibleNodes, edges: visibleEdges } = useNodeVisibility(nodes, edges);
-  const nodesWithExpansion = React15.useMemo(() => {
+  const nodesWithExpansion = React16.useMemo(() => {
     return visibleNodes.map((node) => {
       if (isDefaultNode(node) && !node.data.onExpandToggle) {
         return __spreadProps(__spreadValues({}, node), {
@@ -6950,21 +6997,10 @@ var GraphViewInternal = ({ nodeTypes: parentNodeTypes, edgeTypes: parentEdgeType
     }
   );
 };
-var GraphView = React15.forwardRef(({ defaultNodes = [], defaultEdges = [], nodeTypes, edgeTypes, children, viewportFocusNodeId }, ref) => {
+var GraphView = React16.forwardRef(({ defaultNodes = [], defaultEdges = [], nodeTypes, edgeTypes, children, viewportFocusNodeId }, ref) => {
   return /* @__PURE__ */ jsx22(ReactFlowProvider, { children: /* @__PURE__ */ jsx22(GraphActionsProvider, { ref, initialNodes: defaultNodes, initialEdges: defaultEdges, children: /* @__PURE__ */ jsx22(GraphViewInternal, { nodeTypes, edgeTypes, viewportFocusNodeId, children }) }) });
 });
 GraphView.displayName = "GraphView";
-function useViewportFocus(nodeMap, viewportFocusNodeId) {
-  const flow = useReactFlow();
-  React15.useEffect(() => {
-    if (viewportFocusNodeId) {
-      const focusNode = nodeMap.get(viewportFocusNodeId);
-      if (focusNode) {
-        flow.setCenter(focusNode.position.x, focusNode.position.y, { zoom: 1 });
-      }
-    }
-  }, [viewportFocusNodeId, flow, nodeMap]);
-}
 
 // src/graph/graph.tsx
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -7003,12 +7039,12 @@ function Graph({
   children
 }) {
   var _a, _b, _c;
-  const graphRef = React16.useRef(null);
-  const [innerGlobalFilter, setInnerGlobalFilter] = React16.useState("");
-  const [innerColumnFilters, setInnerColumnFilters] = React16.useState([]);
+  const graphRef = React17.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React17.useState("");
+  const [innerColumnFilters, setInnerColumnFilters] = React17.useState([]);
   const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
   const setGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (parentGlobalFilter !== void 0) {
       setInnerGlobalFilter(parentGlobalFilter);
     }
@@ -7029,7 +7065,7 @@ function Graph({
   });
   const flatColumns = table.getAllFlatColumns();
   const filteredRows = table.getFilteredRowModel().rows;
-  const filteredData = React16.useMemo(() => filteredRows.map((row) => row.original), [filteredRows]);
+  const filteredData = React17.useMemo(() => filteredRows.map((row) => row.original), [filteredRows]);
   const filterCount = columnFilters.map(
     ({ id: columnFilterId, value }) => {
       var _a2, _b2;
@@ -7043,10 +7079,10 @@ function Graph({
     setColumnFilters([]);
     setGlobalFilter("");
   };
-  const memoizedNodeTypes = React16.useMemo(() => config.nodeTypes, [config.nodeTypes]);
-  const memoizedEdgeTypes = React16.useMemo(() => config.edgeTypes, [config.edgeTypes]);
-  const memoizedConfig = React16.useMemo(() => config, [config]);
-  React16.useEffect(() => {
+  const memoizedNodeTypes = React17.useMemo(() => config.nodeTypes, [config.nodeTypes]);
+  const memoizedEdgeTypes = React17.useMemo(() => config.edgeTypes, [config.edgeTypes]);
+  const memoizedConfig = React17.useMemo(() => config, [config]);
+  React17.useEffect(() => {
     if (!graphRef.current) {
       return;
     }
@@ -7118,20 +7154,20 @@ function Graph({
 }
 
 // src/graph/hooks/useGetViewportNodeIds.ts
-import { useEffect as useEffect9, useMemo as useMemo14, useRef as useRef9, useState as useState14 } from "react";
-import { useStore, useViewport } from "reactflow";
+import { useEffect as useEffect10, useMemo as useMemo14, useRef as useRef9, useState as useState14 } from "react";
+import { useStore as useStore2, useViewport } from "reactflow";
 var useGetDebouncedViewport = (debounceDelay = 1e3) => {
   const timerRef = useRef9(null);
   const [debouncedValues, setDebouncedValues] = useState14({ x: 0, y: 0, zoom: 1, width: 0, height: 0, nodes: [] });
   const { x, y, zoom } = useViewport();
-  const { width, height, nodes } = useStore((state) => ({
+  const { width, height, nodes } = useStore2((state) => ({
     width: state.width,
     height: state.height,
     nodes: state.getNodes()
   }));
   const nodesHash = nodes.map((n) => n.id).sort().join(",");
   const memoizedNodes = useMemo14(() => nodes, [nodesHash]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
     }