@upbound/monarch-blocks 0.4.1 → 0.6.0

package/dist/graph.js

@@ -0,0 +1,1780 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/graph/graph-actions-provider.tsx
+import * as React2 from "react";
+
+// src/graph/hooks/useGraphActionsContext.ts
+import { createContext, useContext } from "react";
+var GraphActionsContext = createContext(null);
+var useGraphActionsContext = () => {
+  const context = useContext(GraphActionsContext);
+  if (!context) {
+    throw new Error("useGraphActionsContext must be used within GraphActionsProvider");
+  }
+  return context;
+};
+
+// src/graph/hooks/useGraphActions.ts
+import { useCallback as useCallback2, useState } from "react";
+
+// src/graph/graph-node.tsx
+import * as React from "react";
+import { getIncomers, getOutgoers, Handle, Position as Position2 } from "reactflow";
+import { Badge, Card, Icon, Spinner, Tooltip, TooltipContent, TooltipTrigger } 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));
+}
+function sortBy(items, getKey) {
+  return [...items].sort((a, b) => getKey(a).localeCompare(getKey(b)));
+}
+
+// src/graph/consts.ts
+var GRAPH_NODE_WIDTH = 260;
+var GRAPH_NODE_HEIGHT = 106;
+var GRAPH_NODE_COLLAPSED_HEIGHT = 47;
+var GRAPH_NODE_SEP = 22;
+var GRAPH_RANK_SEP = 54;
+
+// src/graph/graph-edge.tsx
+import { getSmoothStepPath, getStraightPath, Position } from "reactflow";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GraphEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  targetPosition
+}) => {
+  const halfDistanceWidth = (targetX - sourceX) / 2;
+  const [straightEdgePath] = getStraightPath({
+    sourceX: sourceX - 4,
+    sourceY,
+    targetX: Math.max(sourceX + halfDistanceWidth, GRAPH_NODE_WIDTH / 2),
+    targetY: sourceY
+  });
+  const [edgePath] = getSmoothStepPath({
+    sourceX: Math.max(sourceX + halfDistanceWidth, GRAPH_NODE_WIDTH / 2),
+    sourceY,
+    sourcePosition: Position.Bottom,
+    targetX: targetX + 4,
+    targetY,
+    targetPosition,
+    borderRadius: 8,
+    offset: 0
+  });
+  return /* @__PURE__ */ jsxs("g", { id, className: "react-flow__edge-path", children: [
+    /* @__PURE__ */ jsx("path", { d: straightEdgePath, className: "stroke-border fill-transparent stroke-2" }),
+    /* @__PURE__ */ jsx("path", { d: edgePath, className: "stroke-border fill-transparent stroke-2" })
+  ] });
+};
+
+// src/graph/graph-node.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function isDefaultNode(node) {
+  return node.type !== "loading";
+}
+function GraphNode(_a) {
+  var _b = _a, { id, data } = _b, props = __objRest(_b, ["id", "data"]);
+  var _a2, _b2;
+  const { nodes: originalNodes, edges: originalEdges } = useGraphActionsContext();
+  const nodes = originalNodes;
+  const edges = originalEdges;
+  const handleClick = React.useCallback(() => {
+    var _a3;
+    (_a3 = data == null ? void 0 : data.onClick) == null ? void 0 : _a3.call(data, id, data);
+  }, [data, id]);
+  const compact = (_a2 = data == null ? void 0 : data.compact) != null ? _a2 : false;
+  const state = (_b2 = data == null ? void 0 : data.state) != null ? _b2 : "default";
+  const compactBadges = React.useMemo(() => {
+    const badges = data.badges.compact || [];
+    if (state === "paused") {
+      return [
+        { children: /* @__PURE__ */ jsx2(Icon, { name: "pause", size: "xs" }), variant: "secondary", tooltipContent: "Resource is paused" },
+        ...badges
+      ];
+    }
+    return badges;
+  }, [data.badges.compact, state]);
+  const defaultBadges = React.useMemo(() => {
+    const badges = data.badges.default || [];
+    if (state === "paused") {
+      return [
+        {
+          children: /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(Icon, { name: "pause", size: "xs", className: "mr-1" }),
+            " Paused"
+          ] }),
+          variant: "secondary",
+          tooltipContent: "Resource is paused"
+        },
+        ...badges
+      ];
+    }
+    return badges;
+  }, [data.badges.default, state]);
+  const currentNode = React.useMemo(
+    () => ({
+      id,
+      position: { x: 0, y: 0 },
+      // Position not needed for edge calculations
+      data,
+      type: props.type
+    }),
+    [id, data, props.type]
+  );
+  const _hasIncomingEdge = React.useMemo(() => {
+    return getIncomers(currentNode, nodes, edges).length > 0;
+  }, [currentNode, nodes, edges]);
+  const hasOutgoingEdge = React.useMemo(() => {
+    return getOutgoers(currentNode, nodes, edges).length > 0;
+  }, [currentNode, nodes, edges]);
+  const targetX = GRAPH_NODE_WIDTH / 2 - 4;
+  const sourceX = 4;
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className: cn(
+        "relative gap-1.5 overflow-visible rounded-lg py-0",
+        `flex h-[106px]! w-[260px]! flex-col pt-2.5! pb-0!`,
+        `hover:shadow-md motion-safe:transition-shadow`,
+        compact && `h-[47px]!`
+      ),
+      style: { height: compact ? GRAPH_NODE_COLLAPSED_HEIGHT : GRAPH_NODE_HEIGHT, width: GRAPH_NODE_WIDTH },
+      children: [
+        /* @__PURE__ */ jsx2(
+          Handle,
+          {
+            type: "target",
+            position: Position2.Left,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-1 cursor-pointer flex-col", onClick: handleClick, children: [
+          /* @__PURE__ */ jsxs2("div", { className: cn("flex w-full justify-between gap-1 px-2.5", compact && "flex-row-reverse items-start"), children: [
+            !!compact && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              compactBadges.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 flex-row items-center gap-1.5 overflow-hidden", children: compactBadges.map((_c, index) => {
+                var _d = _c, { tooltipContent, variant } = _d, badge = __objRest(_d, ["tooltipContent", "variant"]);
+                return /* @__PURE__ */ jsxs2(Tooltip, { children: [
+                  /* @__PURE__ */ jsx2(TooltipTrigger, { children: /* @__PURE__ */ jsx2(
+                    Badge,
+                    __spreadProps(__spreadValues({
+                      variant
+                    }, badge), {
+                      className: "flex size-[20px]! cursor-default! items-center justify-center p-0!",
+                      children: badge.children
+                    })
+                  ) }),
+                  tooltipContent && /* @__PURE__ */ jsx2(TooltipContent, { children: tooltipContent })
+                ] }, index);
+              }) }),
+              state === "progressing" && /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 flex-row items-center gap-1.5 overflow-hidden", children: /* @__PURE__ */ jsx2("div", { className: "flex size-[20px]! items-center justify-center", children: /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) }) })
+            ] }),
+            /* @__PURE__ */ jsxs2("div", { className: "mr-auto grow-0 overflow-hidden", children: [
+              /* @__PURE__ */ jsx2("h5", { className: "text-body-sm/tight truncate font-bold", children: data.title }),
+              /* @__PURE__ */ jsx2("p", { className: "text-body-sm truncate leading-none", children: data.subtitle }),
+              !compact && /* @__PURE__ */ jsx2("p", { className: "text-body-sm text-muted-foreground mt-1 truncate", children: data.name })
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: cn(
+                  "bg-foreground text-background inline-flex h-[26px] w-auto shrink-0 items-center justify-center rounded-md px-[7px] text-[10px] font-semibold",
+                  ["progressing", "paused"].includes(state) && "opacity-30",
+                  data.typeDescriptors.className
+                ),
+                children: data.typeDescriptors.default
+              }
+            )
+          ] }),
+          !compact && /* @__PURE__ */ jsx2(Fragment, { children: (defaultBadges.length > 0 || state === "progressing") && /* @__PURE__ */ jsxs2("div", { className: "mt-auto flex h-8 items-center border-t px-2.5", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex gap-1.5 overflow-hidden overflow-x-auto", children: defaultBadges.map((_e, index) => {
+              var _f = _e, { tooltipContent, variant } = _f, badge = __objRest(_f, ["tooltipContent", "variant"]);
+              return /* @__PURE__ */ jsxs2(Tooltip, { children: [
+                /* @__PURE__ */ jsx2(TooltipTrigger, { children: /* @__PURE__ */ jsx2(Badge, __spreadProps(__spreadValues({ variant }, badge), { className: "cursor-default! py-px! whitespace-nowrap", children: badge.children })) }),
+                tooltipContent && /* @__PURE__ */ jsx2(TooltipContent, { children: tooltipContent })
+              ] }, index);
+            }) }),
+            state === "progressing" && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex size-[20px]! items-center justify-center", children: /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) })
+          ] }) })
+        ] }),
+        !!hasOutgoingEdge && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "absolute top-0 right-0 h-full w-auto translate-x-full",
+            style: {
+              width: GRAPH_RANK_SEP
+            },
+            children: [
+              /* @__PURE__ */ jsx2("svg", { height: 20, width: GRAPH_NODE_SEP, className: "absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx2(
+                GraphEdge,
+                {
+                  id: `${id}-expadable`,
+                  sourceX,
+                  sourceY: 10,
+                  targetX,
+                  targetY: 10,
+                  sourcePosition: Position2.Right,
+                  targetPosition: Position2.Left,
+                  source: id,
+                  target: id,
+                  stopOpacity: 0
+                }
+              ) }),
+              /* @__PURE__ */ jsxs2(Tooltip, { children: [
+                /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": data.expanded ? "Collapse" : "Expand",
+                    className: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-ring/30 absolute top-[calc(50%)] left-[calc(50%)] inline-flex size-4 -translate-1/2 items-center justify-center rounded-full p-0 text-center text-[10px] leading-none duration-150 outline-none focus-visible:ring-2 motion-safe:transition-colors",
+                    onClick: (e) => {
+                      var _a3;
+                      e.stopPropagation();
+                      (_a3 = data.onExpandToggle) == null ? void 0 : _a3.call(data, id);
+                    },
+                    children: /* @__PURE__ */ jsx2(Icon, { name: data.expanded ? "minus" : "plus", size: "xs" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx2(TooltipContent, { children: data.expanded ? "Collapse" : "Expand" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Handle,
+          {
+            type: "source",
+            position: Position2.Right,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+}
+function GraphNodeSkeleton(_props) {
+  const compact = false;
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      className: cn(
+        `flex h-[106px]! w-[260px]! flex-col gap-1.5 rounded-lg px-0 py-0 pt-2.5! pb-0! hover:shadow-md motion-safe:transition-shadow`,
+        compact && `h-[47px]!`
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(
+          Handle,
+          {
+            type: "target",
+            position: Position2.Left,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: cn("flex w-full gap-1 px-2.5", compact && "flex-row-reverse"), children: [
+          /* @__PURE__ */ jsxs2("div", { className: cn("grow-0 overflow-hidden", compact && "mr-auto"), children: [
+            /* @__PURE__ */ jsx2("div", { className: "bg-muted mb-1 h-3 w-16 animate-pulse rounded-sm" }),
+            /* @__PURE__ */ jsx2("div", { className: "bg-muted h-3 w-40 animate-pulse rounded-sm" }),
+            !compact && /* @__PURE__ */ jsx2("div", { className: "bg-muted mt-2 h-3 w-48 animate-pulse rounded-sm" })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: cn("bg-muted size-[26px] shrink-0 animate-pulse rounded-md", !compact && "ml-auto") })
+        ] }),
+        !compact && /* @__PURE__ */ jsx2("div", { className: "mt-auto flex h-8 items-center border-t px-2.5", children: /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5 overflow-hidden overflow-x-auto", children: [
+          /* @__PURE__ */ jsx2("div", { className: "bg-muted h-4 w-12 animate-pulse rounded-sm" }),
+          /* @__PURE__ */ jsx2("div", { className: "bg-muted h-4 w-12 animate-pulse rounded-sm" })
+        ] }) }),
+        /* @__PURE__ */ jsx2(
+          Handle,
+          {
+            type: "source",
+            position: Position2.Right,
+            style: {
+              visibility: "hidden",
+              width: 0
+            },
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/graph/hooks/useGraphActions.ts
+var useGraphActions = (initialNodes = [], initialEdges = []) => {
+  const [nodes, setNodes] = useState(initialNodes);
+  const [edges, setEdges] = useState(initialEdges);
+  const addNodes = useCallback2((newNodes) => {
+    setNodes((prevNodes) => {
+      const existingIds = new Set(prevNodes.map((node) => node.id));
+      const uniqueNewNodes = newNodes.filter((node) => !existingIds.has(node.id));
+      return [...prevNodes, ...uniqueNewNodes];
+    });
+  }, []);
+  const addEdges = useCallback2((newEdges) => {
+    setEdges((prevEdges) => {
+      const existingIds = new Set(prevEdges.map((edge) => edge.id));
+      const uniqueNewEdges = newEdges.filter((edge) => !existingIds.has(edge.id));
+      return [...prevEdges, ...uniqueNewEdges];
+    });
+  }, []);
+  const removeNodes = useCallback2((nodeIds) => {
+    const nodeIdSet = new Set(nodeIds);
+    setNodes((prevNodes) => prevNodes.filter((node) => !nodeIdSet.has(node.id)));
+    setEdges((prevEdges) => prevEdges.filter((edge) => !nodeIdSet.has(edge.source) && !nodeIdSet.has(edge.target)));
+  }, []);
+  const removeEdges = useCallback2((edgeIds) => {
+    const edgeIdSet = new Set(edgeIds);
+    setEdges((prevEdges) => prevEdges.filter((edge) => !edgeIdSet.has(edge.id)));
+  }, []);
+  const resetGraph = useCallback2(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges]);
+  const updateNode = useCallback2((nodeId, node) => {
+    setNodes((prevNodes) => prevNodes.map((n) => n.id === nodeId ? node : n));
+  }, []);
+  const toggleNodeExpansion = useCallback2((nodeId) => {
+    setNodes(
+      (prevNodes) => prevNodes.map((node) => {
+        if (node.id === nodeId && isDefaultNode(node)) {
+          return __spreadProps(__spreadValues({}, node), {
+            data: __spreadProps(__spreadValues({}, node.data), {
+              expanded: !node.data.expanded
+            })
+          });
+        }
+        return node;
+      })
+    );
+  }, []);
+  return {
+    nodes,
+    edges,
+    addNodes,
+    addEdges,
+    removeNodes,
+    removeEdges,
+    setNodes,
+    setEdges,
+    resetGraph,
+    updateNode,
+    toggleNodeExpansion
+  };
+};
+
+// src/graph/graph-actions-provider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GraphActionsProvider = React2.forwardRef(
+  ({ initialNodes = [], initialEdges = [], children }, ref) => {
+    const graphActions = useGraphActions(initialNodes, initialEdges);
+    React2.useImperativeHandle(
+      ref,
+      () => ({
+        addNodes: graphActions.addNodes,
+        addEdges: graphActions.addEdges,
+        setNodes: graphActions.setNodes,
+        setEdges: graphActions.setEdges,
+        toggleNodeExpansion: graphActions.toggleNodeExpansion,
+        updateNode: graphActions.updateNode,
+        reset: graphActions.resetGraph
+      }),
+      [graphActions]
+    );
+    return /* @__PURE__ */ jsx3(GraphActionsContext.Provider, { value: graphActions, children });
+  }
+);
+GraphActionsProvider.displayName = "GraphActionsProvider";
+
+// src/graph/graph.tsx
+import * as React6 from "react";
+import {
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { Icon as Icon4, InputGroup, InputGroupAddon, InputGroupInput } from "@upbound/monarch-core";
+
+// src/lib/data-table/contextual-filters.ts
+function getColumnFilterCount(filterValue, filter) {
+  const isCheckboxValue = (value) => value === void 0 || Array.isArray(value) && value.every((item) => typeof item === "string");
+  const isRadioValue = (value) => value === void 0 || typeof value === "string";
+  const isDateRangeValue = (value) => value === void 0 || typeof value === "object" && value !== null && "startDate" in value && "endDate" in value;
+  if ((filter == null ? void 0 : filter.type) === "checkbox") {
+    return isCheckboxValue(filterValue) ? (filterValue || []).length : 0;
+  }
+  if ((filter == null ? void 0 : filter.type) === "radio") {
+    return isRadioValue(filterValue) && filterValue !== void 0 ? 1 : 0;
+  }
+  if ((filter == null ? void 0 : filter.type) === "dateRange") {
+    if (!isDateRangeValue(filterValue)) return 0;
+    return Number(!!(filterValue == null ? void 0 : filterValue.startDate)) + Number(!!(filterValue == null ? void 0 : filterValue.endDate));
+  }
+  if (isCheckboxValue(filterValue)) {
+    return (filterValue || []).length;
+  }
+  if (isRadioValue(filterValue) && filterValue !== void 0) {
+    return 1;
+  }
+  if (isDateRangeValue(filterValue)) {
+    return Number(!!(filterValue == null ? void 0 : filterValue.startDate)) + Number(!!(filterValue == null ? void 0 : filterValue.endDate));
+  }
+  return 0;
+}
+
+// src/lib/data-table/utils.ts
+function isFilterOnlyColumn(column) {
+  var _a;
+  return ((_a = column.columnDef.meta) == null ? void 0 : _a.filterOnly) === true;
+}
+function hasFilterableColumns(columns) {
+  return columns.some(
+    (column) => {
+      var _a;
+      return !isFilterOnlyColumn(column) && column.getCanFilter() && !!((_a = column.columnDef.meta) == null ? void 0 : _a.filter);
+    }
+  );
+}
+function getTableState({
+  error,
+  loading,
+  rowCount
+}) {
+  if (error) return "error";
+  if (loading) return "loading";
+  return rowCount === 0 ? "empty" : "success";
+}
+
+// src/data-table/empty-view.tsx
+import { Alert, AlertDescription } from "@upbound/monarch-core";
+import { Button } from "@upbound/monarch-core";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@upbound/monarch-core";
+import { Icon as Icon2 } from "@upbound/monarch-core";
+import { IconTile } from "@upbound/monarch-core";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultErrorConfig = {
+  icon: "circle-exclamation",
+  header: "Something went wrong",
+  subheader: "We couldn't load this data. Try again in a moment."
+};
+var defaultEmptyConfig = {
+  icon: "inbox",
+  header: "No results",
+  subheader: "There's nothing here yet."
+};
+var defaultNoFilterFoundConfig = {
+  icon: "magnifying-glass",
+  header: "No matching results",
+  subheader: "Try adjusting your search or filters."
+};
+function DataTableEmptyView({
+  emptyView,
+  tableState,
+  filterCount,
+  resetFilters,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const isFilteredEmpty = tableState === "empty" && filterCount > 0;
+  const config = tableState === "error" ? (_a = emptyView == null ? void 0 : emptyView.error) != null ? _a : defaultErrorConfig : tableState === "empty" ? isFilteredEmpty ? (_b = emptyView == null ? void 0 : emptyView.filter) != null ? _b : defaultNoFilterFoundConfig : (_c = emptyView == null ? void 0 : emptyView.empty) != null ? _c : defaultEmptyConfig : null;
+  const wrapperClassName = tableState === "error" ? (_f = (_d = emptyView == null ? void 0 : emptyView.error) == null ? void 0 : _d.wrapperClassName) != null ? _f : (_e = emptyView == null ? void 0 : emptyView.empty) == null ? void 0 : _e.wrapperClassName : config == null ? void 0 : config.wrapperClassName;
+  const defaultAction = isFilteredEmpty && !(config == null ? void 0 : config.action) ? /* @__PURE__ */ jsxs3(Button, { variant: "outline", size: "sm", onClick: resetFilters, children: [
+    /* @__PURE__ */ jsx4(Icon2, { name: "xmark" }),
+    "Clear filters"
+  ] }) : null;
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex size-full flex-col justify-center p-6", wrapperClassName, className), children: config && // The error state ignores its own config's `className` for outer
+  // padding, matching the source's forced `pt-0` on that branch.
+  /* @__PURE__ */ jsxs3(Empty, { className: tableState === "error" ? "pt-0" : config.className, children: [
+    /* @__PURE__ */ jsxs3(EmptyHeader, { children: [
+      config.icon && /* @__PURE__ */ jsx4(EmptyMedia, { children: /* @__PURE__ */ jsx4(IconTile, { variant: "branded", children: /* @__PURE__ */ jsx4(Icon2, { name: config.icon }) }) }),
+      config.header && /* @__PURE__ */ jsx4(EmptyTitle, { children: config.header }),
+      config.subheader && /* @__PURE__ */ jsx4(EmptyDescription, { children: config.subheader })
+    ] }),
+    (config.details || config.action || defaultAction) && /* @__PURE__ */ jsxs3(EmptyContent, { children: [
+      config.details && /* @__PURE__ */ jsx4(Alert, { children: /* @__PURE__ */ jsx4(AlertDescription, { children: config.details }) }),
+      (_g = config.action) != null ? _g : defaultAction
+    ] })
+  ] }) });
+}
+
+// src/data-table/view-filter.tsx
+import * as React4 from "react";
+
+// src/filter-bar/filter-bar.tsx
+import * as React3 from "react";
+import { Icon as Icon3 } from "@upbound/monarch-core";
+import { Badge as Badge2 } from "@upbound/monarch-core";
+import { Button as Button2 } from "@upbound/monarch-core";
+import { ButtonGroup, ButtonGroupText } from "@upbound/monarch-core";
+import { Calendar } from "@upbound/monarch-core";
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxClearAll,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSelectedChips,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue
+} from "@upbound/monarch-core";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from "@upbound/monarch-core";
+import { Input } from "@upbound/monarch-core";
+import { Label } from "@upbound/monarch-core";
+import { Popover, PopoverContent, PopoverTrigger } from "@upbound/monarch-core";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function asCheckboxValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asRadioValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asTextValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asMultiTextValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asDateValue(value) {
+  if (value && typeof value === "object" && !Array.isArray(value)) return value;
+  return { startDate: null, endDate: null };
+}
+function hasExplicitTime(date) {
+  if (!date) return false;
+  return date.getHours() !== 0 || date.getMinutes() !== 0;
+}
+function formatTimeForInput(date) {
+  if (!date) return "";
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+function applyTimeToDate(date, time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  const next = new Date(date);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+}
+function formatDateLabel(date) {
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function hasOrder(filter) {
+  return typeof filter.order === "number";
+}
+function FilterBar(_a) {
+  var _b = _a, {
+    filters,
+    activeFilters,
+    onAddFilter,
+    onRemoveFilter,
+    onChangeFilter,
+    className,
+    children,
+    ref
+  } = _b, props = __objRest(_b, [
+    "filters",
+    "activeFilters",
+    "onAddFilter",
+    "onRemoveFilter",
+    "onChangeFilter",
+    "className",
+    "children",
+    "ref"
+  ]);
+  const usedKeys = new Set(activeFilters.map((f) => f.key));
+  const remainingFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const availableFilters = filters.some(hasOrder) ? remainingFilters : sortBy(remainingFilters, (f) => f.label);
+  const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
+  const [pendingOpenKey, setPendingOpenKey] = React3.useState(null);
+  function handleAddFilter(key) {
+    onAddFilter(key);
+    setPendingOpenKey(key);
+  }
+  const containerRef = React3.useRef(null);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "filter-bar",
+      "data-visible-filters": shouldShowFilters,
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ref: composeRefs(containerRef, ref)
+    }, props), {
+      children: [
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs4(
+          Combobox,
+          {
+            items: availableFilters,
+            itemToStringValue: (item) => item.label,
+            itemToStringLabel: (item) => item.label,
+            onValueChange: (filter) => {
+              if (filter) handleAddFilter(filter.key);
+            },
+            children: [
+              /* @__PURE__ */ jsxs4(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx5(Button2, { variant: "outline" }), children: [
+                /* @__PURE__ */ jsx5(Icon3, { name: "plus", "data-icon": "inline-start" }),
+                "Add filter"
+              ] }),
+              /* @__PURE__ */ jsxs4(ComboboxContent, { container: containerRef, align: "start", className: "w-48", children: [
+                /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
+                /* @__PURE__ */ jsx5(ComboboxEmpty, { children: "No filters found." }),
+                /* @__PURE__ */ jsx5(ComboboxList, { children: (filter) => /* @__PURE__ */ jsx5(ComboboxItem, { value: filter, children: filter.label }, filter.key) })
+              ] })
+            ]
+          }
+        ),
+        activeFilters.map((active) => {
+          const definition = filters.find((f) => f.key === active.key);
+          if (!definition) return null;
+          return /* @__PURE__ */ jsx5(
+            FilterChip,
+            {
+              definition,
+              value: active.value,
+              autoOpen: active.key === pendingOpenKey,
+              container: containerRef,
+              onChangeValue: (value) => onChangeFilter(active.key, value),
+              onRemove: () => onRemoveFilter(active.key)
+            },
+            active.key
+          );
+        }),
+        children
+      ]
+    })
+  );
+}
+function FilterChip({ definition, value, autoOpen, container, onChangeValue, onRemove }) {
+  var _a;
+  const type = (_a = definition.type) != null ? _a : "checkbox";
+  switch (type) {
+    case "checkbox":
+      return /* @__PURE__ */ jsx5(
+        CheckboxFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          container,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx5(
+        RadioFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          container,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx5(
+        TextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "multiText":
+      return /* @__PURE__ */ jsx5(
+        MultiTextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx5(
+        DateFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+  }
+}
+function FilterChipRemoveButton({ label, onRemove }) {
+  return /* @__PURE__ */ jsx5(Button2, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) });
+}
+function CheckboxFilterChip({
+  definition,
+  value,
+  autoOpen,
+  container,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
+  const values = asCheckboxValue(value);
+  const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
+  function toggle(optionValue) {
+    const next = values.includes(optionValue) ? values.filter((v) => v !== optionValue) : [...values, optionValue];
+    onChangeValue(next);
+  }
+  return /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ButtonGroupText, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs4(
+      Combobox,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        multiple: true,
+        defaultOpen: autoOpen,
+        value: options.filter((o) => values.includes(o.value)),
+        onValueChange: (selected) => onChangeValue(selected.map((s) => s.value)),
+        children: [
+          /* @__PURE__ */ jsx5(
+            ComboboxTrigger,
+            {
+              render: /* @__PURE__ */ jsx5(Button2, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx5("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            ComboboxContent,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                values.length > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4(ComboboxSelectedChips, { children: [
+                    /* @__PURE__ */ jsx5(ComboboxValue, { children: (selected) => /* @__PURE__ */ jsx5(Fragment2, { children: selected.map((item) => /* @__PURE__ */ jsx5(ComboboxChip, { children: item.label }, item.value)) }) }),
+                    /* @__PURE__ */ jsx5(ComboboxClearAll, { onClick: () => onChangeValue([]) })
+                  ] }),
+                  /* @__PURE__ */ jsx5(ComboboxSeparator, {})
+                ] }),
+                /* @__PURE__ */ jsxs4(ComboboxEmpty, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx5(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs4(ComboboxItem, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs4(DropdownMenu, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button2, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx5("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
+        /* @__PURE__ */ jsx5(Icon3, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx5(DropdownMenuContent, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs4(
+        DropdownMenuCheckboxItem,
+        {
+          checked: values.includes(opt.value),
+          onCheckedChange: () => toggle(opt.value),
+          children: [
+            opt.icon,
+            opt.label
+          ]
+        },
+        opt.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx5(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function RadioFilterChip({
+  definition,
+  value,
+  autoOpen,
+  container,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b, _c;
+  const { label, searchable = false } = definition;
+  const options = sortBy(definition.options, (o) => o.label);
+  const selectedValue = asRadioValue(value);
+  const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
+  const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
+  return /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ButtonGroupText, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs4(
+      Combobox,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        defaultOpen: autoOpen,
+        value: selected,
+        onValueChange: (next) => {
+          var _a2;
+          return onChangeValue((_a2 = next == null ? void 0 : next.value) != null ? _a2 : "");
+        },
+        children: [
+          /* @__PURE__ */ jsx5(
+            ComboboxTrigger,
+            {
+              render: /* @__PURE__ */ jsx5(Button2, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx5("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            ComboboxContent,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                /* @__PURE__ */ jsxs4(ComboboxEmpty, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx5(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs4(ComboboxItem, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs4(DropdownMenu, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button2, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx5("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
+        /* @__PURE__ */ jsx5(Icon3, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx5(DropdownMenuContent, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx5(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs4(DropdownMenuRadioItem, { value: opt.value, children: [
+        opt.icon,
+        opt.label
+      ] }, opt.value)) }) })
+    ] }),
+    /* @__PURE__ */ jsx5(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function TextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const text = asTextValue(value);
+  const [open, setOpen] = React3.useState(!!autoOpen);
+  return /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button2, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx5("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
+      /* @__PURE__ */ jsx5(PopoverContent, { align: "start", children: /* @__PURE__ */ jsx5(
+        Input,
+        {
+          autoFocus: true,
+          value: text,
+          placeholder: placeholder != null ? placeholder : "Enter a value\u2026",
+          onChange: (e) => onChangeValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") setOpen(false);
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx5(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function MultiTextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const tokens = asMultiTextValue(value);
+  const [draft, setDraft] = React3.useState("");
+  const displayLabel = tokens.length === 0 ? "Any" : tokens.length === 1 ? tokens[0] : `${tokens.length} values`;
+  function addToken() {
+    const token = draft.trim();
+    if (!token || tokens.includes(token)) {
+      setDraft("");
+      return;
+    }
+    onChangeValue([...tokens, token]);
+    setDraft("");
+  }
+  function removeToken(token) {
+    onChangeValue(tokens.filter((t) => t !== token));
+  }
+  return /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs4(Popover, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button2, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx5("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx5(PopoverContent, { align: "start", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+        tokens.length > 0 && /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs4(Badge2, { variant: "secondary", className: "gap-1", children: [
+          token,
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${token}`,
+              onClick: () => removeToken(token),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark", size: "xs" })
+            }
+          )
+        ] }, token)) }),
+        /* @__PURE__ */ jsx5(
+          Input,
+          {
+            autoFocus: true,
+            value: draft,
+            placeholder: placeholder != null ? placeholder : "Type a value, press Enter\u2026",
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addToken();
+              } else if (e.key === "Backspace" && draft === "" && tokens.length > 0) {
+                removeToken(tokens[tokens.length - 1]);
+              }
+            }
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx5(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function DateFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, includeTime } = definition;
+  const { startDate, endDate } = asDateValue(value);
+  const showTimeInputs = includeTime != null ? includeTime : hasExplicitTime(startDate) || hasExplicitTime(endDate);
+  const displayLabel = !startDate ? "Any" : !endDate || startDate.getTime() === endDate.getTime() ? formatDateLabel(startDate) : `${formatDateLabel(startDate)} \u2013 ${formatDateLabel(endDate)}`;
+  function pickRange(range) {
+    var _a;
+    if (!(range == null ? void 0 : range.from)) {
+      onChangeValue({ startDate: null, endDate: null });
+      return;
+    }
+    onChangeValue({ startDate: range.from, endDate: (_a = range.to) != null ? _a : range.from });
+  }
+  function pickStartTime(time) {
+    if (!startDate) return;
+    onChangeValue({ startDate: applyTimeToDate(startDate, time), endDate });
+  }
+  function pickEndTime(time) {
+    if (!endDate) return;
+    onChangeValue({ startDate, endDate: applyTimeToDate(endDate, time) });
+  }
+  return /* @__PURE__ */ jsxs4(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs4(Popover, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(Button2, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx5("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx5(PopoverContent, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx5(
+          Calendar,
+          {
+            mode: "range",
+            selected: { from: startDate != null ? startDate : void 0, to: endDate != null ? endDate : void 0 },
+            onSelect: pickRange
+          }
+        ),
+        showTimeInputs && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx5(
+              Label,
+              {
+                htmlFor: `${definition.key}-start-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "Start"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              Input,
+              {
+                id: `${definition.key}-start-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(startDate),
+                onChange: (e) => pickStartTime(e.target.value),
+                disabled: !startDate
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx5(
+              Label,
+              {
+                htmlFor: `${definition.key}-end-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "End"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              Input,
+              {
+                id: `${definition.key}-end-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(endDate),
+                onChange: (e) => pickEndTime(e.target.value),
+                disabled: !endDate
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx5(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+
+// src/lib/data-table/filter-types.ts
+var isDateRangeColumnFilter = (definition) => definition.type === "dateRange";
+var isRadioColumnFilter = (definition) => definition.type === "radio";
+var isCheckboxColumnFilter = (definition) => definition.type === "checkbox";
+var isMultiTextColumnFilter = (definition) => definition.type === "multiText";
+
+// src/data-table/view-filter.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function toFilterOption(opt) {
+  return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
+}
+function toFilterBarDefinition(key, filter) {
+  var _a, _b;
+  const base = { key, label: filter.title, order: filter.order };
+  if (isCheckboxColumnFilter(filter)) {
+    const options = "options" in filter && filter.options ? filter.options : [];
+    return __spreadProps(__spreadValues({}, base), {
+      type: "checkbox",
+      options: options.map(toFilterOption),
+      searchable: (_a = filter.searchable) != null ? _a : true
+    });
+  }
+  if (isRadioColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), {
+      type: "radio",
+      options: filter.options.map(toFilterOption),
+      searchable: (_b = filter.searchable) != null ? _b : true
+    });
+  }
+  if (isDateRangeColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), { type: "date", includeTime: filter.includeTime });
+  }
+  if (isMultiTextColumnFilter(filter)) {
+    return __spreadProps(__spreadValues({}, base), { type: "multiText", placeholder: filter.placeholder });
+  }
+  return __spreadProps(__spreadValues({}, base), { type: "text", placeholder: filter.placeholder });
+}
+function emptyValueFor(filter) {
+  if (isCheckboxColumnFilter(filter)) return [];
+  if (isRadioColumnFilter(filter)) return void 0;
+  if (isDateRangeColumnFilter(filter)) return { startDate: null, endDate: null };
+  if (isMultiTextColumnFilter(filter)) return [];
+  return void 0;
+}
+function ViewFilter({
+  columns,
+  columnFilters,
+  onColumnFiltersChange,
+  className
+}) {
+  const filterableColumns = React4.useMemo(
+    () => columns.filter((column) => !isFilterOnlyColumn(column) && column.getCanFilter()).flatMap((column) => {
+      var _a;
+      const filter = (_a = column.columnDef.meta) == null ? void 0 : _a.filter;
+      return filter ? [{ key: column.id, filter }] : [];
+    }),
+    [columns]
+  );
+  const filterDefinitions = React4.useMemo(
+    () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => {
+      if (a.order == null && b.order == null) return 0;
+      if (a.order == null) return 1;
+      if (b.order == null) return -1;
+      return a.order - b.order;
+    }),
+    [filterableColumns]
+  );
+  const emptyValueByKey = React4.useMemo(
+    () => new Map(filterableColumns.map(({ key, filter }) => [key, emptyValueFor(filter)])),
+    [filterableColumns]
+  );
+  const activeFilters = React4.useMemo(
+    () => columnFilters.map((filter) => ({ key: filter.id, value: filter.value })),
+    [columnFilters]
+  );
+  return /* @__PURE__ */ jsx6(
+    FilterBar,
+    {
+      className,
+      filters: filterDefinitions,
+      activeFilters,
+      onAddFilter: (key) => onColumnFiltersChange((prev) => [...prev.filter((f) => f.id !== key), { id: key, value: emptyValueByKey.get(key) }]),
+      onRemoveFilter: (key) => onColumnFiltersChange((prev) => prev.filter((f) => f.id !== key)),
+      onChangeFilter: (key, value) => onColumnFiltersChange((prev) => [...prev.filter((f) => f.id !== key), { id: key, value }])
+    }
+  );
+}
+
+// src/section-header.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function SectionHeader(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "section-header",
+      className: cn("flex w-full items-start justify-between gap-4", className)
+    }, props), {
+      children
+    })
+  );
+}
+function SectionHeaderContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
+}
+function SectionHeaderTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
+}
+
+// src/graph/graph-view.tsx
+import * as React5 from "react";
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "reactflow";
+
+// src/graph/hooks/useAutoLayout.ts
+import { useMemo as useMemo3 } from "react";
+import { Position as Position3 } from "reactflow";
+var TILE_HORIZONTAL_DISTANCE = GRAPH_RANK_SEP;
+var TILE_VERTICAL_DISTANCE = GRAPH_NODE_SEP;
+var TILE_HEIGHT = GRAPH_NODE_HEIGHT;
+var TILE_WIDTH = GRAPH_NODE_WIDTH;
+var getNodeDepth = (nodeId, edges, visited = /* @__PURE__ */ new Set(), maxDepth = 100) => {
+  if (visited.has(nodeId)) {
+    console.warn(`Cycle detected in graph at node: ${nodeId}. Returning depth 0 to prevent infinite recursion.`);
+    return 0;
+  }
+  if (visited.size >= maxDepth) {
+    console.warn(`Maximum depth limit (${maxDepth}) reached for node: ${nodeId}.`);
+    return visited.size;
+  }
+  const parentEdge = edges.find((edge) => edge.target === nodeId);
+  if (!parentEdge) {
+    return 0;
+  }
+  const newVisited = /* @__PURE__ */ new Set([...visited, nodeId]);
+  return 1 + getNodeDepth(parentEdge.source, edges, newVisited, maxDepth);
+};
+var flatNodeTree = (nodeTree) => {
+  const { node, children } = nodeTree;
+  if (!children) {
+    return [node];
+  }
+  return [node, ...children.flatMap(flatNodeTree)];
+};
+var getChildren = (nodeId, nodes, edges) => {
+  const nodeEdges = edges.filter((edge) => edge.source === nodeId);
+  return nodeEdges.map((edge) => nodes.find((node) => node.id === edge.target)).filter((node) => node !== void 0).map((node) => ({
+    node,
+    children: getChildren(node.id, nodes, edges)
+  }));
+};
+var getTrees = (nodes, edges) => nodes.filter((node) => !edges.some((edge) => edge.target === node.id)).map((node) => ({
+  node,
+  children: getChildren(node.id, nodes, edges)
+}));
+var getLowestPositionYInSubtree = (nodeTree) => {
+  const { node, children } = nodeTree;
+  const lowestY = node.position.y;
+  if (!(children == null ? void 0 : children.length)) {
+    return lowestY;
+  }
+  const visibleChildren = children.filter(({ node: { hidden } }) => !hidden);
+  if (visibleChildren.length === 0) {
+    return lowestY;
+  }
+  const childLowestYPositions = visibleChildren.map((child) => getLowestPositionYInSubtree(child));
+  const lowestChildY = Math.max(...childLowestYPositions);
+  return Math.max(lowestY, lowestChildY);
+};
+var positionNodes = (treeNodes, rootFlattenTree, allEdges, parentY) => {
+  const flattenTree = rootFlattenTree || treeNodes.flatMap(flatNodeTree);
+  return treeNodes.reduce((actualTreeNodes, nodeTree, treeNodeIndex) => {
+    const { node, children } = nodeTree;
+    const depth = allEdges ? getNodeDepth(node.id, allEdges) : 0;
+    const getPositionY = () => {
+      if (treeNodeIndex > 0) {
+        const previousSibling = actualTreeNodes[treeNodeIndex - 1];
+        const lowestYInPreviousSubtree = getLowestPositionYInSubtree(previousSibling);
+        return lowestYInPreviousSubtree + TILE_HEIGHT + TILE_VERTICAL_DISTANCE;
+      }
+      if (parentY !== void 0) {
+        return parentY;
+      }
+      return (TILE_HEIGHT + TILE_VERTICAL_DISTANCE) * treeNodeIndex;
+    };
+    const position = {
+      x: depth * (TILE_WIDTH + TILE_HORIZONTAL_DISTANCE),
+      y: getPositionY()
+    };
+    const positionedNode = __spreadProps(__spreadValues({}, node), {
+      targetPosition: Position3.Left,
+      sourcePosition: Position3.Right,
+      position
+    });
+    if (!(children == null ? void 0 : children.length)) {
+      return [
+        ...actualTreeNodes,
+        __spreadProps(__spreadValues({}, nodeTree), {
+          node: positionedNode
+        })
+      ];
+    }
+    const nodeWithChildren = __spreadProps(__spreadValues({}, nodeTree), {
+      node: positionedNode,
+      children: positionNodes(
+        children.sort((a, b) => {
+          return a.node.id.localeCompare(b.node.id);
+        }),
+        flattenTree,
+        allEdges,
+        position.y
+        // Pass parent's Y position to children
+      )
+    });
+    return [...actualTreeNodes, nodeWithChildren];
+  }, []);
+};
+var getLaidOutElements = (nodes, edges) => {
+  const nodeTrees = getTrees(nodes, edges);
+  const positionedNodes = positionNodes(nodeTrees, void 0, edges).flatMap(flatNodeTree);
+  return { nodes: positionedNodes, edges };
+};
+var useAutoLayout = (nodes, edges, { viewportFocusNodeId }) => {
+  const laidOutElements = useMemo3(() => {
+    if (nodes.length === 0) {
+      return { nodes, edges, nodeMap: /* @__PURE__ */ new Map() };
+    }
+    const visibleNodes = nodes.filter((node) => !node.hidden);
+    const visibleNodeIds = new Set(visibleNodes.map((node) => node.id));
+    const visibleEdges = edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target));
+    const { nodes: laidOutNodes, edges: laidOutEdges } = getLaidOutElements(visibleNodes, visibleEdges);
+    const laidOutNodeMap = new Map(laidOutNodes.map((node) => [node.id, node]));
+    if (viewportFocusNodeId) {
+      const highlightedNode = laidOutNodeMap.get(viewportFocusNodeId);
+      if (highlightedNode) {
+        laidOutNodeMap.set(viewportFocusNodeId, __spreadProps(__spreadValues({}, highlightedNode), {
+          data: __spreadProps(__spreadValues({}, highlightedNode.data), { isHighlighted: true })
+        }));
+      }
+    }
+    const finalNodes = nodes.filter((node) => !node.hidden).map((node) => laidOutNodeMap.get(node.id) || node);
+    return {
+      nodes: finalNodes,
+      edges: laidOutEdges,
+      nodeMap: laidOutNodeMap
+    };
+  }, [nodes, edges, viewportFocusNodeId]);
+  return laidOutElements;
+};
+
+// src/graph/hooks/useNodeVisibility.ts
+import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
+var useNodeVisibility = (nodes, edges) => {
+  const hasRealChildren = useCallback3(
+    (nodeId) => {
+      const childEdges = edges.filter((edge) => edge.source === nodeId);
+      const childNodes = childEdges.map((edge) => nodes.find((node) => node.id === edge.target)).filter(Boolean);
+      return childNodes.some((child) => child && child.type !== "loading");
+    },
+    [nodes, edges]
+  );
+  const areAllAncestorsExpanded = useCallback3(
+    (nodeId) => {
+      const parentEdges = edges.filter((edge) => edge.target === nodeId);
+      if (parentEdges.length === 0) {
+        return true;
+      }
+      for (const parentEdge of parentEdges) {
+        const parentNode = nodes.find((node) => node.id === parentEdge.source);
+        if (!parentNode) {
+          return false;
+        }
+        const isParentExpanded = isDefaultNode(parentNode) ? Boolean(parentNode.data.expanded) : true;
+        if (!isParentExpanded) {
+          return false;
+        }
+      }
+      return parentEdges.every((parentEdge) => areAllAncestorsExpanded(parentEdge.source));
+    },
+    [nodes, edges]
+  );
+  const visibleNodes = useMemo4(() => {
+    return nodes.map((node) => {
+      const shouldBeVisible = areAllAncestorsExpanded(node.id);
+      if (node.type === "loading") {
+        const loadingNode = {
+          id: node.id,
+          position: node.position,
+          type: "loading",
+          hidden: !shouldBeVisible,
+          data: node.data
+        };
+        return loadingNode;
+      }
+      if (isDefaultNode(node)) {
+        const expandedNode = {
+          id: node.id,
+          position: node.position,
+          type: node.type,
+          hidden: !shouldBeVisible,
+          data: __spreadProps(__spreadValues({}, node.data), {
+            expanded: Boolean(node.data.expanded),
+            isExpandable: hasRealChildren(node.id)
+            // onExpandToggle will be added later in GraphView
+          })
+        };
+        return expandedNode;
+      }
+      return node;
+    });
+  }, [nodes, areAllAncestorsExpanded, hasRealChildren]);
+  const visibleEdges = useMemo4(() => {
+    const visibleNodeIds = new Set(visibleNodes.filter((node) => !node.hidden).map((node) => node.id));
+    return edges.filter((edge) => visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target));
+  }, [visibleNodes, edges]);
+  return { nodes: visibleNodes, edges: visibleEdges };
+};
+
+// src/graph/graph-view.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var GraphViewInternal = ({ nodeTypes: parentNodeTypes, edgeTypes: parentEdgeTypes, children, viewportFocusNodeId }) => {
+  const { nodes, edges, toggleNodeExpansion } = useGraphActionsContext();
+  const nodeTypes = React5.useMemo(
+    () => __spreadValues({
+      default: GraphNode,
+      loading: GraphNodeSkeleton
+    }, parentNodeTypes),
+    [parentNodeTypes]
+  );
+  const edgeTypes = React5.useMemo(
+    () => __spreadValues({
+      default: GraphEdge
+    }, parentEdgeTypes),
+    [parentEdgeTypes]
+  );
+  const { nodes: visibleNodes, edges: visibleEdges } = useNodeVisibility(nodes, edges);
+  const nodesWithExpansion = React5.useMemo(() => {
+    return visibleNodes.map((node) => {
+      if (isDefaultNode(node) && !node.data.onExpandToggle) {
+        return __spreadProps(__spreadValues({}, node), {
+          data: __spreadProps(__spreadValues({}, node.data), {
+            onExpandToggle: toggleNodeExpansion
+          })
+        });
+      }
+      return node;
+    });
+  }, [visibleNodes, toggleNodeExpansion]);
+  const {
+    nodes: layoutedNodes,
+    edges: layoutedEdges,
+    nodeMap
+  } = useAutoLayout(nodesWithExpansion, visibleEdges, {
+    viewportFocusNodeId
+  });
+  useViewportFocus(nodeMap, viewportFocusNodeId);
+  return /* @__PURE__ */ jsxs5(
+    ReactFlow,
+    {
+      nodeTypes,
+      edgeTypes,
+      nodes: layoutedNodes,
+      edges: layoutedEdges,
+      nodesConnectable: false,
+      nodesDraggable: false,
+      fitView: viewportFocusNodeId ? false : true,
+      fitViewOptions: {
+        maxZoom: 1
+      },
+      proOptions: {
+        hideAttribution: true
+      },
+      panOnScroll: true,
+      selectionOnDrag: true,
+      children: [
+        /* @__PURE__ */ jsx8(Background, { className: "bg-muted text-muted" }),
+        /* @__PURE__ */ jsx8(Controls, { showInteractive: false }),
+        /* @__PURE__ */ jsx8(MiniMap, { zoomable: true, pannable: true }),
+        children
+      ]
+    }
+  );
+};
+var GraphView = React5.forwardRef(({ defaultNodes = [], defaultEdges = [], nodeTypes, edgeTypes, children, viewportFocusNodeId }, ref) => {
+  return /* @__PURE__ */ jsx8(ReactFlowProvider, { children: /* @__PURE__ */ jsx8(GraphActionsProvider, { ref, initialNodes: defaultNodes, initialEdges: defaultEdges, children: /* @__PURE__ */ jsx8(GraphViewInternal, { nodeTypes, edgeTypes, viewportFocusNodeId, children }) }) });
+});
+GraphView.displayName = "GraphView";
+function useViewportFocus(nodeMap, viewportFocusNodeId) {
+  const flow = useReactFlow();
+  React5.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 jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultGraphErrorConfig = {
+  icon: "triangle-exclamation",
+  header: "An error occurred",
+  subheader: "There was an error fetching the data for this graph. Please refresh the screen."
+};
+var defaultGraphEmptyConfig = {
+  icon: "layer-group",
+  header: "No resources found",
+  subheader: "We couldn't find any resources to display in this graph. If you need help getting started you can learn more in the Upbound Documentation."
+};
+var defaultGraphNoFilterFoundConfig = {
+  icon: "magnifying-glass",
+  header: "No results found",
+  subheader: "We couldn't find any results that match your search term or filtering criteria. Try using different keywords, checking for typos or adjusting your filters and try again."
+};
+function Graph({
+  id,
+  viewportFocusNodeId,
+  config,
+  columnDefinitions = [],
+  title,
+  emptyView,
+  showError,
+  className,
+  loading = false,
+  ActionsComponent: Actions,
+  disableSearch = false,
+  disableFilters = false,
+  searchTerm: parentGlobalFilter,
+  onSearchTermChange: parentSetGlobalFilter,
+  filters: parentColumnFilters,
+  onFiltersChange: parentSetColumnFilters,
+  children
+}) {
+  var _a, _b, _c;
+  const graphRef = React6.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React6.useState("");
+  const [innerColumnFilters, setInnerColumnFilters] = React6.useState([]);
+  const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
+  const setGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
+  React6.useEffect(() => {
+    if (parentGlobalFilter !== void 0) {
+      setInnerGlobalFilter(parentGlobalFilter);
+    }
+  }, [parentGlobalFilter]);
+  const columnFilters = parentColumnFilters != null ? parentColumnFilters : innerColumnFilters;
+  const setColumnFilters = parentSetColumnFilters != null ? parentSetColumnFilters : setInnerColumnFilters;
+  const table = useReactTable({
+    data: config.data,
+    columns: columnDefinitions,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    state: { columnFilters, globalFilter },
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    manualFiltering: false
+  });
+  const flatColumns = table.getAllFlatColumns();
+  const filteredRows = table.getFilteredRowModel().rows;
+  const filteredData = React6.useMemo(() => filteredRows.map((row) => row.original), [filteredRows]);
+  const filterCount = columnFilters.map(
+    ({ id: columnFilterId, value }) => {
+      var _a2, _b2;
+      return getColumnFilterCount(value, (_b2 = (_a2 = table.getColumn(columnFilterId)) == null ? void 0 : _a2.columnDef.meta) == null ? void 0 : _b2.filter);
+    }
+  ).reduce((prev, curr) => prev + curr, 0);
+  const graphState = getTableState({ error: !!showError, loading, rowCount: filteredData.length });
+  const shouldDisable = graphState === "error";
+  const shouldRenderGraphContent = graphState !== "error" && graphState !== "empty";
+  const resetFilters = () => {
+    setColumnFilters([]);
+    setGlobalFilter("");
+  };
+  const memoizedNodeTypes = React6.useMemo(() => config.nodeTypes, [config.nodeTypes]);
+  const memoizedEdgeTypes = React6.useMemo(() => config.edgeTypes, [config.edgeTypes]);
+  const memoizedConfig = React6.useMemo(() => config, [config]);
+  React6.useEffect(() => {
+    if (!graphRef.current) {
+      return;
+    }
+    const { setNodes, setEdges } = graphRef.current;
+    const nodes = filteredData.map((item) => memoizedConfig.nodeTransform(item, filteredData)).flat() || [];
+    const nodeIds = new Set(nodes.map((node) => node.id));
+    const edges = (filteredData.map(memoizedConfig.edgeTransform).filter(Boolean).flat() || []).filter(
+      (edge) => Boolean(edge && edge.hasOwnProperty("source") && edge.hasOwnProperty("target")) && nodeIds.has(edge.source) && nodeIds.has(edge.target)
+    );
+    setNodes(nodes);
+    setEdges(edges);
+  }, [memoizedConfig, filteredData]);
+  const showFilters = !disableFilters && hasFilterableColumns(flatColumns);
+  const showToolbar = !disableSearch || !!Actions;
+  const resolvedEmptyView = {
+    error: (_a = emptyView == null ? void 0 : emptyView.error) != null ? _a : defaultGraphErrorConfig,
+    empty: (_b = emptyView == null ? void 0 : emptyView.empty) != null ? _b : defaultGraphEmptyConfig,
+    filter: (_c = emptyView == null ? void 0 : emptyView.filter) != null ? _c : defaultGraphNoFilterFoundConfig
+  };
+  return /* @__PURE__ */ jsxs6("div", { id: `graph-${id}`, className: cn("flex size-full flex-1 flex-col", className), children: [
+    !!title && /* @__PURE__ */ jsx9(SectionHeader, { className: "mb-4", children: /* @__PURE__ */ jsx9(SectionHeaderContent, { children: /* @__PURE__ */ jsx9(SectionHeaderTitle, { children: title }) }) }),
+    showToolbar && /* @__PURE__ */ jsxs6("div", { className: "mb-4 flex flex-row gap-2", children: [
+      !disableSearch && /* @__PURE__ */ jsxs6(InputGroup, { className: "w-70", children: [
+        /* @__PURE__ */ jsx9(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx9(Icon4, { name: "magnifying-glass" }) }),
+        /* @__PURE__ */ jsx9(
+          InputGroupInput,
+          {
+            "aria-label": "Search",
+            placeholder: "Search\u2026",
+            disabled: shouldDisable,
+            value: globalFilter,
+            onChange: (e) => setGlobalFilter(e.target.value)
+          }
+        )
+      ] }),
+      !!Actions && /* @__PURE__ */ jsx9("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ jsx9(Actions, { state: graphState }) })
+    ] }),
+    showFilters && /* @__PURE__ */ jsx9(
+      ViewFilter,
+      {
+        columns: flatColumns,
+        columnFilters,
+        onColumnFiltersChange: setColumnFilters,
+        className: "mb-4"
+      }
+    ),
+    shouldRenderGraphContent ? /* @__PURE__ */ jsxs6("div", { className: "relative size-full flex-1", children: [
+      graphState === "loading" && /* @__PURE__ */ jsx9(Icon4, { name: "circle-notch", className: "absolute top-4 left-4 z-10 animate-spin" }),
+      /* @__PURE__ */ jsx9(
+        GraphView,
+        {
+          viewportFocusNodeId,
+          ref: graphRef,
+          nodeTypes: memoizedNodeTypes,
+          edgeTypes: memoizedEdgeTypes,
+          children
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx9(
+      DataTableEmptyView,
+      {
+        emptyView: resolvedEmptyView,
+        tableState: graphState,
+        filterCount: filterCount + (!!globalFilter.trim() ? 1 : 0),
+        resetFilters
+      }
+    )
+  ] });
+}
+
+// src/graph/hooks/useGetViewportNodeIds.ts
+import { useEffect as useEffect3, useMemo as useMemo7, useRef as useRef3, useState as useState4 } from "react";
+import { useStore, useViewport } from "reactflow";
+var useGetDebouncedViewport = (debounceDelay = 1e3) => {
+  const timerRef = useRef3(null);
+  const [debouncedValues, setDebouncedValues] = useState4({ x: 0, y: 0, zoom: 1, width: 0, height: 0, nodes: [] });
+  const { x, y, zoom } = useViewport();
+  const { width, height, nodes } = useStore((state) => ({
+    width: state.width,
+    height: state.height,
+    nodes: state.getNodes()
+  }));
+  const nodesHash = nodes.map((n) => n.id).sort().join(",");
+  const memoizedNodes = useMemo7(() => nodes, [nodesHash]);
+  useEffect3(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setDebouncedValues({ x, y, zoom, width, height, nodes: memoizedNodes });
+      timerRef.current = null;
+    }, debounceDelay);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [x, y, zoom, width, height, memoizedNodes, debounceDelay]);
+  return debouncedValues;
+};
+var useGetViewportNodeIds = (debounceDelay = 1e3) => {
+  const { x, y, zoom, width, height, nodes } = useGetDebouncedViewport(debounceDelay);
+  return useMemo7(() => {
+    return nodes.filter((node) => {
+      var _a, _b, _c, _d;
+      if (node.hidden) {
+        return false;
+      }
+      const nodeX = ((_b = (_a = node.positionAbsolute) == null ? void 0 : _a.x) != null ? _b : node.position.x) * zoom + x;
+      const nodeY = ((_d = (_c = node.positionAbsolute) == null ? void 0 : _c.y) != null ? _d : node.position.y) * zoom + y;
+      const nodeW = GRAPH_NODE_WIDTH * zoom;
+      const nodeH = GRAPH_NODE_HEIGHT * zoom;
+      return nodeX + nodeW >= 0 && nodeX <= width && nodeY + nodeH >= 0 && nodeY <= height;
+    }).map((node) => node.id).sort((a, b) => a.localeCompare(b));
+  }, [x, y, zoom, width, height, nodes]);
+};
+
+// src/graph/utils.ts
+import { getOutgoers as getOutgoers2 } from "reactflow";
+var getGraphDescendants = (node, nodes, edges) => {
+  const outgoers = getOutgoers2(node, nodes, edges);
+  return outgoers.reduce(
+    (acc, outgoer) => {
+      const { nodes: outgoerNodes, edges: outgoerEdges } = getGraphDescendants(outgoer, nodes, edges);
+      return {
+        nodes: [...acc.nodes, ...outgoerNodes],
+        edges: [...acc.edges, ...outgoerEdges.filter((edge) => edge.source === outgoer.id)]
+      };
+    },
+    { nodes: [node], edges: edges.filter((edge) => edge.source === node.id) }
+  );
+};
+export {
+  Graph,
+  GraphActionsProvider,
+  GraphEdge,
+  GraphNode,
+  GraphNodeSkeleton,
+  GraphView,
+  defaultGraphEmptyConfig,
+  defaultGraphErrorConfig,
+  defaultGraphNoFilterFoundConfig,
+  getGraphDescendants,
+  isDefaultNode,
+  useAutoLayout,
+  useGetViewportNodeIds,
+  useGraphActions,
+  useGraphActionsContext,
+  useNodeVisibility
+};
+//# sourceMappingURL=graph.js.map