@prismiq/react 0.1.0

package/dist/index.js

@@ -0,0 +1,926 @@
+import { Dashboard } from './chunk-MOAEEF5P.js';
+export { Dashboard, DashboardCard, DashboardContext, DashboardDialog, DashboardEditor, DashboardLayout as DashboardLayoutComponent, DashboardList, DashboardProvider, DateRangeFilter, EditorToolbar, FilterBar, MultiSelectFilter, SelectFilter, TextFilter, Widget, WidgetContent, WidgetEditor, WidgetHeader, WidgetPalette, useAutoRefresh, useDashboard, useDashboardFilters, useFullscreen, useWidget } from './chunk-MOAEEF5P.js';
+export { AreaChart, BarChart, EChartWrapper, LineChart, MetricCard, PieChart, ScatterChart, Sparkline, TrendIndicator, applyThemeToOption, createChartTheme, createGradientColor, dataPointsToChartData, formatAxisLabel, formatCompact, formatMetricValue, getChartColors, isChartDataEmpty, queryResultToChartData, suggestChartType, toChartData } from './chunk-2H5WTH4K.js';
+import { useDashboardPinStatus, usePinMutations, usePinnedDashboards } from './chunk-UPYINBZU.js';
+export { AggregationPicker, AnalyticsProvider, Badge, Button, Checkbox, ColumnNode, ColumnSelector, CustomSQLEditor, Dialog, DialogFooter, DialogHeader, Dropdown, DropdownItem, DropdownSeparator, EmptyDashboard, EmptyState, ErrorBoundary, ErrorFallback, FilterBuilder, FilterRow, FilterValueInput, Icon, Input, NoData, NoResults, Pagination, PrismiqClient, PrismiqError, QueryBuilder, QueryBuilderToolbar, QueryPreview, ResultsTable, SavedQueryPicker, SchemaExplorer, Select, SelectedColumn, Skeleton, SkeletonChart, SkeletonMetricCard, SkeletonTable, SkeletonText, SortBuilder, SortRow, TableCell, TableHeader, TableNode, TableRow, Tooltip, WidgetErrorBoundary, useAnalytics, useAnalyticsCallbacks, useChartData, useCustomSQL, useDashboard as useDashboardData, useDashboardMutations, useDashboardPinStatus, useDashboards, usePinMutations, usePinnedDashboards, useQuery, useSavedQueries, useSchema } from './chunk-UPYINBZU.js';
+export { ThemeProvider, darkTheme, lightTheme, useTheme } from './chunk-T6STUE7E.js';
+export { downloadFile, exportMultipleSheets, exportToCSV, exportToExcel, generateCSV, useExport } from './chunk-WWTT2OJ5.js';
+export { BREAKPOINTS, ClientOnly, getLocalStorage, getWindowHeight, getWindowWidth, isBrowser, isServer, removeLocalStorage, setLocalStorage, useBreakpoint, useIsBreakpoint, useIsClient, useMediaQuery, useWindowSize } from './chunk-JTCBZDHY.js';
+export { announceToScreenReader, focusVisibleStyles, skipLinkFocusStyles, skipLinkStyles, useArrowNavigation, useFocusTrap, useFocusVisible, useRovingTabIndex } from './chunk-EX74SI67.js';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var PinIcon = ({ filled, size }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: filled ? "currentColor" : "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6a2 2 0 0 1 2-2h0a2 2 0 0 0 2-2H5a2 2 0 0 0 2 2h0a2 2 0 0 1 2 2z" })
+    ]
+  }
+);
+var baseStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--prismiq-spacing-xs)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontWeight: 500,
+  borderRadius: "var(--prismiq-radius-md)",
+  border: "1px solid var(--prismiq-color-border)",
+  backgroundColor: "var(--prismiq-color-surface)",
+  color: "var(--prismiq-color-text)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, border-color 0.15s, opacity 0.15s",
+  outline: "none"
+};
+var sizeStyles = {
+  sm: {
+    padding: "var(--prismiq-spacing-xs)",
+    fontSize: "var(--prismiq-font-size-sm)",
+    minWidth: 28,
+    minHeight: 28
+  },
+  md: {
+    padding: "var(--prismiq-spacing-sm)",
+    fontSize: "var(--prismiq-font-size-base)",
+    minWidth: 36,
+    minHeight: 36
+  },
+  lg: {
+    padding: "var(--prismiq-spacing-md)",
+    fontSize: "var(--prismiq-font-size-lg)",
+    minWidth: 44,
+    minHeight: 44
+  }
+};
+var pinnedStyles = {
+  backgroundColor: "var(--prismiq-color-primary-light, #e3f2fd)",
+  borderColor: "var(--prismiq-color-primary)",
+  color: "var(--prismiq-color-primary)"
+};
+var disabledStyles = {
+  opacity: 0.5,
+  cursor: "not-allowed"
+};
+var iconSizes = {
+  sm: 14,
+  md: 16,
+  lg: 20
+};
+function PinButton({
+  dashboardId,
+  context,
+  label = "Pin",
+  unpinLabel = "Unpin",
+  iconOnly = false,
+  size = "md",
+  onPinChange,
+  className,
+  style
+}) {
+  const { isPinned: checkIsPinned, isLoading: statusLoading, refetch } = useDashboardPinStatus({
+    dashboardId
+  });
+  const { pin, unpin, state: mutationState } = usePinMutations();
+  const [actionError, setActionError] = useState(null);
+  const isPinned = checkIsPinned(context);
+  const isLoading = statusLoading || mutationState.isLoading;
+  const handleClick = useCallback(async () => {
+    if (isLoading) return;
+    setActionError(null);
+    try {
+      if (isPinned) {
+        await unpin(dashboardId, context);
+        onPinChange?.(false);
+      } else {
+        await pin(dashboardId, context);
+        onPinChange?.(true);
+      }
+      await refetch();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setActionError(error);
+      console.error("Failed to toggle pin:", err);
+    }
+  }, [dashboardId, context, isPinned, isLoading, pin, unpin, onPinChange, refetch]);
+  const errorStyles2 = {
+    borderColor: "var(--prismiq-color-error)",
+    color: "var(--prismiq-color-error)"
+  };
+  const combinedStyles = {
+    ...baseStyles,
+    ...sizeStyles[size],
+    ...isPinned ? pinnedStyles : {},
+    ...isLoading ? disabledStyles : {},
+    ...actionError ? errorStyles2 : {},
+    ...style
+  };
+  const iconSize = iconSizes[size];
+  const displayLabel = isPinned ? unpinLabel : label;
+  const errorMessage = actionError ? `Error: ${actionError.message}` : void 0;
+  const accessibleLabel = errorMessage ?? (iconOnly ? displayLabel : void 0);
+  const tooltipTitle = errorMessage ?? (iconOnly ? displayLabel : void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+          @keyframes prismiq-spin {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: isLoading,
+        className,
+        style: combinedStyles,
+        "aria-pressed": isPinned,
+        "aria-label": accessibleLabel,
+        "aria-invalid": actionError ? true : void 0,
+        title: tooltipTitle,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: iconSize,
+                height: iconSize,
+                border: "2px solid currentColor",
+                borderRightColor: "transparent",
+                borderRadius: "50%",
+                animation: "prismiq-spin 0.6s linear infinite"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(PinIcon, { filled: isPinned, size: iconSize }),
+          !iconOnly && /* @__PURE__ */ jsx("span", { children: displayLabel })
+        ]
+      }
+    )
+  ] });
+}
+var errorBannerStyles = {
+  padding: "var(--prismiq-spacing-sm)",
+  backgroundColor: "var(--prismiq-color-error-light, #ffebee)",
+  color: "var(--prismiq-color-error)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-xs)",
+  marginBottom: "var(--prismiq-spacing-xs)"
+};
+var PinIcon2 = ({ size }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6a2 2 0 0 1 2-2h0a2 2 0 0 0 2-2H5a2 2 0 0 0 2 2h0a2 2 0 0 1 2 2z" })
+    ]
+  }
+);
+var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var CheckIcon = ({ size }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var triggerStyles = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-xs)",
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-base)",
+  fontWeight: 500,
+  borderRadius: "var(--prismiq-radius-md)",
+  border: "1px solid var(--prismiq-color-border)",
+  backgroundColor: "var(--prismiq-color-surface)",
+  color: "var(--prismiq-color-text)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, border-color 0.15s",
+  outline: "none"
+};
+var menuStyles = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: "var(--prismiq-spacing-xs)",
+  minWidth: 200,
+  padding: "var(--prismiq-spacing-xs)",
+  backgroundColor: "var(--prismiq-color-surface)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  boxShadow: "var(--prismiq-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1))",
+  zIndex: 50
+};
+var menuItemStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-sm)",
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  color: "var(--prismiq-color-text)",
+  borderRadius: "var(--prismiq-radius-sm)",
+  cursor: "pointer",
+  transition: "background-color 0.15s",
+  border: "none",
+  backgroundColor: "transparent",
+  width: "100%",
+  textAlign: "left"
+};
+var checkboxStyles = {
+  width: 16,
+  height: 16,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "var(--prismiq-radius-sm)",
+  border: "1px solid var(--prismiq-color-border)",
+  backgroundColor: "var(--prismiq-color-surface)",
+  flexShrink: 0
+};
+var checkedCheckboxStyles = {
+  ...checkboxStyles,
+  backgroundColor: "var(--prismiq-color-primary)",
+  borderColor: "var(--prismiq-color-primary)",
+  color: "var(--prismiq-color-text-inverse)"
+};
+function PinMenu({
+  dashboardId,
+  contexts,
+  onPinChange,
+  className,
+  style
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [toggleError, setToggleError] = useState(null);
+  const containerRef = useRef(null);
+  const { isPinned, refetch, isLoading: statusLoading } = useDashboardPinStatus({
+    dashboardId
+  });
+  const { pin, unpin, state: mutationState } = usePinMutations();
+  const isLoading = statusLoading || mutationState.isLoading;
+  useEffect(() => {
+    if (!isOpen) {
+      setToggleError(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+  const handleToggle = useCallback((ctx) => {
+    return async () => {
+      if (isLoading) return;
+      setToggleError(null);
+      try {
+        const pinned = isPinned(ctx);
+        if (pinned) {
+          await unpin(dashboardId, ctx);
+          onPinChange?.(ctx, false);
+        } else {
+          await pin(dashboardId, ctx);
+          onPinChange?.(ctx, true);
+        }
+        await refetch();
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        setToggleError(error);
+        console.error("Failed to toggle pin for context:", ctx, err);
+      }
+    };
+  }, [dashboardId, isPinned, isLoading, pin, unpin, onPinChange, refetch]);
+  const pinnedCount = contexts.filter((ctx) => isPinned(ctx.id)).length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { position: "relative", display: "inline-block", ...style },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsOpen(!isOpen),
+            style: triggerStyles,
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen,
+            children: [
+              /* @__PURE__ */ jsx(PinIcon2, { size: 16 }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Pin",
+                pinnedCount > 0 ? ` (${pinnedCount})` : ""
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs("div", { style: menuStyles, role: "menu", children: [
+          toggleError && /* @__PURE__ */ jsxs("div", { style: errorBannerStyles, children: [
+            "Failed: ",
+            toggleError.message
+          ] }),
+          contexts.map((ctx) => {
+            const pinned = isPinned(ctx.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitemcheckbox",
+                "aria-checked": pinned,
+                onClick: handleToggle(ctx.id),
+                disabled: isLoading,
+                style: {
+                  ...menuItemStyles,
+                  opacity: isLoading ? 0.5 : 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: pinned ? checkedCheckboxStyles : checkboxStyles, children: pinned && /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) }),
+                  ctx.icon && /* @__PURE__ */ jsx("span", { style: { display: "flex" }, children: ctx.icon }),
+                  /* @__PURE__ */ jsx("span", { children: ctx.label })
+                ]
+              },
+              ctx.id
+            );
+          })
+        ] })
+      ]
+    }
+  );
+}
+var DashboardIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+      /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+      /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "7", height: "7" }),
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7" })
+    ]
+  }
+);
+var UnpinIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M2 2 22 22" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 6V4a2 2 0 0 1 2-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 4a2 2 0 0 0-2 2" })
+    ]
+  }
+);
+var containerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--prismiq-spacing-sm)"
+};
+var itemStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-md)",
+  padding: "var(--prismiq-spacing-md)",
+  backgroundColor: "var(--prismiq-color-surface)",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, border-color 0.15s, box-shadow 0.15s"
+};
+var itemHoverStyles = {
+  backgroundColor: "var(--prismiq-color-surface-hover, #f5f5f5)",
+  borderColor: "var(--prismiq-color-primary)",
+  boxShadow: "var(--prismiq-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))"
+};
+var iconWrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 40,
+  height: 40,
+  backgroundColor: "var(--prismiq-color-primary-light, #e3f2fd)",
+  color: "var(--prismiq-color-primary)",
+  borderRadius: "var(--prismiq-radius-md)",
+  flexShrink: 0
+};
+var contentStyles = {
+  flex: 1,
+  minWidth: 0
+};
+var titleStyles = {
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-base)",
+  fontWeight: 500,
+  color: "var(--prismiq-color-text)",
+  margin: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var descriptionStyles = {
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  color: "var(--prismiq-color-text-muted)",
+  margin: 0,
+  marginTop: "var(--prismiq-spacing-xs)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var unpinButtonStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  padding: 0,
+  backgroundColor: "transparent",
+  border: "1px solid transparent",
+  borderRadius: "var(--prismiq-radius-sm)",
+  color: "var(--prismiq-color-text-muted)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, color 0.15s",
+  flexShrink: 0
+};
+var emptyStateStyles = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "var(--prismiq-spacing-xl)",
+  textAlign: "center",
+  color: "var(--prismiq-color-text-muted)"
+};
+var loadingStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "var(--prismiq-spacing-xl)"
+};
+var errorStyles = {
+  padding: "var(--prismiq-spacing-md)",
+  backgroundColor: "var(--prismiq-color-error-light, #ffebee)",
+  color: "var(--prismiq-color-error)",
+  borderRadius: "var(--prismiq-radius-md)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)"
+};
+function PinnedDashboardList({
+  context,
+  onSelect,
+  emptyState,
+  renderItem,
+  className,
+  style
+}) {
+  const { dashboards, isLoading, error, refetch } = usePinnedDashboards({ context });
+  const { unpin, state: mutationState } = usePinMutations();
+  const [unpinError, setUnpinError] = useState(null);
+  const handleUnpin = useCallback(
+    (dashboardId) => {
+      return async (event) => {
+        event.stopPropagation();
+        setUnpinError(null);
+        try {
+          await unpin(dashboardId, context);
+          await refetch();
+        } catch (err) {
+          const error2 = err instanceof Error ? err : new Error(String(err));
+          setUnpinError(error2);
+          console.error("Failed to unpin dashboard:", dashboardId, err);
+        }
+      };
+    },
+    [context, unpin, refetch]
+  );
+  const createUnpinAction = useCallback(
+    (dashboardId) => {
+      return async () => {
+        setUnpinError(null);
+        try {
+          await unpin(dashboardId, context);
+          await refetch();
+        } catch (err) {
+          const error2 = err instanceof Error ? err : new Error(String(err));
+          setUnpinError(error2);
+          console.error("Failed to unpin dashboard:", dashboardId, err);
+          throw error2;
+        }
+      };
+    },
+    [context, unpin, refetch]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className, style: { ...containerStyles, ...style }, children: [
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes prismiq-spin {
+              to {
+                transform: rotate(360deg);
+              }
+            }
+          ` }),
+      /* @__PURE__ */ jsx("div", { style: loadingStyles, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: 24,
+            height: 24,
+            border: "2px solid var(--prismiq-color-border)",
+            borderTopColor: "var(--prismiq-color-primary)",
+            borderRadius: "50%",
+            animation: "prismiq-spin 0.6s linear infinite"
+          }
+        }
+      ) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...containerStyles, ...style }, children: /* @__PURE__ */ jsxs("div", { style: errorStyles, children: [
+      "Failed to load pinned dashboards: ",
+      error.message
+    ] }) });
+  }
+  const errorBanner = unpinError ? /* @__PURE__ */ jsxs("div", { style: { ...errorStyles, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Failed to unpin: ",
+      unpinError.message
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setUnpinError(null),
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: "inherit",
+          fontSize: "var(--prismiq-font-size-lg)",
+          lineHeight: 1
+        },
+        "aria-label": "Dismiss error",
+        children: "\xD7"
+      }
+    )
+  ] }) : null;
+  if (!dashboards || dashboards.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...containerStyles, ...style }, children: emptyState || /* @__PURE__ */ jsxs("div", { style: emptyStateStyles, children: [
+      /* @__PURE__ */ jsx(DashboardIcon, {}),
+      /* @__PURE__ */ jsx("p", { style: { margin: "var(--prismiq-spacing-sm) 0 0 0" }, children: "No pinned dashboards" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...containerStyles, ...style }, children: [
+    errorBanner,
+    dashboards.map((dashboard) => {
+      const actions = {
+        unpin: createUnpinAction(dashboard.id)
+      };
+      if (renderItem) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => onSelect(dashboard),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(dashboard);
+              }
+            },
+            children: renderItem(dashboard, actions)
+          },
+          dashboard.id
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: itemStyles,
+          onClick: () => onSelect(dashboard),
+          onMouseEnter: (e) => {
+            Object.assign(e.currentTarget.style, itemHoverStyles);
+          },
+          onMouseLeave: (e) => {
+            Object.assign(e.currentTarget.style, itemStyles);
+          },
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onSelect(dashboard);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: iconWrapperStyles, children: /* @__PURE__ */ jsx(DashboardIcon, {}) }),
+            /* @__PURE__ */ jsxs("div", { style: contentStyles, children: [
+              /* @__PURE__ */ jsx("h3", { style: titleStyles, children: dashboard.name }),
+              dashboard.description && /* @__PURE__ */ jsx("p", { style: descriptionStyles, children: dashboard.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleUnpin(dashboard.id),
+                disabled: mutationState.isLoading,
+                style: {
+                  ...unpinButtonStyles,
+                  opacity: mutationState.isLoading ? 0.5 : 1
+                },
+                title: "Unpin",
+                "aria-label": "Unpin dashboard",
+                children: /* @__PURE__ */ jsx(UnpinIcon, {})
+              }
+            )
+          ]
+        },
+        dashboard.id
+      );
+    })
+  ] });
+}
+var BackIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M19 12H5" }),
+      /* @__PURE__ */ jsx("path", { d: "m12 19-7-7 7-7" })
+    ]
+  }
+);
+var UnpinIcon2 = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M2 2 22 22" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 6V4a2 2 0 0 1 2-2" }),
+      /* @__PURE__ */ jsx("path", { d: "M9 4a2 2 0 0 0-2 2" })
+    ]
+  }
+);
+var containerStyles2 = {
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+};
+var headerStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-md)",
+  padding: "var(--prismiq-spacing-md)",
+  borderBottom: "1px solid var(--prismiq-color-border)",
+  backgroundColor: "var(--prismiq-color-surface)"
+};
+var backButtonStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-xs)",
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  fontWeight: 500,
+  backgroundColor: "transparent",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  color: "var(--prismiq-color-text)",
+  cursor: "pointer",
+  transition: "background-color 0.15s"
+};
+var titleStyles2 = {
+  flex: 1,
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-lg)",
+  fontWeight: 600,
+  color: "var(--prismiq-color-text)",
+  margin: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var unpinButtonStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--prismiq-spacing-xs)",
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  backgroundColor: "transparent",
+  border: "1px solid var(--prismiq-color-border)",
+  borderRadius: "var(--prismiq-radius-md)",
+  color: "var(--prismiq-color-text-muted)",
+  cursor: "pointer",
+  transition: "background-color 0.15s, color 0.15s"
+};
+var contentStyles2 = {
+  flex: 1,
+  overflow: "auto"
+};
+var listContainerStyles = {
+  padding: "var(--prismiq-spacing-md)"
+};
+var errorBannerStyles2 = {
+  padding: "var(--prismiq-spacing-sm) var(--prismiq-spacing-md)",
+  backgroundColor: "var(--prismiq-color-error-light, #ffebee)",
+  color: "var(--prismiq-color-error)",
+  fontFamily: "var(--prismiq-font-sans)",
+  fontSize: "var(--prismiq-font-size-sm)",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center"
+};
+function PinnedDashboardView({
+  context,
+  selectedDashboard,
+  onBack,
+  onSelect,
+  showUnpin = true,
+  backLabel = "Back",
+  emptyState,
+  className,
+  style
+}) {
+  const { unpin, state: mutationState } = usePinMutations();
+  const [unpinError, setUnpinError] = useState(null);
+  const handleUnpin = async () => {
+    if (!selectedDashboard) return;
+    setUnpinError(null);
+    try {
+      await unpin(selectedDashboard.id, context);
+      onBack();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setUnpinError(error);
+      console.error("Failed to unpin dashboard:", selectedDashboard.id, err);
+    }
+  };
+  if (!selectedDashboard) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...containerStyles2, ...style }, children: /* @__PURE__ */ jsx("div", { style: listContainerStyles, children: /* @__PURE__ */ jsx(
+      PinnedDashboardList,
+      {
+        context,
+        onSelect,
+        emptyState
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...containerStyles2, ...style }, children: [
+    unpinError && /* @__PURE__ */ jsxs("div", { style: errorBannerStyles2, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Failed to unpin: ",
+        unpinError.message
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setUnpinError(null),
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "inherit",
+            fontSize: "var(--prismiq-font-size-lg)",
+            lineHeight: 1
+          },
+          "aria-label": "Dismiss error",
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: backButtonStyles,
+          children: [
+            /* @__PURE__ */ jsx(BackIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: backLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { style: titleStyles2, children: selectedDashboard.name }),
+      showUnpin && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleUnpin,
+          disabled: mutationState.isLoading,
+          style: {
+            ...unpinButtonStyles2,
+            opacity: mutationState.isLoading ? 0.5 : 1
+          },
+          children: [
+            /* @__PURE__ */ jsx(UnpinIcon2, {}),
+            /* @__PURE__ */ jsx("span", { children: "Unpin" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: contentStyles2, children: /* @__PURE__ */ jsx(Dashboard, { id: selectedDashboard.id }) })
+  ] });
+}
+
+// src/index.ts
+var VERSION = "0.1.0";
+
+export { PinButton, PinMenu, PinnedDashboardList, PinnedDashboardView, VERSION };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map