@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.20.1 → 0.5.0-beta.21.1

package/dist/components/charts/PlateMap/utils.js

@@ -0,0 +1,235 @@
+import { PLATEMAP_CONSTANTS as c } from "./constants.js";
+const M = 65, d = 26;
+function E(e) {
+  return Array.from(
+    { length: e },
+    (t, n) => n < d ? String.fromCharCode(M + n) : "A" + String.fromCharCode(M + (n - d))
+  );
+}
+function $(e) {
+  return Array.from({ length: e }, (t, n) => n + 1);
+}
+function I(e) {
+  const t = e.match(/^([A-Z]{1,2})(\d{1,2})$/i);
+  if (!t) return null;
+  const n = t[1].toUpperCase(), o = n.length === 1 ? n.charCodeAt(0) - M : d + (n.charCodeAt(1) - M), r = parseInt(t[2], 10) - 1;
+  return { row: o, col: r };
+}
+function x(e, t, n) {
+  if (!e) return !1;
+  const { row: o, col: r } = e;
+  return o >= 0 && r >= 0 && o < t && r < n;
+}
+function _(e, t) {
+  if (!e) return null;
+  const n = t ?? Object.keys(e)[0];
+  return n ? e[n] : null;
+}
+function p(e, t, n, o, r) {
+  typeof e == "number" ? o[t][n] = e : typeof e == "string" && (r[t][n] = e);
+}
+function S(e, t, n, o) {
+  const r = Array.from(
+    { length: t },
+    () => Array(n).fill(null)
+  ), l = Array.from(
+    { length: t },
+    () => Array(n).fill(null)
+  ), a = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+  for (const i of e) {
+    const f = I(i.wellId);
+    if (!x(f, t, n)) continue;
+    const u = i.wellId.toUpperCase();
+    i.values && a.set(u, i.values), i.tooltipData && s.set(u, i.tooltipData);
+    const h = _(i.values, o);
+    p(h, f.row, f.col, r, l);
+  }
+  return { grid: r, categories: l, allValues: a, tooltipData: s };
+}
+function D(e) {
+  let t = 1 / 0, n = -1 / 0;
+  for (const o of e)
+    for (const r of o)
+      r !== null && Number.isFinite(r) && (t = Math.min(t, r), n = Math.max(n, r));
+  return Number.isFinite(t) || (t = 0), Number.isFinite(n) || (n = 1), t === n && (n = t + 1), { min: t, max: n };
+}
+function P(e) {
+  return e.some((t) => t.values && Object.keys(t.values).length > 0);
+}
+function b(e) {
+  const t = /* @__PURE__ */ new Set();
+  for (const n of e)
+    n.values && Object.keys(n.values).forEach((o) => t.add(o));
+  return [...t];
+}
+function T(e, t) {
+  for (const n of e)
+    if (typeof n.values?.[t] == "string")
+      return !0;
+  return !1;
+}
+function U(e, t) {
+  return b(e).map((o) => {
+    const r = t?.find((a) => a.id === o), l = T(e, o);
+    return {
+      id: o,
+      name: r?.name ?? o,
+      // Auto-set categorical mode for string layers if not explicitly configured
+      visualizationMode: r?.visualizationMode ?? (l ? "categorical" : void 0),
+      colorScale: r?.colorScale,
+      valueMin: r?.valueMin,
+      valueMax: r?.valueMax,
+      valueUnit: r?.valueUnit,
+      categoryColors: r?.categoryColors
+    };
+  });
+}
+function k(e, t, n) {
+  const o = e.match(/^([A-Z]{1,2})(\d{1,2}):([A-Z]{1,2})(\d{1,2})$/i);
+  if (!o)
+    return null;
+  const r = I(`${o[1]}${o[2]}`), l = I(`${o[3]}${o[4]}`), a = Math.min(r.row, l.row), s = Math.max(r.row, l.row), i = Math.min(r.col, l.col), f = Math.max(r.col, l.col), u = t.length, h = n.length;
+  return a >= u || s >= u || i >= h || f >= h ? null : { minRow: a, maxRow: s, minCol: i, maxCol: f };
+}
+function H({
+  wellId: e,
+  value: t,
+  allValues: n,
+  tooltipExtra: o,
+  activeLayerId: r,
+  layerConfigMap: l,
+  precision: a,
+  valueUnit: s
+}) {
+  let i = `Well ${e}`;
+  return n ? i += L(n, r, l, a) : t !== null ? i += `<br>Value: ${t.toFixed(a)}${s}` : r ? i += `<br>▶ ${r}: -` : i += "<br>No data", o && (i += w(o)), i;
+}
+function L(e, t, n, o) {
+  let r = "";
+  for (const [l, a] of Object.entries(e)) {
+    const i = l === t ? "▶ " : "", f = n.get(l)?.valueUnit, u = f ? ` ${f}` : "";
+    a === null ? r += `<br>${i}${l}: -` : typeof a == "number" ? r += `<br>${i}${l}: ${a.toFixed(o)}${u}` : r += `<br>${i}${l}: ${a.charAt(0).toUpperCase() + a.slice(1)}`;
+  }
+  return r;
+}
+function w(e) {
+  let t = "";
+  for (const [n, o] of Object.entries(e))
+    t += `<br>${n}: ${String(o)}`;
+  return t;
+}
+function W(e, t, n) {
+  const o = n ? { text: n } : void 0;
+  switch (e) {
+    case "bottom":
+      return {
+        orientation: "h",
+        thickness: 20,
+        len: 0.75,
+        outlinewidth: 0,
+        ticksuffix: t,
+        y: -0.15,
+        yanchor: "top",
+        x: 0.5,
+        xanchor: "center",
+        title: o ? { ...o, side: "top" } : void 0
+      };
+    case "top":
+      return {
+        orientation: "h",
+        thickness: 20,
+        len: 0.75,
+        outlinewidth: 0,
+        ticksuffix: t,
+        y: 1.15,
+        yanchor: "bottom",
+        x: 0.5,
+        xanchor: "center",
+        title: o ? { ...o, side: "bottom" } : void 0
+      };
+    case "left":
+      return {
+        thickness: 28,
+        len: 1,
+        outlinewidth: 0,
+        ticksuffix: t,
+        y: 0.5,
+        yanchor: "middle",
+        x: -0.15,
+        xanchor: "right",
+        title: o ? { ...o, side: "right" } : void 0
+      };
+    default:
+      return {
+        thickness: 20,
+        len: 0.9,
+        outlinewidth: 0,
+        ticksuffix: t,
+        x: 0.88,
+        xanchor: "left",
+        y: 0.5,
+        yanchor: "middle",
+        title: o ? { ...o, side: "right" } : void 0
+      };
+  }
+}
+function V(e, t, n) {
+  const o = n ? c.MARGIN_TOP : c.MARGIN_RIGHT, r = c.MARGIN_RIGHT, l = e === "left" ? o + c.MARGIN_RIGHT : o, a = e === "right" ? r + c.MARGIN_RIGHT : r, s = e === "bottom" ? c.MARGIN_LEFT : c.MARGIN_RIGHT;
+  let i;
+  return t ? i = e === "top" ? c.COLORBAR_LENGTH : 100 : i = e === "top" ? c.MARGIN_TOP : c.MARGIN_BOTTOM, { l, r: a, b: s, t: i, pad: 5 };
+}
+function F(e) {
+  switch (e) {
+    case "left":
+      return c.MULTI_VALUE_PRIMARY_RATIO;
+    case "right":
+      return c.MULTI_VALUE_SECONDARY_RATIO;
+    default:
+      return 0.5;
+  }
+}
+function z(e) {
+  switch (e) {
+    case "left":
+      return [c.DOMAIN_COLORBAR_OFFSET, 1];
+    case "right":
+      return [0, c.DOMAIN_COLORBAR_END];
+    default:
+      return [0, 1];
+  }
+}
+function B(e, t, n, o, r, l) {
+  const a = [], s = [], i = [], f = [];
+  for (let u = 0; u < o; u++)
+    for (let h = 0; h < r; h++) {
+      a.push(h + 1), s.push(t[u]);
+      const A = e[u][h];
+      i.push(A ?? l), f.push(n[u][h]);
+    }
+  return { xData: a, yData: s, colorData: i, textData: f };
+}
+const C = 4, O = 1, N = 0.8, m = 100;
+function Z(e, t, n, o, r, l, a) {
+  const s = a ? c.MARGIN_TOP : c.MARGIN_RIGHT, i = m, f = l ? m : c.MARGIN_BOTTOM, u = c.MARGIN_RIGHT, h = e - s - i, A = t - f - u, g = h / o, R = A / n, y = r === "square" ? Math.max(g, R) : Math.min(g, R);
+  return Math.max(C, y * (r === "square" ? O : N));
+}
+export {
+  W as buildColorbarConfig,
+  V as buildPlotMargins,
+  H as buildWellHoverText,
+  z as calculateAxisDomain,
+  Z as calculateMarkerSize,
+  F as calculateTitleX,
+  D as calculateValueRange,
+  b as extractLayerIds,
+  U as extractLayers,
+  B as flattenGridData,
+  $ as generateColumnLabels,
+  E as generateRowLabels,
+  P as hasMultiValueWells,
+  T as isStringValueLayer,
+  k as parseRegionWells,
+  I as parseWellId,
+  S as wellDataToGrid
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/charts/PlateMap/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/charts/PlateMap/utils.ts"],"sourcesContent":["import { PLATEMAP_CONSTANTS } from \"./constants\";\n\nimport type { WellData, WellDataGridResult, LayerConfig, LegendPosition } from \"./types\";\n\n/** ASCII code for uppercase 'A' */\nconst ASCII_UPPERCASE_A = 65;\n/** Number of letters in the alphabet */\nconst ALPHABET_LENGTH = 26;\n\n/**\n * Generate row labels (A, B, C, ... for 96-well; A-P for 384-well; A-AF for 1536-well)\n * For rows beyond Z (26), uses AA, AB, AC, etc.\n */\nexport function generateRowLabels(count: number): string[] {\n  return Array.from({ length: count }, (_, i) =>\n    i < ALPHABET_LENGTH\n      ? String.fromCharCode(ASCII_UPPERCASE_A + i)\n      : \"A\" + String.fromCharCode(ASCII_UPPERCASE_A + (i - ALPHABET_LENGTH))\n  );\n}\n\n/**\n * Generate column labels (1, 2, 3, ...)\n */\nexport function generateColumnLabels(count: number): number[] {\n  return Array.from({ length: count }, (_, i) => i + 1);\n}\n\n/**\n * Parse well ID to row and column indices\n * @param wellId - Well identifier (e.g., \"A1\", \"H12\", \"P24\", \"AA1\", \"AF48\")\n * @returns { row, col } zero-indexed\n */\nexport function parseWellId(wellId: string): { row: number; col: number } | null {\n  // Match single letter (A-Z) or double letter (AA-AF) followed by 1-2 digits\n  const match = wellId.match(/^([A-Z]{1,2})(\\d{1,2})$/i);\n  if (!match) return null;\n\n  const rowStr = match[1].toUpperCase();\n  const row =\n    rowStr.length === 1\n      ? rowStr.charCodeAt(0) - ASCII_UPPERCASE_A\n      : ALPHABET_LENGTH + (rowStr.charCodeAt(1) - ASCII_UPPERCASE_A);\n\n  const col = parseInt(match[2], 10) - 1;\n\n  return { row, col };\n}\n\n/** Parsed well position */\ninterface ParsedWellPosition {\n  row: number;\n  col: number;\n}\n\n/**\n * Checks if a parsed well position is within grid bounds.\n */\nfunction isValidWellPosition(\n  parsed: ParsedWellPosition | null,\n  rows: number,\n  columns: number\n): parsed is ParsedWellPosition {\n  if (!parsed) return false;\n  const { row, col } = parsed;\n  // Check bounds including >= 0 to prevent negative indices (e.g., \"A0\" -> col=-1)\n  return row >= 0 && col >= 0 && row < rows && col < columns;\n}\n\n/**\n * Extracts the layer value from well values for the specified layer.\n */\nfunction extractLayerValue(\n  values: Record<string, string | number | null> | undefined,\n  layerId?: string\n): string | number | null {\n  if (!values) return null;\n  const effectiveLayerId = layerId ?? Object.keys(values)[0];\n  return effectiveLayerId ? values[effectiveLayerId] : null;\n}\n\n/**\n * Stores the layer value in the appropriate grid based on its type.\n */\nfunction storeLayerValue(\n  layerValue: string | number | null,\n  row: number,\n  col: number,\n  grid: (number | null)[][],\n  categories: (string | null)[][]\n): void {\n  if (typeof layerValue === \"number\") {\n    grid[row][col] = layerValue;\n  } else if (typeof layerValue === \"string\") {\n    categories[row][col] = layerValue;\n  }\n}\n\n/**\n * Convert WellData array to 2D grids for a specific layer\n */\nexport function wellDataToGrid(\n  wells: WellData[],\n  rows: number,\n  columns: number,\n  layerId?: string\n): WellDataGridResult {\n  // Initialize grids with nulls\n  const grid: (number | null)[][] = Array.from({ length: rows }, () =>\n    Array(columns).fill(null)\n  );\n  const categories: (string | null)[][] = Array.from({ length: rows }, () =>\n    Array(columns).fill(null)\n  );\n  const allValues = new Map<string, Record<string, string | number | null>>();\n  const tooltipData = new Map<string, Record<string, unknown>>();\n\n  for (const well of wells) {\n    const parsed = parseWellId(well.wellId);\n    if (!isValidWellPosition(parsed, rows, columns)) continue;\n\n    const wellIdUpper = well.wellId.toUpperCase();\n\n    // Store all values for tooltip\n    if (well.values) {\n      allValues.set(wellIdUpper, well.values);\n    }\n\n    // Store tooltipData\n    if (well.tooltipData) {\n      tooltipData.set(wellIdUpper, well.tooltipData);\n    }\n\n    // Extract and store the layer value\n    const layerValue = extractLayerValue(well.values, layerId);\n    storeLayerValue(layerValue, parsed.row, parsed.col, grid, categories);\n  }\n\n  return { grid, categories, allValues, tooltipData };\n}\n\n/**\n * Calculate min/max values from grid, ignoring nulls\n */\nexport function calculateValueRange(grid: (number | null)[][]): { min: number; max: number } {\n  let min = Infinity;\n  let max = -Infinity;\n\n  for (const row of grid) {\n    for (const val of row) {\n      if (val !== null && Number.isFinite(val)) {\n        min = Math.min(min, val);\n        max = Math.max(max, val);\n      }\n    }\n  }\n\n  // Handle case where all values are null\n  if (!Number.isFinite(min)) min = 0;\n  if (!Number.isFinite(max)) max = 1;\n\n  // Ensure min < max\n  if (min === max) {\n    max = min + 1;\n  }\n\n  return { min, max };\n}\n\n/**\n * Check if WellData array contains multi-value wells (has `values` property)\n */\nexport function hasMultiValueWells(data: WellData[]): boolean {\n  return data.some((well) => well.values && Object.keys(well.values).length > 0);\n}\n\n/**\n * Extract unique layer IDs from WellData array with `values`\n */\nexport function extractLayerIds(data: WellData[]): string[] {\n  const layerIds = new Set<string>();\n  for (const well of data) {\n    if (well.values) {\n      Object.keys(well.values).forEach((k) => layerIds.add(k));\n    }\n  }\n  return [...layerIds];\n}\n\n/**\n * Check if a layer contains string values (categorical) or numeric values (heatmap)\n */\nexport function isStringValueLayer(data: WellData[], layerId: string): boolean {\n  for (const well of data) {\n    const val = well.values?.[layerId];\n    if (typeof val === \"string\") {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Extract layer configs from multi-value WellData array.\n * Creates a layer entry for each unique key found in the `values` objects.\n * Merges with user-provided layerConfigs to apply custom settings.\n */\nexport function extractLayers(\n  data: WellData[],\n  layerConfigs?: LayerConfig[]\n): LayerConfig[] {\n  const layerIds = extractLayerIds(data);\n\n  return layerIds.map((id) => {\n    const config = layerConfigs?.find((c) => c.id === id);\n    const isStringLayer = isStringValueLayer(data, id);\n\n    return {\n      id,\n      name: config?.name ?? id,\n      // Auto-set categorical mode for string layers if not explicitly configured\n      visualizationMode: config?.visualizationMode ?? (isStringLayer ? \"categorical\" : undefined),\n      colorScale: config?.colorScale,\n      valueMin: config?.valueMin,\n      valueMax: config?.valueMax,\n      valueUnit: config?.valueUnit,\n      categoryColors: config?.categoryColors,\n    };\n  });\n}\n\n/**\n * Parse region wells from range notation like \"A1:B6\"\n * Returns the bounding box coordinates for overlay rendering\n */\nexport function parseRegionWells(\n  wells: string,\n  rowLabels: readonly (string | number)[],\n  colLabels: readonly (string | number)[]\n): { minRow: number; maxRow: number; minCol: number; maxCol: number } | null {\n  // Parse range notation like \"A1:B6\"\n  const rangeMatch = wells.match(/^([A-Z]{1,2})(\\d{1,2}):([A-Z]{1,2})(\\d{1,2})$/i);\n  if (!rangeMatch) {\n    return null;\n  }\n\n  // The regex above guarantees valid well ID format, so parseWellId will always succeed\n  const startWell = parseWellId(`${rangeMatch[1]}${rangeMatch[2]}`)!;\n  const endWell = parseWellId(`${rangeMatch[3]}${rangeMatch[4]}`)!;\n\n  const minRow = Math.min(startWell.row, endWell.row);\n  const maxRow = Math.max(startWell.row, endWell.row);\n  const minCol = Math.min(startWell.col, endWell.col);\n  const maxCol = Math.max(startWell.col, endWell.col);\n\n  // Validate bounds against actual labels\n  const numRows = rowLabels.length;\n  const numCols = colLabels.length;\n  if (minRow >= numRows || maxRow >= numRows || minCol >= numCols || maxCol >= numCols) {\n    return null;\n  }\n\n  return { minRow, maxRow, minCol, maxCol };\n}\n\n/** Options for building hover text for a well */\nexport interface BuildHoverTextOptions {\n  wellId: string;\n  value: number | null;\n  allValues: Record<string, number | string | null> | undefined;\n  tooltipExtra: Record<string, unknown> | undefined;\n  activeLayerId: string | undefined;\n  layerConfigMap: Map<string, LayerConfig>;\n  precision: number;\n  valueUnit: string;\n}\n\n/**\n * Builds the hover text HTML for a single well.\n * Shows all layer values with the active layer marked.\n */\nexport function buildWellHoverText({\n  wellId,\n  value,\n  allValues,\n  tooltipExtra,\n  activeLayerId,\n  layerConfigMap,\n  precision,\n  valueUnit,\n}: BuildHoverTextOptions): string {\n  let text = `Well ${wellId}`;\n\n  if (allValues) {\n    text += formatAllLayerValues(allValues, activeLayerId, layerConfigMap, precision);\n  } else if (value !== null) {\n    text += `<br>Value: ${value.toFixed(precision)}${valueUnit}`;\n  } else if (activeLayerId) {\n    text += `<br>▶ ${activeLayerId}: -`;\n  } else {\n    text += `<br>No data`;\n  }\n\n  if (tooltipExtra) {\n    text += formatTooltipExtra(tooltipExtra);\n  }\n\n  return text;\n}\n\n/** Formats all layer values for hover text display */\nfunction formatAllLayerValues(\n  allValues: Record<string, number | string | null>,\n  activeLayerId: string | undefined,\n  layerConfigMap: Map<string, LayerConfig>,\n  precision: number\n): string {\n  let result = \"\";\n  for (const [key, value] of Object.entries(allValues)) {\n    const isActiveLayer = key === activeLayerId;\n    const prefix = isActiveLayer ? \"▶ \" : \"\";\n    const rawLayerUnit = layerConfigMap.get(key)?.valueUnit;\n    const layerUnit = rawLayerUnit ? ` ${rawLayerUnit}` : \"\";\n\n    if (value === null) {\n      result += `<br>${prefix}${key}: -`;\n    } else if (typeof value === \"number\") {\n      result += `<br>${prefix}${key}: ${value.toFixed(precision)}${layerUnit}`;\n    } else {\n      result += `<br>${prefix}${key}: ${value.charAt(0).toUpperCase() + value.slice(1)}`;\n    }\n  }\n  return result;\n}\n\n/** Formats tooltip extra data for display */\nfunction formatTooltipExtra(tooltipExtra: Record<string, unknown>): string {\n  let result = \"\";\n  for (const [key, value] of Object.entries(tooltipExtra)) {\n    result += `<br>${key}: ${String(value)}`;\n  }\n  return result;\n}\n\n/** Colorbar configuration for a specific position */\nexport interface ColorbarConfig {\n  orientation?: \"h\" | \"v\";\n  thickness: number;\n  len: number;\n  outlinewidth: number;\n  ticksuffix: string;\n  x: number;\n  xanchor: \"left\" | \"center\" | \"right\";\n  y: number;\n  yanchor: \"top\" | \"middle\" | \"bottom\";\n  title?: { text: string; side: \"top\" | \"bottom\" | \"right\" };\n}\n\n/**\n * Builds the colorbar configuration based on legend position.\n */\nexport function buildColorbarConfig(\n  position: LegendPosition,\n  valueUnit: string,\n  legendTitle?: string\n): ColorbarConfig {\n  const title = legendTitle ? { text: legendTitle } : undefined;\n\n  switch (position) {\n    case \"bottom\":\n      return {\n        orientation: \"h\",\n        thickness: 20,\n        len: 0.75,\n        outlinewidth: 0,\n        ticksuffix: valueUnit,\n        y: -0.15,\n        yanchor: \"top\",\n        x: 0.5,\n        xanchor: \"center\",\n        title: title ? { ...title, side: \"top\" } : undefined,\n      };\n    case \"top\":\n      return {\n        orientation: \"h\",\n        thickness: 20,\n        len: 0.75,\n        outlinewidth: 0,\n        ticksuffix: valueUnit,\n        y: 1.15,\n        yanchor: \"bottom\",\n        x: 0.5,\n        xanchor: \"center\",\n        title: title ? { ...title, side: \"bottom\" } : undefined,\n      };\n    case \"left\":\n      return {\n        thickness: 28,\n        len: 1,\n        outlinewidth: 0,\n        ticksuffix: valueUnit,\n        y: 0.5,\n        yanchor: \"middle\",\n        x: -0.15,\n        xanchor: \"right\",\n        title: title ? { ...title, side: \"right\" } : undefined,\n      };\n    default:\n      // \"right\" (default)\n      return {\n        thickness: 20,\n        len: 0.9,\n        outlinewidth: 0,\n        ticksuffix: valueUnit,\n        x: 0.88,\n        xanchor: \"left\",\n        y: 0.5,\n        yanchor: \"middle\",\n        title: title ? { ...title, side: \"right\" } : undefined,\n      };\n  }\n}\n\n/** Margin configuration for the plot */\nexport interface PlotMargins {\n  l: number;\n  r: number;\n  b: number;\n  t: number;\n  pad: number;\n}\n\n/**\n * Builds the margin configuration based on legend position and title presence.\n */\nexport function buildPlotMargins(\n  position: LegendPosition,\n  hasTitle: boolean,\n  hasYTitle: boolean\n): PlotMargins {\n  const baseLeft = hasYTitle ? PLATEMAP_CONSTANTS.MARGIN_TOP : PLATEMAP_CONSTANTS.MARGIN_RIGHT;\n  const baseRight = PLATEMAP_CONSTANTS.MARGIN_RIGHT;\n\n  const leftMargin = position === \"left\" ? baseLeft + PLATEMAP_CONSTANTS.MARGIN_RIGHT : baseLeft;\n  const rightMargin = position === \"right\" ? baseRight + PLATEMAP_CONSTANTS.MARGIN_RIGHT : baseRight;\n  const bottomMargin = position === \"bottom\" ? PLATEMAP_CONSTANTS.MARGIN_LEFT : PLATEMAP_CONSTANTS.MARGIN_RIGHT;\n\n  let topMargin: number;\n  if (hasTitle) {\n    topMargin = position === \"top\" ? PLATEMAP_CONSTANTS.COLORBAR_LENGTH : 100;\n  } else {\n    topMargin = position === \"top\" ? PLATEMAP_CONSTANTS.MARGIN_TOP : PLATEMAP_CONSTANTS.MARGIN_BOTTOM;\n  }\n\n  return { l: leftMargin, r: rightMargin, b: bottomMargin, t: topMargin, pad: 5 };\n}\n\n/**\n * Calculates the title X position based on legend position.\n */\nexport function calculateTitleX(position: LegendPosition): number {\n  switch (position) {\n    case \"left\":\n      return PLATEMAP_CONSTANTS.MULTI_VALUE_PRIMARY_RATIO;\n    case \"right\":\n      return PLATEMAP_CONSTANTS.MULTI_VALUE_SECONDARY_RATIO;\n    default:\n      return 0.5;\n  }\n}\n\n/**\n * Calculates the X-axis domain based on legend position.\n */\nexport function calculateAxisDomain(position: LegendPosition): [number, number] {\n  switch (position) {\n    case \"left\":\n      return [PLATEMAP_CONSTANTS.DOMAIN_COLORBAR_OFFSET, 1];\n    case \"right\":\n      return [0, PLATEMAP_CONSTANTS.DOMAIN_COLORBAR_END];\n    default:\n      return [0, 1];\n  }\n}\n\n/** Data arrays for scatter plot */\nexport interface ScatterPlotData {\n  xData: number[];\n  yData: string[];\n  colorData: number[];\n  textData: string[];\n}\n\n/**\n * Flattens 2D grid data into arrays for scatter plot rendering.\n */\nexport function flattenGridData(\n  plotZ: (number | null)[][],\n  rowLabels: (string | number)[],\n  hoverText: string[][],\n  rows: number,\n  columns: number,\n  plotZMin: number\n): ScatterPlotData {\n  const xData: number[] = [];\n  const yData: string[] = [];\n  const colorData: number[] = [];\n  const textData: string[] = [];\n\n  for (let rowIdx = 0; rowIdx < rows; rowIdx++) {\n    for (let colIdx = 0; colIdx < columns; colIdx++) {\n      xData.push(colIdx + 1); // 1-indexed columns\n      yData.push(rowLabels[rowIdx] as string);\n      const zValue = plotZ[rowIdx][colIdx];\n      colorData.push(zValue ?? plotZMin); // Use min value for null wells\n      textData.push(hoverText[rowIdx][colIdx]);\n    }\n  }\n\n  return { xData, yData, colorData, textData };\n}\n\n/** Marker size calculation result */\nexport interface MarkerSizeResult {\n  markerSize: number;\n}\n\n/** Minimum marker size in pixels */\nconst MIN_MARKER_SIZE = 4;\n/** Size multiplier for square markers (fill entire cell) */\nconst SQUARE_SIZE_MULTIPLIER = 1.0;\n/** Size multiplier for circle markers (leave gaps) */\nconst CIRCLE_SIZE_MULTIPLIER = 0.8;\n/** Default colorbar space reservation */\nconst COLORBAR_SPACE = 100;\n\n/**\n * Calculates the marker size based on plot dimensions and marker shape.\n */\nexport function calculateMarkerSize(\n  width: number,\n  height: number,\n  rows: number,\n  columns: number,\n  markerShape: \"circle\" | \"square\",\n  hasTitle: boolean,\n  hasYTitle: boolean\n): number {\n  const leftMargin = hasYTitle ? PLATEMAP_CONSTANTS.MARGIN_TOP : PLATEMAP_CONSTANTS.MARGIN_RIGHT;\n  const rightMargin = COLORBAR_SPACE; // Always reserve space for colorbar\n  const topMargin = hasTitle ? COLORBAR_SPACE : PLATEMAP_CONSTANTS.MARGIN_BOTTOM;\n  const bottomMargin = PLATEMAP_CONSTANTS.MARGIN_RIGHT;\n  const plotWidth = width - leftMargin - rightMargin;\n  const plotHeight = height - topMargin - bottomMargin;\n\n  const cellWidth = plotWidth / columns;\n  const cellHeight = plotHeight / rows;\n\n  // Circles: use smaller dimension; Squares: use larger dimension\n  const cellSize = markerShape === \"square\"\n    ? Math.max(cellWidth, cellHeight)\n    : Math.min(cellWidth, cellHeight);\n\n  const sizeMultiplier = markerShape === \"square\" ? SQUARE_SIZE_MULTIPLIER : CIRCLE_SIZE_MULTIPLIER;\n  return Math.max(MIN_MARKER_SIZE, cellSize * sizeMultiplier);\n}\n"],"names":["ASCII_UPPERCASE_A","ALPHABET_LENGTH","generateRowLabels","count","_","i","generateColumnLabels","parseWellId","wellId","match","rowStr","row","col","isValidWellPosition","parsed","rows","columns","extractLayerValue","values","layerId","effectiveLayerId","storeLayerValue","layerValue","grid","categories","wellDataToGrid","wells","allValues","tooltipData","well","wellIdUpper","calculateValueRange","min","max","val","hasMultiValueWells","data","extractLayerIds","layerIds","k","isStringValueLayer","extractLayers","layerConfigs","id","config","c","isStringLayer","parseRegionWells","rowLabels","colLabels","rangeMatch","startWell","endWell","minRow","maxRow","minCol","maxCol","numRows","numCols","buildWellHoverText","value","tooltipExtra","activeLayerId","layerConfigMap","precision","valueUnit","text","formatAllLayerValues","formatTooltipExtra","result","key","prefix","rawLayerUnit","layerUnit","buildColorbarConfig","position","legendTitle","title","buildPlotMargins","hasTitle","hasYTitle","baseLeft","PLATEMAP_CONSTANTS","baseRight","leftMargin","rightMargin","bottomMargin","topMargin","calculateTitleX","calculateAxisDomain","flattenGridData","plotZ","hoverText","plotZMin","xData","yData","colorData","textData","rowIdx","colIdx","zValue","MIN_MARKER_SIZE","SQUARE_SIZE_MULTIPLIER","CIRCLE_SIZE_MULTIPLIER","COLORBAR_SPACE","calculateMarkerSize","width","height","markerShape","plotWidth","plotHeight","cellWidth","cellHeight","cellSize"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react/jsx-runtime"),A=require("plotly.js-dist"),n=require("react"),_=require("../../../hooks/use-plotly-theme.cjs"),S=({dataSeries:u,width:y=1e3,height:k=600,xRange:a,yRange:m,xTitle:p="Columns",yTitle:d="Rows",title:w="Scatter Plot"})=>{const h=n.useRef(null),t=_.usePlotlyTheme(),{xMin:b,xMax:v,yMin:C,yMax:E}=n.useMemo(()=>{let r=Number.MAX_VALUE,e=Number.MIN_VALUE,s=Number.MAX_VALUE,o=Number.MIN_VALUE;u.forEach(z=>{z.x.forEach(f=>{r=Math.min(r,f),e=Math.max(e,f)}),z.y.forEach(f=>{s=Math.min(s,f),o=Math.max(o,f)})});const i=(e-r)*.1,P=(o-s)*.1;return{xMin:r-i,xMax:e+i,yMin:s-P,yMax:o+P}},[u]),c=n.useMemo(()=>a||[b,v],[a,b,v]),l=n.useMemo(()=>m||[C,E],[m,C,E]),M=n.useMemo(()=>{const r=c[1]-c[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(c[0]/e)*e;for(;o<=c[1];)s.push(o),o+=e;return s},[c]),I=n.useMemo(()=>{const r=l[1]-l[0];let e=Math.pow(10,Math.floor(Math.log10(r)));r/e>10&&(e=e*2),r/e<4&&(e=e/2);const s=[];let o=Math.ceil(l[0]/e)*e;for(;o<=l[1];)s.push(o),o+=e;return s},[l]),g=n.useMemo(()=>({tickcolor:t.tickColor,ticklen:12,tickwidth:1,ticks:"outside",tickfont:{size:16,color:t.textColor,family:"Inter, sans-serif",weight:400},linecolor:t.lineColor,linewidth:1,position:0,zeroline:!1}),[t]),x=n.useMemo(()=>({showspikes:!0,spikemode:"across",spikedash:"solid",spikecolor:t.spikeColor,spikethickness:2}),[t]);return n.useEffect(()=>{if(!h.current)return;const r=u.map(i=>({x:i.x,y:i.y,type:"scatter",mode:"markers",name:i.name,marker:{color:i.color,size:10,symbol:"circle"},hovertemplate:`${p}: %{x}<br>${d}: %{y}<extra>${i.name}</extra>`})),e={title:{text:w,font:{size:32,family:"Inter, sans-serif",color:t.textColor}},width:y,height:k,margin:{l:80,r:30,b:80,t:60,pad:10},paper_bgcolor:t.paperBg,plot_bgcolor:t.plotBg,font:{family:"Inter, sans-serif"},dragmode:!1,xaxis:{title:{text:p,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:32},gridcolor:t.gridColor,range:a,autorange:!a,tickmode:"array",tickvals:M,ticktext:M.map(String),showgrid:!0,...x,...g},yaxis:{title:{text:d,font:{size:16,color:t.textSecondary,family:"Inter, sans-serif",weight:400},standoff:30},gridcolor:t.gridColor,range:m,autorange:!m,tickmode:"array",tickvals:I,showgrid:!0,...x,...g},legend:{x:.5,y:-.2,xanchor:"center",yanchor:"top",orientation:"h",font:{size:16,color:t.legendColor,family:"Inter, sans-serif",weight:500}},showlegend:!0,hovermode:"closest"},s={responsive:!0,displayModeBar:!1,displaylogo:!1};A.newPlot(h.current,r,e,s);const o=h.current;return()=>{o&&A.purge(o)}},[u,y,k,a,m,p,d,w,c,l,M,I,g,x,t]),N.jsx("div",{className:"chart-container",children:N.jsx("div",{ref:h,style:{width:"100%",height:"100%"}})})};exports.ScatterGraph=S;
+//# sourceMappingURL=ScatterGraph.cjs.map

package/dist/components/charts/ScatterGraph/ScatterGraph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterGraph.cjs","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  color: string;\n}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  const spikeOptions = useMemo(\n    () => ({\n      showspikes: true,\n      spikemode: \"across\" as const,\n      spikedash: \"solid\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 2,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: series.color,\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width,\n      height,\n      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        ...spikeOptions,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...spikeOptions,\n        ...tickOptions,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, spikeOptions, theme]);\n\n  return (\n    <div className=\"chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","spikeOptions","useEffect","plotData","layout","config","Plotly","plotElement","jsx"],"mappings":"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"}

package/dist/components/charts/ScatterGraph/ScatterGraph.js

@@ -0,0 +1,186 @@
+import { jsx as A } from "react/jsx-runtime";
+import P from "plotly.js-dist";
+import { useRef as _, useMemo as s, useEffect as X } from "react";
+import { usePlotlyTheme as L } from "../../../hooks/use-plotly-theme.js";
+const $ = ({
+  dataSeries: h,
+  width: M = 1e3,
+  height: y = 600,
+  xRange: c,
+  yRange: f,
+  xTitle: d = "Columns",
+  yTitle: u = "Rows",
+  title: w = "Scatter Plot"
+}) => {
+  const p = _(null), o = L(), { xMin: b, xMax: v, yMin: C, yMax: E } = s(() => {
+    let r = Number.MAX_VALUE, t = Number.MIN_VALUE, i = Number.MAX_VALUE, e = Number.MIN_VALUE;
+    h.forEach((N) => {
+      N.x.forEach((m) => {
+        r = Math.min(r, m), t = Math.max(t, m);
+      }), N.y.forEach((m) => {
+        i = Math.min(i, m), e = Math.max(e, m);
+      });
+    });
+    const n = (t - r) * 0.1, z = (e - i) * 0.1;
+    return {
+      xMin: r - n,
+      xMax: t + n,
+      yMin: i - z,
+      yMax: e + z
+    };
+  }, [h]), l = s(
+    () => c || [b, v],
+    [c, b, v]
+  ), a = s(
+    () => f || [C, E],
+    [f, C, E]
+  ), x = s(() => {
+    const r = l[1] - l[0];
+    let t = Math.pow(10, Math.floor(Math.log10(r)));
+    r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
+    const i = [];
+    let e = Math.ceil(l[0] / t) * t;
+    for (; e <= l[1]; )
+      i.push(e), e += t;
+    return i;
+  }, [l]), I = s(() => {
+    const r = a[1] - a[0];
+    let t = Math.pow(10, Math.floor(Math.log10(r)));
+    r / t > 10 && (t = t * 2), r / t < 4 && (t = t / 2);
+    const i = [];
+    let e = Math.ceil(a[0] / t) * t;
+    for (; e <= a[1]; )
+      i.push(e), e += t;
+    return i;
+  }, [a]), g = s(
+    () => ({
+      tickcolor: o.tickColor,
+      ticklen: 12,
+      tickwidth: 1,
+      ticks: "outside",
+      tickfont: {
+        size: 16,
+        color: o.textColor,
+        family: "Inter, sans-serif",
+        weight: 400
+      },
+      linecolor: o.lineColor,
+      linewidth: 1,
+      position: 0,
+      zeroline: !1
+    }),
+    [o]
+  ), k = s(
+    () => ({
+      showspikes: !0,
+      spikemode: "across",
+      spikedash: "solid",
+      spikecolor: o.spikeColor,
+      spikethickness: 2
+    }),
+    [o]
+  );
+  return X(() => {
+    if (!p.current) return;
+    const r = h.map((n) => ({
+      x: n.x,
+      y: n.y,
+      type: "scatter",
+      mode: "markers",
+      name: n.name,
+      marker: {
+        color: n.color,
+        size: 10,
+        symbol: "circle"
+      },
+      hovertemplate: `${d}: %{x}<br>${u}: %{y}<extra>${n.name}</extra>`
+    })), t = {
+      title: {
+        text: w,
+        font: {
+          size: 32,
+          family: "Inter, sans-serif",
+          color: o.textColor
+        }
+      },
+      width: M,
+      height: y,
+      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },
+      paper_bgcolor: o.paperBg,
+      plot_bgcolor: o.plotBg,
+      font: {
+        family: "Inter, sans-serif"
+      },
+      dragmode: !1,
+      xaxis: {
+        title: {
+          text: d,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: "Inter, sans-serif",
+            weight: 400
+          },
+          standoff: 32
+        },
+        gridcolor: o.gridColor,
+        range: c,
+        autorange: !c,
+        tickmode: "array",
+        tickvals: x,
+        ticktext: x.map(String),
+        showgrid: !0,
+        ...k,
+        ...g
+      },
+      yaxis: {
+        title: {
+          text: u,
+          font: {
+            size: 16,
+            color: o.textSecondary,
+            family: "Inter, sans-serif",
+            weight: 400
+          },
+          standoff: 30
+        },
+        gridcolor: o.gridColor,
+        range: f,
+        autorange: !f,
+        tickmode: "array",
+        tickvals: I,
+        showgrid: !0,
+        ...k,
+        ...g
+      },
+      legend: {
+        x: 0.5,
+        y: -0.2,
+        xanchor: "center",
+        yanchor: "top",
+        orientation: "h",
+        font: {
+          size: 16,
+          color: o.legendColor,
+          family: "Inter, sans-serif",
+          weight: 500
+        }
+      },
+      showlegend: !0,
+      hovermode: "closest"
+    }, i = {
+      responsive: !0,
+      displayModeBar: !1,
+      displaylogo: !1
+    };
+    P.newPlot(p.current, r, t, i);
+    const e = p.current;
+    return () => {
+      e && P.purge(e);
+    };
+  }, [h, M, y, c, f, d, u, w, l, a, x, I, g, k, o]), /* @__PURE__ */ A("div", { className: "chart-container", children: /* @__PURE__ */ A("div", { ref: p, style: { width: "100%", height: "100%" } }) });
+};
+export {
+  $ as ScatterGraph
+};
+//# sourceMappingURL=ScatterGraph.js.map

package/dist/components/charts/ScatterGraph/ScatterGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterGraph.js","sources":["../../../../src/components/charts/ScatterGraph/ScatterGraph.tsx"],"sourcesContent":["import Plotly from \"plotly.js-dist\";\nimport React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\n\ninterface ScatterDataPoint {\n  x: number;\n  y: number;\n  additionalInfo?: Record<string, string | number>;\n}\n\ninterface ScatterDataSeries {\n  x: number[];\n  y: number[];\n  name: string;\n  color: string;\n}\n\ninterface ScatterGraphProps {\n  dataSeries: ScatterDataSeries[];\n  width?: number;\n  height?: number;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  xTitle?: string;\n  yTitle?: string;\n  title?: string;\n}\n\nconst ScatterGraph: React.FC<ScatterGraphProps> = ({\n  dataSeries,\n  width = 1000,\n  height = 600,\n  xRange,\n  yRange,\n  xTitle = \"Columns\",\n  yTitle = \"Rows\",\n  title = \"Scatter Plot\",\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n\n  const { xMin, xMax, yMin, yMax } = useMemo(() => {\n    let minX = Number.MAX_VALUE;\n    let maxX = Number.MIN_VALUE;\n    let minY = Number.MAX_VALUE;\n    let maxY = Number.MIN_VALUE;\n\n    dataSeries.forEach((series) => {\n      series.x.forEach((x) => {\n        minX = Math.min(minX, x);\n        maxX = Math.max(maxX, x);\n      });\n      series.y.forEach((y) => {\n        minY = Math.min(minY, y);\n        maxY = Math.max(maxY, y);\n      });\n    });\n\n    const xPadding = (maxX - minX) * 0.1;\n    const yPadding = (maxY - minY) * 0.1;\n\n    return {\n      xMin: minX - xPadding,\n      xMax: maxX + xPadding,\n      yMin: minY - yPadding,\n      yMax: maxY + yPadding,\n    };\n  }, [dataSeries]);\n\n  const effectiveXRange = useMemo(\n    () => xRange || [xMin, xMax],\n    [xRange, xMin, xMax],\n  );\n\n  const effectiveYRange = useMemo(\n    () => yRange || [yMin, yMax],\n    [yRange, yMin, yMax],\n  );\n\n  const xTicks = useMemo(() => {\n    const range = effectiveXRange[1] - effectiveXRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveXRange[0] / step) * step;\n    while (current <= effectiveXRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveXRange]);\n\n  const yTicks = useMemo(() => {\n    const range = effectiveYRange[1] - effectiveYRange[0];\n    let step = Math.pow(10, Math.floor(Math.log10(range)));\n\n    if (range / step > 10) step = step * 2;\n    if (range / step < 4) step = step / 2;\n\n    const ticks = [];\n    let current = Math.ceil(effectiveYRange[0] / step) * step;\n    while (current <= effectiveYRange[1]) {\n      ticks.push(current);\n      current += step;\n    }\n    return ticks;\n  }, [effectiveYRange]);\n\n  const tickOptions = useMemo(\n    () => ({\n      tickcolor: theme.tickColor,\n      ticklen: 12,\n      tickwidth: 1,\n      ticks: \"outside\" as const,\n      tickfont: {\n        size: 16,\n        color: theme.textColor,\n        family: \"Inter, sans-serif\",\n        weight: 400,\n      },\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      position: 0,\n      zeroline: false,\n    }),\n    [theme],\n  );\n\n  const spikeOptions = useMemo(\n    () => ({\n      showspikes: true,\n      spikemode: \"across\" as const,\n      spikedash: \"solid\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 2,\n    }),\n    [theme],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current) return;\n\n    const plotData = dataSeries.map((series) => ({\n      x: series.x,\n      y: series.y,\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      name: series.name,\n      marker: {\n        color: series.color,\n        size: 10,\n        symbol: \"circle\" as const,\n      },\n      hovertemplate: `${xTitle}: %{x}<br>${yTitle}: %{y}<extra>${series.name}</extra>`,\n    }));\n\n    const layout = {\n      title: {\n        text: title,\n        font: {\n          size: 32,\n          family: \"Inter, sans-serif\",\n          color: theme.textColor,\n        },\n      },\n      width,\n      height,\n      margin: { l: 80, r: 30, b: 80, t: 60, pad: 10 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: \"Inter, sans-serif\",\n      },\n      dragmode: false as const,\n      xaxis: {\n        title: {\n          text: xTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 32,\n        },\n        gridcolor: theme.gridColor,\n        range: xRange,\n        autorange: !xRange,\n        tickmode: \"array\" as const,\n        tickvals: xTicks,\n        ticktext: xTicks.map(String),\n        showgrid: true,\n        ...spikeOptions,\n        ...tickOptions,\n      },\n      yaxis: {\n        title: {\n          text: yTitle,\n          font: {\n            size: 16,\n            color: theme.textSecondary,\n            family: \"Inter, sans-serif\",\n            weight: 400,\n          },\n          standoff: 30,\n        },\n        gridcolor: theme.gridColor,\n        range: yRange,\n        autorange: !yRange,\n        tickmode: \"array\" as const,\n        tickvals: yTicks,\n        showgrid: true,\n        ...spikeOptions,\n        ...tickOptions,\n      },\n      legend: {\n        x: 0.5,\n        y: -0.2,\n        xanchor: \"center\" as const,\n        yanchor: \"top\" as const,\n        orientation: \"h\" as const,\n        font: {\n          size: 16,\n          color: theme.legendColor,\n          family: \"Inter, sans-serif\",\n          weight: 500,\n        },\n      },\n      showlegend: true,\n      hovermode: \"closest\" as const,\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n    };\n\n    Plotly.newPlot(plotRef.current, plotData, layout, config);\n\n    // Capture ref value for cleanup\n    const plotElement = plotRef.current;\n\n    return () => {\n      if (plotElement) {\n        Plotly.purge(plotElement);\n      }\n    };\n  }, [dataSeries, width, height, xRange, yRange, xTitle, yTitle, title, effectiveXRange, effectiveYRange, xTicks, yTicks, tickOptions, spikeOptions, theme]);\n\n  return (\n    <div className=\"chart-container\">\n      <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n    </div>\n  );\n};\n\nexport { ScatterGraph };\nexport type { ScatterDataPoint, ScatterDataSeries, ScatterGraphProps };\n"],"names":["ScatterGraph","dataSeries","width","height","xRange","yRange","xTitle","yTitle","title","plotRef","useRef","theme","usePlotlyTheme","xMin","xMax","yMin","yMax","useMemo","minX","maxX","minY","maxY","series","x","y","xPadding","yPadding","effectiveXRange","effectiveYRange","xTicks","range","step","ticks","current","yTicks","tickOptions","spikeOptions","useEffect","plotData","layout","config","Plotly","plotElement","jsx"],"mappings":";;;;AA6BA,MAAMA,IAA4C,CAAC;AAAA,EACjD,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AACV,MAAM;AACJ,QAAMC,IAAUC,EAAuB,IAAI,GACrCC,IAAQC,EAAA,GAER,EAAE,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,EAAA,IAASC,EAAQ,MAAM;AAC/C,QAAIC,IAAO,OAAO,WACdC,IAAO,OAAO,WACdC,IAAO,OAAO,WACdC,IAAO,OAAO;AAElB,IAAApB,EAAW,QAAQ,CAACqB,MAAW;AAC7B,MAAAA,EAAO,EAAE,QAAQ,CAACC,MAAM;AACtB,QAAAL,IAAO,KAAK,IAAIA,GAAMK,CAAC,GACvBJ,IAAO,KAAK,IAAIA,GAAMI,CAAC;AAAA,MACzB,CAAC,GACDD,EAAO,EAAE,QAAQ,CAACE,MAAM;AACtB,QAAAJ,IAAO,KAAK,IAAIA,GAAMI,CAAC,GACvBH,IAAO,KAAK,IAAIA,GAAMG,CAAC;AAAA,MACzB,CAAC;AAAA,IACH,CAAC;AAED,UAAMC,KAAYN,IAAOD,KAAQ,KAC3BQ,KAAYL,IAAOD,KAAQ;AAEjC,WAAO;AAAA,MACL,MAAMF,IAAOO;AAAA,MACb,MAAMN,IAAOM;AAAA,MACb,MAAML,IAAOM;AAAA,MACb,MAAML,IAAOK;AAAA,IAAA;AAAA,EAEjB,GAAG,CAACzB,CAAU,CAAC,GAET0B,IAAkBV;AAAA,IACtB,MAAMb,KAAU,CAACS,GAAMC,CAAI;AAAA,IAC3B,CAACV,GAAQS,GAAMC,CAAI;AAAA,EAAA,GAGfc,IAAkBX;AAAA,IACtB,MAAMZ,KAAU,CAACU,GAAMC,CAAI;AAAA,IAC3B,CAACX,GAAQU,GAAMC,CAAI;AAAA,EAAA,GAGfa,IAASZ,EAAQ,MAAM;AAC3B,UAAMa,IAAQH,EAAgB,CAAC,IAAIA,EAAgB,CAAC;AACpD,QAAII,IAAO,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,MAAMD,CAAK,CAAC,CAAC;AAErD,IAAIA,IAAQC,IAAO,OAAIA,IAAOA,IAAO,IACjCD,IAAQC,IAAO,MAAGA,IAAOA,IAAO;AAEpC,UAAMC,IAAQ,CAAA;AACd,QAAIC,IAAU,KAAK,KAAKN,EAAgB,CAAC,IAAII,CAAI,IAAIA;AACrD,WAAOE,KAAWN,EAAgB,CAAC;AACjC,MAAAK,EAAM,KAAKC,CAAO,GAClBA,KAAWF;AAEb,WAAOC;AAAA,EACT,GAAG,CAACL,CAAe,CAAC,GAEdO,IAASjB,EAAQ,MAAM;AAC3B,UAAMa,IAAQF,EAAgB,CAAC,IAAIA,EAAgB,CAAC;AACpD,QAAIG,IAAO,KAAK,IAAI,IAAI,KAAK,MAAM,KAAK,MAAMD,CAAK,CAAC,CAAC;AAErD,IAAIA,IAAQC,IAAO,OAAIA,IAAOA,IAAO,IACjCD,IAAQC,IAAO,MAAGA,IAAOA,IAAO;AAEpC,UAAMC,IAAQ,CAAA;AACd,QAAIC,IAAU,KAAK,KAAKL,EAAgB,CAAC,IAAIG,CAAI,IAAIA;AACrD,WAAOE,KAAWL,EAAgB,CAAC;AACjC,MAAAI,EAAM,KAAKC,CAAO,GAClBA,KAAWF;AAEb,WAAOC;AAAA,EACT,GAAG,CAACJ,CAAe,CAAC,GAEdO,IAAclB;AAAA,IAClB,OAAO;AAAA,MACL,WAAWN,EAAM;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAOA,EAAM;AAAA,QACb,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA,MAEV,WAAWA,EAAM;AAAA,MACjB,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAK;AAAA,EAAA,GAGFyB,IAAenB;AAAA,IACnB,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAYN,EAAM;AAAA,MAClB,gBAAgB;AAAA,IAAA;AAAA,IAElB,CAACA,CAAK;AAAA,EAAA;AAGR,SAAA0B,EAAU,MAAM;AACd,QAAI,CAAC5B,EAAQ,QAAS;AAEtB,UAAM6B,IAAWrC,EAAW,IAAI,CAACqB,OAAY;AAAA,MAC3C,GAAGA,EAAO;AAAA,MACV,GAAGA,EAAO;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAMA,EAAO;AAAA,MACb,QAAQ;AAAA,QACN,OAAOA,EAAO;AAAA,QACd,MAAM;AAAA,QACN,QAAQ;AAAA,MAAA;AAAA,MAEV,eAAe,GAAGhB,CAAM,aAAaC,CAAM,gBAAgBe,EAAO,IAAI;AAAA,IAAA,EACtE,GAEIiB,IAAS;AAAA,MACb,OAAO;AAAA,QACL,MAAM/B;AAAA,QACN,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAOG,EAAM;AAAA,QAAA;AAAA,MACf;AAAA,MAEF,OAAAT;AAAA,MACA,QAAAC;AAAA,MACA,QAAQ,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,KAAK,GAAA;AAAA,MAC3C,eAAeQ,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,MAAM;AAAA,QACJ,QAAQ;AAAA,MAAA;AAAA,MAEV,UAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAML;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOK,EAAM;AAAA,YACb,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWA,EAAM;AAAA,QACjB,OAAOP;AAAA,QACP,WAAW,CAACA;AAAA,QACZ,UAAU;AAAA,QACV,UAAUyB;AAAA,QACV,UAAUA,EAAO,IAAI,MAAM;AAAA,QAC3B,UAAU;AAAA,QACV,GAAGO;AAAA,QACH,GAAGD;AAAA,MAAA;AAAA,MAEL,OAAO;AAAA,QACL,OAAO;AAAA,UACL,MAAM5B;AAAA,UACN,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAOI,EAAM;AAAA,YACb,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,UAEV,UAAU;AAAA,QAAA;AAAA,QAEZ,WAAWA,EAAM;AAAA,QACjB,OAAON;AAAA,QACP,WAAW,CAACA;AAAA,QACZ,UAAU;AAAA,QACV,UAAU6B;AAAA,QACV,UAAU;AAAA,QACV,GAAGE;AAAA,QACH,GAAGD;AAAA,MAAA;AAAA,MAEL,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,SAAS;AAAA,QACT,aAAa;AAAA,QACb,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,OAAOxB,EAAM;AAAA,UACb,QAAQ;AAAA,UACR,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF,YAAY;AAAA,MACZ,WAAW;AAAA,IAAA,GAGP6B,IAAS;AAAA,MACb,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IAAA;AAGf,IAAAC,EAAO,QAAQhC,EAAQ,SAAS6B,GAAUC,GAAQC,CAAM;AAGxD,UAAME,IAAcjC,EAAQ;AAE5B,WAAO,MAAM;AACX,MAAIiC,KACFD,EAAO,MAAMC,CAAW;AAAA,IAE5B;AAAA,EACF,GAAG,CAACzC,GAAYC,GAAOC,GAAQC,GAAQC,GAAQC,GAAQC,GAAQC,GAAOmB,GAAiBC,GAAiBC,GAAQK,GAAQC,GAAaC,GAAczB,CAAK,CAAC,GAGvJ,gBAAAgC,EAAC,OAAA,EAAI,WAAU,mBACb,4BAAC,OAAA,EAAI,KAAKlC,GAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA,GAAU,GAC/D;AAEJ;"}

package/dist/components/composed/AppHeader/AppHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),s=require("lucide-react"),a=require("../../ui/avatar.cjs"),n=require("../../ui/button.cjs"),i=require("../../ui/separator.cjs"),j=({hostname:r,userProfile:t,onHomeClick:c,onSettingsClick:l,onUserProfileClick:o})=>{const x=m=>m.split(" ").map(d=>d.charAt(0)).join("").toUpperCase().substring(0,2);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex items-center justify-between h-auto w-full px-7 py-4 box-border",children:[e.jsx("div",{className:"text-lg font-medium leading-7",children:r}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(n.Button,{variant:"outline",size:"icon-sm",onClick:c,"aria-label":"Home",children:e.jsx(s.Home,{size:20})}),e.jsx(n.Button,{variant:"outline",size:"icon-sm",onClick:l,"aria-label":"Settings",children:e.jsx(s.Settings,{size:20})}),e.jsx(i.Separator,{orientation:"vertical"}),e.jsxs(a.Avatar,{onClick:o,children:[e.jsx(a.AvatarImage,{src:t.avatar,alt:t.name}),e.jsx(a.AvatarFallback,{children:x(t.name)})]}),e.jsx("div",{className:"text-base font-normal leading-6",children:t.name})," "]})]}),e.jsx(i.Separator,{})]})};module.exports=j;
+//# sourceMappingURL=AppHeader.cjs.map

package/dist/components/composed/AppHeader/AppHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.cjs","sources":["../../../../src/components/composed/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Settings, Home } from \"lucide-react\";\nimport React from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\ninterface UserProfileProps {\n  name: string;\n  avatar?: string;\n}\n\nexport interface AppHeaderProps {\n  hostname: string;\n  userProfile: UserProfileProps;\n  onHomeClick?: () => void;\n  onSettingsClick?: () => void;\n  onUserProfileClick?: () => void;\n}\n\nconst AppHeader: React.FC<AppHeaderProps> = ({\n  hostname,\n  userProfile,\n  onHomeClick,\n  onSettingsClick,\n  onUserProfileClick,\n}) => {\n  // Get initials for avatar placeholder if no image is provided\n  const getInitials = (name: string) => {\n    return name\n      .split(\" \")\n      .map((part) => part.charAt(0))\n      .join(\"\")\n      .toUpperCase()\n      .substring(0, 2);\n  };\n\n  return (\n    <>\n      <div className=\"flex items-center justify-between h-auto w-full px-7 py-4 box-border\">\n        <div className=\"text-lg font-medium leading-7\">{hostname}</div>\n\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"outline\" size=\"icon-sm\" onClick={onHomeClick} aria-label=\"Home\">\n            <Home size={20} />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-sm\" onClick={onSettingsClick} aria-label=\"Settings\">\n            <Settings size={20} />\n          </Button>\n          <Separator orientation=\"vertical\" />\n          <Avatar onClick={onUserProfileClick}>\n            <AvatarImage src={userProfile.avatar} alt={userProfile.name} />\n            <AvatarFallback>{getInitials(userProfile.name)}</AvatarFallback>\n          </Avatar>\n          <div className=\"text-base font-normal leading-6\">{userProfile.name}</div>{\" \"}\n        </div>\n      </div>\n      <Separator />\n    </>\n  );\n};\n\nexport default AppHeader;\n"],"names":["AppHeader","hostname","userProfile","onHomeClick","onSettingsClick","onUserProfileClick","getInitials","name","part","jsxs","Fragment","jsx","Button","Home","Settings","Separator","Avatar","AvatarImage","AvatarFallback"],"mappings":"kLAoBMA,EAAsC,CAAC,CAC3C,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,mBAAAC,CACF,IAAM,CAEJ,MAAMC,EAAeC,GACZA,EACJ,MAAM,GAAG,EACT,IAAKC,GAASA,EAAK,OAAO,CAAC,CAAC,EAC5B,KAAK,EAAE,EACP,cACA,UAAU,EAAG,CAAC,EAGnB,OACEC,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAD,EAAAA,KAAC,MAAA,CAAI,UAAU,uEACb,SAAA,CAAAE,EAAAA,IAAC,MAAA,CAAI,UAAU,gCAAiC,SAAAV,EAAS,EAEzDQ,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAACC,EAAAA,OAAA,CAAO,QAAQ,UAAU,KAAK,UAAU,QAAST,EAAa,aAAW,OACxE,SAAAQ,MAACE,EAAAA,KAAA,CAAK,KAAM,GAAI,EAClB,EACAF,EAAAA,IAACC,EAAAA,OAAA,CAAO,QAAQ,UAAU,KAAK,UAAU,QAASR,EAAiB,aAAW,WAC5E,SAAAO,MAACG,EAAAA,SAAA,CAAS,KAAM,GAAI,EACtB,EACAH,EAAAA,IAACI,EAAAA,UAAA,CAAU,YAAY,UAAA,CAAW,EAClCN,EAAAA,KAACO,EAAAA,OAAA,CAAO,QAASX,EACf,SAAA,CAAAM,MAACM,EAAAA,aAAY,IAAKf,EAAY,OAAQ,IAAKA,EAAY,KAAM,EAC7DS,EAAAA,IAACO,EAAAA,eAAA,CAAgB,SAAAZ,EAAYJ,EAAY,IAAI,CAAA,CAAE,CAAA,EACjD,EACAS,EAAAA,IAAC,MAAA,CAAI,UAAU,kCAAmC,WAAY,KAAK,EAAO,GAAA,CAAA,CAC5E,CAAA,EACF,QACCI,EAAAA,UAAA,CAAA,CAAU,CAAA,EACb,CAEJ"}

package/dist/components/composed/AppHeader/AppHeader.js

@@ -0,0 +1,35 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { Home as h, Settings as v } from "lucide-react";
+import { Avatar as g, AvatarImage as f, AvatarFallback as x } from "../../ui/avatar.js";
+import { Button as i } from "../../ui/button.js";
+import { Separator as n } from "../../ui/separator.js";
+const z = ({
+  hostname: r,
+  userProfile: a,
+  onHomeClick: l,
+  onSettingsClick: o,
+  onUserProfileClick: m
+}) => {
+  const s = (c) => c.split(" ").map((d) => d.charAt(0)).join("").toUpperCase().substring(0, 2);
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between h-auto w-full px-7 py-4 box-border", children: [
+      /* @__PURE__ */ e("div", { className: "text-lg font-medium leading-7", children: r }),
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e(i, { variant: "outline", size: "icon-sm", onClick: l, "aria-label": "Home", children: /* @__PURE__ */ e(h, { size: 20 }) }),
+        /* @__PURE__ */ e(i, { variant: "outline", size: "icon-sm", onClick: o, "aria-label": "Settings", children: /* @__PURE__ */ e(v, { size: 20 }) }),
+        /* @__PURE__ */ e(n, { orientation: "vertical" }),
+        /* @__PURE__ */ t(g, { onClick: m, children: [
+          /* @__PURE__ */ e(f, { src: a.avatar, alt: a.name }),
+          /* @__PURE__ */ e(x, { children: s(a.name) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "text-base font-normal leading-6", children: a.name }),
+        " "
+      ] })
+    ] }),
+    /* @__PURE__ */ e(n, {})
+  ] });
+};
+export {
+  z as default
+};
+//# sourceMappingURL=AppHeader.js.map

package/dist/components/composed/AppHeader/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../../../src/components/composed/AppHeader/AppHeader.tsx"],"sourcesContent":["import { Settings, Home } from \"lucide-react\";\nimport React from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\ninterface UserProfileProps {\n  name: string;\n  avatar?: string;\n}\n\nexport interface AppHeaderProps {\n  hostname: string;\n  userProfile: UserProfileProps;\n  onHomeClick?: () => void;\n  onSettingsClick?: () => void;\n  onUserProfileClick?: () => void;\n}\n\nconst AppHeader: React.FC<AppHeaderProps> = ({\n  hostname,\n  userProfile,\n  onHomeClick,\n  onSettingsClick,\n  onUserProfileClick,\n}) => {\n  // Get initials for avatar placeholder if no image is provided\n  const getInitials = (name: string) => {\n    return name\n      .split(\" \")\n      .map((part) => part.charAt(0))\n      .join(\"\")\n      .toUpperCase()\n      .substring(0, 2);\n  };\n\n  return (\n    <>\n      <div className=\"flex items-center justify-between h-auto w-full px-7 py-4 box-border\">\n        <div className=\"text-lg font-medium leading-7\">{hostname}</div>\n\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"outline\" size=\"icon-sm\" onClick={onHomeClick} aria-label=\"Home\">\n            <Home size={20} />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-sm\" onClick={onSettingsClick} aria-label=\"Settings\">\n            <Settings size={20} />\n          </Button>\n          <Separator orientation=\"vertical\" />\n          <Avatar onClick={onUserProfileClick}>\n            <AvatarImage src={userProfile.avatar} alt={userProfile.name} />\n            <AvatarFallback>{getInitials(userProfile.name)}</AvatarFallback>\n          </Avatar>\n          <div className=\"text-base font-normal leading-6\">{userProfile.name}</div>{\" \"}\n        </div>\n      </div>\n      <Separator />\n    </>\n  );\n};\n\nexport default AppHeader;\n"],"names":["AppHeader","hostname","userProfile","onHomeClick","onSettingsClick","onUserProfileClick","getInitials","name","part","jsxs","Fragment","jsx","Button","Home","Settings","Separator","Avatar","AvatarImage","AvatarFallback"],"mappings":";;;;;AAoBA,MAAMA,IAAsC,CAAC;AAAA,EAC3C,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AACF,MAAM;AAEJ,QAAMC,IAAc,CAACC,MACZA,EACJ,MAAM,GAAG,EACT,IAAI,CAACC,MAASA,EAAK,OAAO,CAAC,CAAC,EAC5B,KAAK,EAAE,EACP,cACA,UAAU,GAAG,CAAC;AAGnB,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wEACb,UAAA;AAAA,MAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAiC,UAAAV,GAAS;AAAA,MAEzD,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAE,EAACC,GAAA,EAAO,SAAQ,WAAU,MAAK,WAAU,SAAST,GAAa,cAAW,QACxE,UAAA,gBAAAQ,EAACE,GAAA,EAAK,MAAM,IAAI,GAClB;AAAA,QACA,gBAAAF,EAACC,GAAA,EAAO,SAAQ,WAAU,MAAK,WAAU,SAASR,GAAiB,cAAW,YAC5E,UAAA,gBAAAO,EAACG,GAAA,EAAS,MAAM,IAAI,GACtB;AAAA,QACA,gBAAAH,EAACI,GAAA,EAAU,aAAY,WAAA,CAAW;AAAA,QAClC,gBAAAN,EAACO,GAAA,EAAO,SAASX,GACf,UAAA;AAAA,UAAA,gBAAAM,EAACM,KAAY,KAAKf,EAAY,QAAQ,KAAKA,EAAY,MAAM;AAAA,UAC7D,gBAAAS,EAACO,GAAA,EAAgB,UAAAZ,EAAYJ,EAAY,IAAI,EAAA,CAAE;AAAA,QAAA,GACjD;AAAA,QACA,gBAAAS,EAAC,OAAA,EAAI,WAAU,mCAAmC,YAAY,MAAK;AAAA,QAAO;AAAA,MAAA,EAAA,CAC5E;AAAA,IAAA,GACF;AAAA,sBACCI,GAAA,CAAA,CAAU;AAAA,EAAA,GACb;AAEJ;"}

package/dist/components/composed/AppLayout/AppLayout.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");;/* empty css                 */const e=require("lucide-react"),k=require("react"),h=require("../AppHeader/AppHeader.cjs"),S=require("../Navbar/Navbar.cjs"),p=require("../Sidebar/Sidebar.cjs"),C=({userProfile:c,hostname:o,organization:t,children:l})=>{const n=[{icon:e.Search,label:"Search"},{icon:e.SearchCode,label:"SQL Search"},{icon:e.Lamp,label:"Projects"},{icon:e.Workflow,label:"Pipelines"},{icon:e.Monitor,label:"Data & AI Workspace"},{icon:e.Box,label:"Artifacts"},{icon:e.Database,label:"Data Sources"},{icon:e.PieChart,label:"Health Monitoring"},{icon:e.CheckCheck,label:"Bulk Actions"},{icon:e.Code,label:"Attribute Management"},{icon:e.Settings,label:"Administration"}],[a,s]=k.useState("Pipelines"),r=b=>{s(b)},d=()=>{console.log("Home clicked")},u=()=>{console.log("Settings clicked")},m=()=>{console.log("User profile clicked")};return i.jsxs("div",{className:"app-layout",children:[i.jsx(S,{organization:t}),i.jsxs("div",{className:"content-container",children:[i.jsx(p,{items:n,activeItem:a,onItemClick:r}),i.jsxs("div",{className:"main-content",children:[i.jsx(h,{hostname:o,userProfile:c,onHomeClick:d,onSettingsClick:u,onUserProfileClick:m}),i.jsx("div",{className:"main-layout",children:l})]})]})]})};exports.AppLayout=C;
+//# sourceMappingURL=AppLayout.cjs.map

package/dist/components/composed/AppLayout/AppLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.cjs","sources":["../../../../src/components/composed/AppLayout/AppLayout.tsx"],"sourcesContent":["import \"./AppLayout.scss\";\nimport {\n  Box,\n  CheckCheck,\n  Code,\n  Database,\n  Lamp,\n  Monitor,\n  PieChart,\n  Search,\n  SearchCode,\n  Settings,\n  Workflow,\n} from \"lucide-react\";\nimport React, { useState } from \"react\";\n\nimport { AppHeader } from \"@/components/composed/AppHeader\";\nimport { Navbar } from \"@/components/composed/Navbar\";\nimport { AppSidebar } from \"@/components/composed/Sidebar\";\n\ninterface AppLayoutProps {\n  userProfile: {\n    name: string;\n    avatar?: string;\n  };\n  hostname: string;\n  organization: {\n    name: string;\n    subtext?: string;\n    logo?: React.ReactNode;\n  };\n  children?: React.ReactNode;\n}\n\nconst AppLayout: React.FC<AppLayoutProps> = ({\n  userProfile,\n  hostname,\n  organization,\n  children,\n}) => {\n  // Define sidebar items\n  const sidebarItems = [\n    { icon: Search, label: \"Search\" },\n    { icon: SearchCode, label: \"SQL Search\" },\n    { icon: Lamp, label: \"Projects\" },\n    { icon: Workflow, label: \"Pipelines\" },\n    { icon: Monitor, label: \"Data & AI Workspace\" },\n    { icon: Box, label: \"Artifacts\" },\n    { icon: Database, label: \"Data Sources\" },\n    { icon: PieChart, label: \"Health Monitoring\" },\n    { icon: CheckCheck, label: \"Bulk Actions\" },\n    { icon: Code, label: \"Attribute Management\" },\n    { icon: Settings, label: \"Administration\" },\n  ];\n\n  // State hooks\n  const [activeItem, setActiveItem] = useState(\"Pipelines\");\n\n  // Handlers\n  const handleSidebarItemClick = (label: string) => {\n    setActiveItem(label);\n  };\n\n  const handleHomeClick = () => {\n    console.log(\"Home clicked\");\n  };\n\n  const handleSettingsClick = () => {\n    console.log(\"Settings clicked\");\n  };\n\n  const handleUserProfileClick = () => {\n    console.log(\"User profile clicked\");\n  };\n\n  return (\n    <div className=\"app-layout\">\n      <Navbar organization={organization} />\n\n      <div className=\"content-container\">\n        <AppSidebar\n          items={sidebarItems}\n          activeItem={activeItem}\n          onItemClick={handleSidebarItemClick}\n        />\n\n        <div className=\"main-content\">\n          <AppHeader\n            hostname={hostname}\n            userProfile={userProfile}\n            onHomeClick={handleHomeClick}\n            onSettingsClick={handleSettingsClick}\n            onUserProfileClick={handleUserProfileClick}\n          />\n\n          <div className=\"main-layout\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport { AppLayout };\nexport type { AppLayoutProps };\n"],"names":["AppLayout","userProfile","hostname","organization","children","sidebarItems","Search","SearchCode","Lamp","Workflow","Monitor","Box","Database","PieChart","CheckCheck","Code","Settings","activeItem","setActiveItem","useState","handleSidebarItemClick","label","handleHomeClick","handleSettingsClick","handleUserProfileClick","jsxs","jsx","Navbar","AppSidebar","AppHeader"],"mappings":"sTAkCMA,EAAsC,CAAC,CAC3C,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAM,CAEJ,MAAMC,EAAe,CACnB,CAAE,KAAMC,EAAAA,OAAQ,MAAO,QAAA,EACvB,CAAE,KAAMC,EAAAA,WAAY,MAAO,YAAA,EAC3B,CAAE,KAAMC,EAAAA,KAAM,MAAO,UAAA,EACrB,CAAE,KAAMC,EAAAA,SAAU,MAAO,WAAA,EACzB,CAAE,KAAMC,EAAAA,QAAS,MAAO,qBAAA,EACxB,CAAE,KAAMC,EAAAA,IAAK,MAAO,WAAA,EACpB,CAAE,KAAMC,EAAAA,SAAU,MAAO,cAAA,EACzB,CAAE,KAAMC,EAAAA,SAAU,MAAO,mBAAA,EACzB,CAAE,KAAMC,EAAAA,WAAY,MAAO,cAAA,EAC3B,CAAE,KAAMC,EAAAA,KAAM,MAAO,sBAAA,EACrB,CAAE,KAAMC,WAAU,MAAO,gBAAA,CAAiB,EAItC,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,WAAW,EAGlDC,EAA0BC,GAAkB,CAChDH,EAAcG,CAAK,CACrB,EAEMC,EAAkB,IAAM,CAC5B,QAAQ,IAAI,cAAc,CAC5B,EAEMC,EAAsB,IAAM,CAChC,QAAQ,IAAI,kBAAkB,CAChC,EAEMC,EAAyB,IAAM,CACnC,QAAQ,IAAI,sBAAsB,CACpC,EAEA,OACEC,EAAAA,KAAC,MAAA,CAAI,UAAU,aACb,SAAA,CAAAC,MAACC,GAAO,aAAAxB,EAA4B,EAEpCsB,EAAAA,KAAC,MAAA,CAAI,UAAU,oBACb,SAAA,CAAAC,EAAAA,IAACE,EAAA,CACC,MAAOvB,EACP,WAAAY,EACA,YAAaG,CAAA,CAAA,EAGfK,EAAAA,KAAC,MAAA,CAAI,UAAU,eACb,SAAA,CAAAC,EAAAA,IAACG,EAAA,CACC,SAAA3B,EACA,YAAAD,EACA,YAAaqB,EACb,gBAAiBC,EACjB,mBAAoBC,CAAA,CAAA,EAGtBE,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAtB,CAAA,CAAS,CAAA,CAAA,CACzC,CAAA,CAAA,CACF,CAAA,EACF,CAEJ"}