@matthieumordrel/chart-studio 0.3.0 → 0.5.2

package/dist/ui/chart-debug.mjs

@@ -1,173 +0,0 @@
-import { applyFilters } from "../core/pipeline.mjs";
-import { computeDateRange, filterByDateRange } from "../core/date-utils.mjs";
-import { useChartContext } from "./chart-context.mjs";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/ui/chart-debug.tsx
-/**
-* Debug panel — shows raw data, transformed data, series, and current state.
-* Drop `<ChartDebug />` inside a `<Chart>` to inspect what's happening.
-*/
-const TABS = [
-	{
-		id: "raw",
-		label: "Raw"
-	},
-	{
-		id: "transformed",
-		label: "Transformed"
-	},
-	{
-		id: "series",
-		label: "Series"
-	},
-	{
-		id: "state",
-		label: "State"
-	}
-];
-/**
-* Format a date as a full calendar label to avoid ambiguous numeric dates.
-*/
-function formatFullDay(date) {
-	return new Intl.DateTimeFormat("en-US", {
-		month: "long",
-		day: "numeric",
-		year: "numeric",
-		timeZone: "UTC"
-	}).format(date);
-}
-/**
-* Get the exact earliest and latest visible dates for the active date X-axis.
-*/
-function getVisibleDateRange(chart) {
-	if (!chart.isTimeSeries || !chart.xAxisId) return null;
-	const xAxisColumn = chart.columns.find((column) => column.id === chart.xAxisId);
-	if (!xAxisColumn || xAxisColumn.type !== "date") return null;
-	let visibleData = chart.rawData;
-	if (chart.dateRangeFilter && chart.referenceDateId) {
-		const referenceDateColumn = chart.columns.find((column) => column.id === chart.referenceDateId);
-		if (referenceDateColumn?.type === "date") visibleData = filterByDateRange(visibleData, referenceDateColumn, chart.dateRangeFilter);
-	}
-	visibleData = applyFilters(visibleData, chart.columns, chart.filters);
-	const { min, max } = computeDateRange(visibleData, xAxisColumn);
-	if (!min || !max) return null;
-	return {
-		columnId: xAxisColumn.id,
-		columnLabel: xAxisColumn.label,
-		earliest: { label: formatFullDay(min) },
-		latest: { label: formatFullDay(max) },
-		rule: "Uses exact dates from visible rows on the active X-axis date column."
-	};
-}
-/**
-* Build a compact UI label for the visible time range.
-*/
-function getVisibleDateRangeLabel(range) {
-	if (!range) return null;
-	const columnLabel = `${range.columnLabel} (${range.columnId})`;
-	if (range.earliest.label === range.latest.label) return `Visible exact date: ${range.earliest.label} via ${columnLabel}`;
-	return `Visible exact date range: ${range.earliest.label} -> ${range.latest.label} via ${columnLabel}`;
-}
-/**
-* Resolve the currently selected debug payload.
-*/
-function getDebugContent(chart, activeTab) {
-	switch (activeTab) {
-		case "raw": return chart.rawData;
-		case "transformed": return chart.transformedData;
-		case "series": return chart.series;
-		case "state": return {
-			activeSourceId: chart.activeSourceId,
-			chartType: chart.chartType,
-			xAxisId: chart.xAxisId,
-			groupById: chart.groupById,
-			metric: chart.metric,
-			timeBucket: chart.timeBucket,
-			availableTimeBuckets: chart.availableTimeBuckets,
-			isTimeSeries: chart.isTimeSeries,
-			filters: Object.fromEntries([...chart.filters.entries()].map(([k, v]) => [k, [...v]])),
-			sorting: chart.sorting,
-			availableChartTypes: chart.availableChartTypes,
-			availableGroupBys: chart.availableGroupBys,
-			availableMetrics: chart.availableMetrics,
-			columns: chart.columns,
-			availableFilters: chart.availableFilters.map((filter) => ({
-				...filter,
-				options: filter.options.length > 5 ? [...filter.options.slice(0, 5), {
-					value: "...",
-					label: `+${filter.options.length - 5} more`,
-					count: 0
-				}] : filter.options
-			})),
-			visibleDateRange: getVisibleDateRange(chart)
-		};
-	}
-}
-/** Tab bar button. */
-function TabButton({ tab, isActive, onClick }) {
-	return /* @__PURE__ */ jsx("button", {
-		onClick,
-		className: `border-b-2 px-3 py-1.5 text-[11px] font-mono transition-colors ${isActive ? "border-primary bg-primary/10 text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-		children: tab.label
-	});
-}
-/** Debug panel that renders chart internals as formatted JSON.
-* 
-* @param className - Additional CSS classes for the debug panel.
-* @param defaultOpen - Whether the debug panel should be open by default. (default: false)
-*/
-function ChartDebug({ className, defaultOpen = false }) {
-	const chart = useChartContext();
-	const [isOpen, setIsOpen] = useState(defaultOpen);
-	const [activeTab, setActiveTab] = useState("raw");
-	const content = getDebugContent(chart, activeTab);
-	const visibleDateRangeLabel = getVisibleDateRangeLabel(getVisibleDateRange(chart));
-	return /* @__PURE__ */ jsxs("div", {
-		className: `overflow-hidden rounded-lg border border-dashed border-border bg-background ${className ?? ""}`,
-		children: [/* @__PURE__ */ jsx("button", {
-			onClick: () => setIsOpen(!isOpen),
-			className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-mono text-foreground transition-colors hover:bg-muted/50",
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("span", { children: isOpen ? "▼" : "▶" }),
-					/* @__PURE__ */ jsx("span", { children: "chart-studio debug" }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "text-muted-foreground",
-						children: [
-							"(",
-							chart.rawData.length,
-							" raw, ",
-							chart.transformedData.length,
-							" points, ",
-							chart.series.length,
-							" ",
-							"series)"
-						]
-					}),
-					visibleDateRangeLabel ? /* @__PURE__ */ jsxs("span", {
-						className: "text-[11px] text-muted-foreground",
-						children: ["• ", visibleDateRangeLabel]
-					}) : null
-				]
-			})
-		}), isOpen && /* @__PURE__ */ jsxs("div", {
-			className: "border-t border-dashed border-border",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex gap-0 border-b border-border bg-muted/20",
-				children: TABS.map((tab) => /* @__PURE__ */ jsx(TabButton, {
-					tab,
-					isActive: activeTab === tab.id,
-					onClick: () => setActiveTab(tab.id)
-				}, tab.id))
-			}), /* @__PURE__ */ jsx("pre", {
-				className: "max-h-64 overflow-auto bg-muted/20 p-3 font-mono text-[11px] leading-relaxed text-foreground",
-				onWheel: (e) => e.stopPropagation(),
-				children: JSON.stringify(content, null, 2)
-			})]
-		})]
-	});
-}
-//#endregion
-export { ChartDebug };

package/dist/ui/chart-dropdown.mjs

@@ -1,92 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-//#region src/ui/chart-dropdown.tsx
-/**
-* Shared dropdown panel primitive for chart-studio popover controls.
-* Provides a positioned floating panel with backdrop, premium layered
-* shadows, and close-on-click-outside.
-*/
-/**
-* Positioned dropdown panel with premium styling.
-* Renders a transparent backdrop overlay and a fixed-position content panel
-* anchored to a trigger element.
-*
-* @property isOpen - Whether the panel is visible
-* @property onClose - Callback to close the panel
-* @property triggerRef - Ref to the button or element that anchors the panel
-* @property align - Horizontal alignment relative to trigger ('left' | 'right')
-* @property width - Fixed panel width in pixels
-* @property minWidth - Minimum panel width in pixels or equal to trigger width
-* @property offset - Gap between trigger and panel
-* @property repositionKey - Value that forces re-measurement when panel content changes
-* @property className - Additional CSS classes for the content area
-* @property children - Panel content
-*/
-function ChartDropdownPanel({ isOpen, onClose, triggerRef, align = "left", width, minWidth, offset = 6, repositionKey, className, children }) {
-	const panelRef = useRef(null);
-	const [position, setPosition] = useState(null);
-	useLayoutEffect(() => {
-		if (!isOpen) {
-			setPosition(null);
-			return;
-		}
-		/**
-		* Measure the trigger and panel, then place the panel in the best
-		* available viewport position.
-		*/
-		function updatePosition() {
-			const trigger = triggerRef.current;
-			const panel = panelRef.current;
-			if (!trigger || !panel) return;
-			const triggerRect = trigger.getBoundingClientRect();
-			const measuredPanelWidth = width ?? panel.offsetWidth;
-			const resolvedMinWidth = minWidth === "trigger" ? triggerRect.width : minWidth;
-			const panelWidth = Math.max(measuredPanelWidth, resolvedMinWidth ?? 0);
-			const panelHeight = panel.offsetHeight;
-			let left = align === "right" ? triggerRect.right - panelWidth : triggerRect.left;
-			left = Math.min(Math.max(left, 8), window.innerWidth - panelWidth - 8);
-			let top = window.innerHeight - triggerRect.bottom < panelHeight + offset && triggerRect.top >= panelHeight + offset ? triggerRect.top - panelHeight - offset : triggerRect.bottom + offset;
-			top = Math.max(8, Math.min(top, window.innerHeight - panelHeight - 8));
-			setPosition({
-				top,
-				left
-			});
-		}
-		updatePosition();
-		window.addEventListener("resize", updatePosition);
-		window.addEventListener("scroll", updatePosition, true);
-		return () => {
-			window.removeEventListener("resize", updatePosition);
-			window.removeEventListener("scroll", updatePosition, true);
-		};
-	}, [
-		align,
-		isOpen,
-		minWidth,
-		offset,
-		repositionKey,
-		triggerRef,
-		width
-	]);
-	if (!isOpen) return null;
-	if (typeof document === "undefined") return null;
-	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-40",
-		onClick: onClose
-	}), /* @__PURE__ */ jsx("div", {
-		ref: panelRef,
-		className: `fixed z-50 overflow-hidden rounded-xl border border-border/50 bg-popover text-popover-foreground shadow-[0_8px_30px_-6px_rgba(0,0,0,0.12),0_2px_8px_-2px_rgba(0,0,0,0.05)] ${className ?? ""}`,
-		style: {
-			top: position?.top ?? 0,
-			left: position?.left ?? 0,
-			width,
-			minWidth: minWidth === "trigger" ? triggerRef.current?.getBoundingClientRect().width : minWidth,
-			visibility: position ? "visible" : "hidden"
-		},
-		onWheel: (e) => e.stopPropagation(),
-		children
-	})] }), document.body);
-}
-//#endregion
-export { ChartDropdownPanel };

package/dist/ui/chart-filters-panel.d.mts

@@ -1,26 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/chart-filters-panel.d.ts
-/**
- * Filters panel content — reusable by both ChartFilters (inside a popover)
- * and ChartToolbarOverflow (rendered inline).
- *
- * Shows filterable columns as collapsible sections with checkbox options.
- * Each column section can be expanded/collapsed independently.
- */
-/**
- * Filters panel content (no popover wrapper).
- *
- * @property className - Additional CSS classes
- * @property showHeader - When true (default), shows "X filter(s) active · Filters" + clear icon.
- *   Set false when the header is rendered by the parent (e.g. overflow DetailPage).
- */
-declare function ChartFiltersPanel({
-  className,
-  showHeader
-}: {
-  className?: string;
-  showHeader?: boolean;
-}): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ChartFiltersPanel };

package/dist/ui/chart-filters-panel.mjs

@@ -1,132 +0,0 @@
-import { useChartContext } from "./chart-context.mjs";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Eraser } from "lucide-react";
-//#region src/ui/chart-filters-panel.tsx
-/**
-* Filters panel content — reusable by both ChartFilters (inside a popover)
-* and ChartToolbarOverflow (rendered inline).
-*
-* Shows filterable columns as collapsible sections with checkbox options.
-* Each column section can be expanded/collapsed independently.
-*/
-/** Maximum number of options to show per column before collapsing. */
-const MAX_VISIBLE_OPTIONS = 6;
-/**
-* Filters panel content (no popover wrapper).
-*
-* @property className - Additional CSS classes
-* @property showHeader - When true (default), shows "X filter(s) active · Filters" + clear icon.
-*   Set false when the header is rendered by the parent (e.g. overflow DetailPage).
-*/
-function ChartFiltersPanel({ className, showHeader = true }) {
-	const { availableFilters, filters, toggleFilter, clearAllFilters } = useChartContext();
-	const activeCount = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
-	if (availableFilters.length === 0) return /* @__PURE__ */ jsx("div", {
-		className,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "py-6 text-center text-xs text-muted-foreground",
-			children: "No filterable columns"
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className,
-		children: [showHeader && /* @__PURE__ */ jsxs("div", {
-			className: "mb-3 flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "truncate text-xs font-semibold text-foreground",
-				children: [activeCount > 0 && /* @__PURE__ */ jsxs("span", {
-					className: "text-muted-foreground",
-					children: [
-						activeCount,
-						" filter",
-						activeCount !== 1 ? "s" : "",
-						" active ·",
-						" "
-					]
-				}), "Filters"]
-			}), activeCount > 0 && /* @__PURE__ */ jsx("button", {
-				onClick: () => clearAllFilters(),
-				className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-				"aria-label": "Clear all filters",
-				children: /* @__PURE__ */ jsx(Eraser, { className: "h-3.5 w-3.5" })
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "space-y-1",
-			children: availableFilters.map((filter) => /* @__PURE__ */ jsx(FilterSection, {
-				filter,
-				activeValues: filters.get(filter.columnId),
-				onToggle: (value) => toggleFilter(filter.columnId, value)
-			}, filter.columnId))
-		})]
-	});
-}
-/** A collapsible filter column section with checkable options. */
-function FilterSection({ filter, activeValues, onToggle }) {
-	const [isOpen, setIsOpen] = useState(true);
-	const [expanded, setExpanded] = useState(false);
-	const visibleOptions = expanded ? filter.options : filter.options.slice(0, MAX_VISIBLE_OPTIONS);
-	const hasMore = filter.options.length > MAX_VISIBLE_OPTIONS;
-	const activeCount = activeValues?.size ?? 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-lg",
-		children: [/* @__PURE__ */ jsxs("button", {
-			onClick: () => setIsOpen(!isOpen),
-			className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted/50",
-			children: [
-				/* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${isOpen ? "" : "-rotate-90"}` }),
-				/* @__PURE__ */ jsx("span", {
-					className: "text-[11px] font-semibold text-foreground",
-					children: filter.label
-				}),
-				activeCount > 0 && /* @__PURE__ */ jsx("span", {
-					className: "ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[9px] font-semibold text-primary",
-					children: activeCount
-				})
-			]
-		}), isOpen && /* @__PURE__ */ jsxs("div", {
-			className: "pb-1 pl-2 pr-1 pt-0.5",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "space-y-px",
-				children: visibleOptions.map((option) => {
-					const isActive = activeValues?.has(option.value) ?? false;
-					return /* @__PURE__ */ jsxs("button", {
-						onClick: () => onToggle(option.value),
-						className: `flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors ${isActive ? "bg-primary/8 text-primary" : "text-foreground hover:bg-muted/60"}`,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${isActive ? "border-primary bg-primary" : "border-muted-foreground/30 bg-background"}`,
-								children: isActive && /* @__PURE__ */ jsx("svg", {
-									xmlns: "http://www.w3.org/2000/svg",
-									width: "10",
-									height: "10",
-									viewBox: "0 0 24 24",
-									fill: "none",
-									stroke: "white",
-									strokeWidth: "3",
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-								})
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "flex-1 truncate",
-								children: option.label
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "shrink-0 tabular-nums text-[10px] text-muted-foreground/70",
-								children: option.count
-							})
-						]
-					}, option.value);
-				})
-			}), hasMore && /* @__PURE__ */ jsx("button", {
-				onClick: () => setExpanded(!expanded),
-				className: "mt-1 w-full rounded-md px-2 py-1 text-left text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
-				children: expanded ? "Show less" : `Show ${filter.options.length - MAX_VISIBLE_OPTIONS} more…`
-			})]
-		})]
-	});
-}
-//#endregion
-export { ChartFiltersPanel };

package/dist/ui/chart-filters.d.mts

@@ -1,18 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/chart-filters.d.ts
-/**
- * Chart filters — compact button that shows active filter count.
- * Clicking reveals a popover wrapping ChartFiltersPanel.
- */
-/**
- * Compact filter button + dropdown for all filterable columns.
- * Shows a count badge when filters are active.
- */
-declare function ChartFilters({
-  className
-}: {
-  className?: string;
-}): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { ChartFilters };

package/dist/ui/chart-filters.mjs

@@ -1,48 +0,0 @@
-import { useChartContext } from "./chart-context.mjs";
-import { ChartDropdownPanel } from "./chart-dropdown.mjs";
-import { ChartFiltersPanel } from "./chart-filters-panel.mjs";
-import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Filter } from "lucide-react";
-//#region src/ui/chart-filters.tsx
-/**
-* Chart filters — compact button that shows active filter count.
-* Clicking reveals a popover wrapping ChartFiltersPanel.
-*/
-/**
-* Compact filter button + dropdown for all filterable columns.
-* Shows a count badge when filters are active.
-*/
-function ChartFilters({ className }) {
-	const { availableFilters, filters } = useChartContext();
-	const [isOpen, setIsOpen] = useState(false);
-	const triggerRef = useRef(null);
-	if (availableFilters.length === 0) return null;
-	const activeCount = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
-	const isActive = activeCount > 0;
-	return /* @__PURE__ */ jsxs("div", {
-		className,
-		children: [/* @__PURE__ */ jsxs("button", {
-			ref: triggerRef,
-			onClick: () => setIsOpen(!isOpen),
-			className: `inline-flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 ${isActive ? "border-primary/30 bg-primary/5 text-primary shadow-sm shadow-primary/5 hover:bg-primary/8" : "border-border/50 bg-background text-muted-foreground shadow-sm hover:border-border hover:bg-muted/30 hover:shadow hover:text-foreground"}`,
-			children: [
-				/* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
-				"Filters",
-				isActive && /* @__PURE__ */ jsx("span", {
-					className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold text-primary-foreground",
-					children: activeCount
-				})
-			]
-		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
-			isOpen,
-			onClose: () => setIsOpen(false),
-			triggerRef,
-			width: 288,
-			className: "max-h-[420px] overflow-y-auto overscroll-contain p-3",
-			children: /* @__PURE__ */ jsx(ChartFiltersPanel, {})
-		})]
-	});
-}
-//#endregion
-export { ChartFilters };

package/dist/ui/chart-group-by-selector.d.mts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/chart-group-by-selector.d.ts
-/**
- * GroupBy selector — premium custom dropdown replacing native <select>.
- */
-/** Custom dropdown to select the groupBy column. */
-declare function ChartGroupBySelector({
-  className,
-  hideIcon
-}: {
-  className?: string;
-  hideIcon?: boolean;
-}): react_jsx_runtime0.JSX.Element | null;
-//#endregion
-export { ChartGroupBySelector };

package/dist/ui/chart-group-by-selector.mjs

@@ -1,32 +0,0 @@
-import { CHART_TYPE_CONFIG } from "../core/chart-capabilities.mjs";
-import { useChartContext } from "./chart-context.mjs";
-import { ChartSelect } from "./chart-select.mjs";
-import { jsx } from "react/jsx-runtime";
-import { Layers } from "lucide-react";
-//#region src/ui/chart-group-by-selector.tsx
-/**
-* GroupBy selector — premium custom dropdown replacing native <select>.
-*/
-/** Custom dropdown to select the groupBy column. */
-function ChartGroupBySelector({ className, hideIcon }) {
-	const { chartType, groupById, setGroupBy, availableGroupBys } = useChartContext();
-	if (!CHART_TYPE_CONFIG[chartType].supportsGrouping || availableGroupBys.length === 0) return null;
-	const options = [{
-		value: "",
-		label: "No grouping"
-	}, ...availableGroupBys.map((col) => ({
-		value: col.id,
-		label: col.label
-	}))];
-	return /* @__PURE__ */ jsx(ChartSelect, {
-		value: groupById ?? "",
-		options,
-		onChange: (v) => setGroupBy(v || null),
-		ariaLabel: "Group by",
-		icon: Layers,
-		hideIcon,
-		className
-	});
-}
-//#endregion
-export { ChartGroupBySelector };

package/dist/ui/chart-metric-panel.d.mts

@@ -1,25 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/ui/chart-metric-panel.d.ts
-/**
- * Metric panel content — reusable by both ChartMetricSelector (inside a popover)
- * and ChartToolbarOverflow (rendered inline).
- *
- * Shows a "Count" option plus grouped number columns with aggregate buttons
- * (Sum, Avg, Min, Max) and an "Exclude zeros" toggle per column.
- */
-/**
- * Metric panel content (no popover wrapper).
- *
- * @property onClose - Optional callback when user makes a definitive selection (e.g. "Count")
- * @property className - Additional CSS classes
- */
-declare function ChartMetricPanel({
-  onClose,
-  className
-}: {
-  onClose?: () => void;
-  className?: string;
-}): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { ChartMetricPanel };