@schandlergarcia/sf-web-components 1.0.0

package/dist/components/library/charts/D3ChartTemplates.js

@@ -0,0 +1,44 @@
+import * as e from "d3";
+function C(n) {
+  e.select(n).selectAll("*").remove();
+}
+const F = {
+  lineChart(n, l, c, w = {}) {
+    const {
+      xKey: s = "x",
+      yKey: a = "y",
+      margin: r = { top: 12, right: 16, bottom: 28, left: 40 },
+      stroke: k = "#6366F1",
+      strokeWidth: b = 2,
+      showAxes: $ = !0,
+      showGrid: A = !0
+    } = w;
+    C(n);
+    const p = c.width, m = c.height, h = Math.max(0, p - r.left - r.right), i = Math.max(0, m - r.top - r.bottom), d = e.select(n).attr("viewBox", `0 0 ${p} ${m}`).append("g").attr("transform", `translate(${r.left},${r.top})`), x = l.map((t) => t?.[s]).filter((t) => t != null), f = l.map((t) => t?.[a]).filter((t) => t != null), g = e.extent(x), u = e.extent(f), y = e.scaleLinear().domain(g).nice().range([0, h]), o = e.scaleLinear().domain(u).nice().range([i, 0]);
+    A && d.append("g").attr("class", "grid").call(e.axisLeft(o).ticks(5).tickSize(-h).tickFormat("")).call((t) => t.selectAll("line").attr("stroke", "currentColor").attr("opacity", 0.12)).call((t) => t.selectAll("path").attr("stroke", "none"));
+    const B = e.line().x((t) => y(t[s])).y((t) => o(t[a])).defined((t) => t?.[s] != null && t?.[a] != null);
+    d.append("path").datum(l).attr("fill", "none").attr("stroke", k).attr("stroke-width", b).attr("d", B), $ && (d.append("g").attr("transform", `translate(0,${i})`).call(e.axisBottom(y).ticks(6)).call((t) => t.selectAll("text").attr("font-size", 10)), d.append("g").call(e.axisLeft(o).ticks(5)).call((t) => t.selectAll("text").attr("font-size", 10)));
+  },
+  groupedBarChart(n, l, c, w = {}) {
+    const {
+      groups: s = [],
+      margin: a = { top: 20, right: 20, bottom: 40, left: 55 },
+      xKey: r = "x",
+      colors: k = ["#6366F1", "#CBD5E1"],
+      barRadius: b = 4,
+      yFormat: $ = ",.0f",
+      showGrid: A = !0
+    } = w;
+    C(n);
+    const p = c.width, m = c.height, h = Math.max(0, p - a.left - a.right), i = Math.max(0, m - a.top - a.bottom), x = e.select(n).attr("viewBox", `0 0 ${p} ${m}`).append("g").attr("transform", `translate(${a.left},${a.top})`), f = s.length ? s : Object.keys(l[0] || {}).filter((t) => t !== r), g = e.scaleBand().domain(l.map((t) => t[r])).range([0, h]).padding(0.3), u = e.scaleBand().domain(f).range([0, g.bandwidth()]).padding(0.05), y = e.max(l, (t) => e.max(f, (z) => t[z])) * 1.15, o = e.scaleLinear().domain([0, y]).range([i, 0]);
+    x.append("g").attr("transform", `translate(0,${i})`).call(e.axisBottom(g).tickSize(0)).call((t) => t.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "11px")).call((t) => t.select(".domain").remove()), x.append("g").call(e.axisLeft(o).ticks(5).tickFormat(e.format($)).tickSize(A ? -h : 0)).call((t) => t.selectAll("text").attr("fill", "#94a3b8").attr("font-size", "10px")).call((t) => t.selectAll(".tick line").attr("stroke", "#e2e8f0").attr("stroke-dasharray", "2,2")).call((t) => t.select(".domain").remove());
+    const B = x.selectAll(".bar-group").data(l).join("g").attr("class", "bar-group").attr("transform", (t) => `translate(${g(t[r])},0)`);
+    f.forEach((t, z) => {
+      B.append("rect").attr("x", u(t)).attr("y", (L) => o(L[t])).attr("width", u.bandwidth()).attr("height", (L) => i - o(L[t])).attr("rx", b).attr("fill", k[z % k.length]);
+    });
+  }
+};
+export {
+  F as D3ChartTemplates
+};
+//# sourceMappingURL=D3ChartTemplates.js.map

package/dist/components/library/charts/D3ChartTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"D3ChartTemplates.js","sources":["../../../../src/components/library/charts/D3ChartTemplates.jsx"],"sourcesContent":["import * as d3 from \"d3\";\n\nfunction clear(svg) {\n  d3.select(svg).selectAll(\"*\").remove();\n}\n\nexport const D3ChartTemplates = {\n  lineChart(svg, data, dims, opts = {}) {\n    const {\n      xKey = \"x\",\n      yKey = \"y\",\n      margin = { top: 12, right: 16, bottom: 28, left: 40 },\n      stroke = \"#6366F1\",\n      strokeWidth = 2,\n      showAxes = true,\n      showGrid = true\n    } = opts;\n\n    clear(svg);\n\n    const width = dims.width;\n    const height = dims.height;\n    const innerW = Math.max(0, width - margin.left - margin.right);\n    const innerH = Math.max(0, height - margin.top - margin.bottom);\n\n    const g = d3.select(svg).attr(\"viewBox\", `0 0 ${width} ${height}`).append(\"g\").attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const xs = data.map((d) => d?.[xKey]).filter((v) => v != null);\n    const ys = data.map((d) => d?.[yKey]).filter((v) => v != null);\n\n    const xDomain = d3.extent(xs);\n    const yDomain = d3.extent(ys);\n\n    const x = d3.scaleLinear().domain(xDomain).nice().range([0, innerW]);\n    const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);\n\n    if (showGrid) {\n      g.append(\"g\")\n        .attr(\"class\", \"grid\")\n        .call(d3.axisLeft(y).ticks(5).tickSize(-innerW).tickFormat(\"\"))\n        .call((grid) => grid.selectAll(\"line\").attr(\"stroke\", \"currentColor\").attr(\"opacity\", 0.12))\n        .call((grid) => grid.selectAll(\"path\").attr(\"stroke\", \"none\"));\n    }\n\n    const line = d3\n      .line()\n      .x((d) => x(d[xKey]))\n      .y((d) => y(d[yKey]))\n      .defined((d) => d?.[xKey] != null && d?.[yKey] != null);\n\n    g.append(\"path\")\n      .datum(data)\n      .attr(\"fill\", \"none\")\n      .attr(\"stroke\", stroke)\n      .attr(\"stroke-width\", strokeWidth)\n      .attr(\"d\", line);\n\n    if (showAxes) {\n      g.append(\"g\")\n        .attr(\"transform\", `translate(0,${innerH})`)\n        .call(d3.axisBottom(x).ticks(6))\n        .call((ax) => ax.selectAll(\"text\").attr(\"font-size\", 10));\n\n      g.append(\"g\")\n        .call(d3.axisLeft(y).ticks(5))\n        .call((ax) => ax.selectAll(\"text\").attr(\"font-size\", 10));\n    }\n  },\n\n  groupedBarChart(svg, data, dims, opts = {}) {\n    const {\n      groups = [],\n      margin = { top: 20, right: 20, bottom: 40, left: 55 },\n      xKey = \"x\",\n      colors = [\"#6366F1\", \"#CBD5E1\"],\n      barRadius = 4,\n      yFormat = \",.0f\",\n      showGrid = true,\n    } = opts;\n\n    clear(svg);\n\n    const width = dims.width;\n    const height = dims.height;\n    const innerW = Math.max(0, width - margin.left - margin.right);\n    const innerH = Math.max(0, height - margin.top - margin.bottom);\n\n    const sel = d3.select(svg).attr(\"viewBox\", `0 0 ${width} ${height}`);\n    const g = sel.append(\"g\").attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const groupKeys = groups.length ? groups : Object.keys(data[0] || {}).filter((k) => k !== xKey);\n\n    const x0 = d3.scaleBand().domain(data.map((d) => d[xKey])).range([0, innerW]).padding(0.3);\n    const x1 = d3.scaleBand().domain(groupKeys).range([0, x0.bandwidth()]).padding(0.05);\n    const yMax = d3.max(data, (d) => d3.max(groupKeys, (k) => d[k])) * 1.15;\n    const y = d3.scaleLinear().domain([0, yMax]).range([innerH, 0]);\n\n    g.append(\"g\")\n      .attr(\"transform\", `translate(0,${innerH})`)\n      .call(d3.axisBottom(x0).tickSize(0))\n      .call((ax) => ax.selectAll(\"text\").attr(\"fill\", \"#94a3b8\").attr(\"font-size\", \"11px\"))\n      .call((ax) => ax.select(\".domain\").remove());\n\n    g.append(\"g\")\n      .call(d3.axisLeft(y).ticks(5).tickFormat(d3.format(yFormat)).tickSize(showGrid ? -innerW : 0))\n      .call((ax) => ax.selectAll(\"text\").attr(\"fill\", \"#94a3b8\").attr(\"font-size\", \"10px\"))\n      .call((ax) => ax.selectAll(\".tick line\").attr(\"stroke\", \"#e2e8f0\").attr(\"stroke-dasharray\", \"2,2\"))\n      .call((ax) => ax.select(\".domain\").remove());\n\n    const rows = g.selectAll(\".bar-group\").data(data).join(\"g\")\n      .attr(\"class\", \"bar-group\")\n      .attr(\"transform\", (d) => `translate(${x0(d[xKey])},0)`);\n\n    groupKeys.forEach((key, i) => {\n      rows.append(\"rect\")\n        .attr(\"x\", x1(key))\n        .attr(\"y\", (d) => y(d[key]))\n        .attr(\"width\", x1.bandwidth())\n        .attr(\"height\", (d) => innerH - y(d[key]))\n        .attr(\"rx\", barRadius)\n        .attr(\"fill\", colors[i % colors.length]);\n    });\n  },\n};\n\n\n"],"names":["clear","svg","d3","D3ChartTemplates","data","dims","opts","xKey","yKey","margin","stroke","strokeWidth","showAxes","showGrid","width","height","innerW","innerH","g","xs","d","v","ys","xDomain","yDomain","x","y","grid","line","ax","groups","colors","barRadius","yFormat","groupKeys","k","x0","x1","yMax","rows","key","i"],"mappings":";AAEA,SAASA,EAAMC,GAAK;AAClB,EAAAC,EAAG,OAAOD,CAAG,EAAE,UAAU,GAAG,EAAE,OAAA;AAChC;AAEO,MAAME,IAAmB;AAAA,EAC9B,UAAUF,GAAKG,GAAMC,GAAMC,IAAO,CAAA,GAAI;AACpC,UAAM;AAAA,MACJ,MAAAC,IAAO;AAAA,MACP,MAAAC,IAAO;AAAA,MACP,QAAAC,IAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AAAA,MACjD,QAAAC,IAAS;AAAA,MACT,aAAAC,IAAc;AAAA,MACd,UAAAC,IAAW;AAAA,MACX,UAAAC,IAAW;AAAA,IAAA,IACTP;AAEJ,IAAAN,EAAMC,CAAG;AAET,UAAMa,IAAQT,EAAK,OACbU,IAASV,EAAK,QACdW,IAAS,KAAK,IAAI,GAAGF,IAAQL,EAAO,OAAOA,EAAO,KAAK,GACvDQ,IAAS,KAAK,IAAI,GAAGF,IAASN,EAAO,MAAMA,EAAO,MAAM,GAExDS,IAAIhB,EAAG,OAAOD,CAAG,EAAE,KAAK,WAAW,OAAOa,CAAK,IAAIC,CAAM,EAAE,EAAE,OAAO,GAAG,EAAE,KAAK,aAAa,aAAaN,EAAO,IAAI,IAAIA,EAAO,GAAG,GAAG,GAEpIU,IAAKf,EAAK,IAAI,CAACgB,MAAMA,IAAIb,CAAI,CAAC,EAAE,OAAO,CAACc,MAAMA,KAAK,IAAI,GACvDC,IAAKlB,EAAK,IAAI,CAACgB,MAAMA,IAAIZ,CAAI,CAAC,EAAE,OAAO,CAACa,MAAMA,KAAK,IAAI,GAEvDE,IAAUrB,EAAG,OAAOiB,CAAE,GACtBK,IAAUtB,EAAG,OAAOoB,CAAE,GAEtBG,IAAIvB,EAAG,YAAA,EAAc,OAAOqB,CAAO,EAAE,KAAA,EAAO,MAAM,CAAC,GAAGP,CAAM,CAAC,GAC7DU,IAAIxB,EAAG,YAAA,EAAc,OAAOsB,CAAO,EAAE,KAAA,EAAO,MAAM,CAACP,GAAQ,CAAC,CAAC;AAEnE,IAAIJ,KACFK,EAAE,OAAO,GAAG,EACT,KAAK,SAAS,MAAM,EACpB,KAAKhB,EAAG,SAASwB,CAAC,EAAE,MAAM,CAAC,EAAE,SAAS,CAACV,CAAM,EAAE,WAAW,EAAE,CAAC,EAC7D,KAAK,CAACW,MAASA,EAAK,UAAU,MAAM,EAAE,KAAK,UAAU,cAAc,EAAE,KAAK,WAAW,IAAI,CAAC,EAC1F,KAAK,CAACA,MAASA,EAAK,UAAU,MAAM,EAAE,KAAK,UAAU,MAAM,CAAC;AAGjE,UAAMC,IAAO1B,EACV,KAAA,EACA,EAAE,CAACkB,MAAMK,EAAEL,EAAEb,CAAI,CAAC,CAAC,EACnB,EAAE,CAACa,MAAMM,EAAEN,EAAEZ,CAAI,CAAC,CAAC,EACnB,QAAQ,CAACY,MAAMA,IAAIb,CAAI,KAAK,QAAQa,IAAIZ,CAAI,KAAK,IAAI;AAExD,IAAAU,EAAE,OAAO,MAAM,EACZ,MAAMd,CAAI,EACV,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAUM,CAAM,EACrB,KAAK,gBAAgBC,CAAW,EAChC,KAAK,KAAKiB,CAAI,GAEbhB,MACFM,EAAE,OAAO,GAAG,EACT,KAAK,aAAa,eAAeD,CAAM,GAAG,EAC1C,KAAKf,EAAG,WAAWuB,CAAC,EAAE,MAAM,CAAC,CAAC,EAC9B,KAAK,CAACI,MAAOA,EAAG,UAAU,MAAM,EAAE,KAAK,aAAa,EAAE,CAAC,GAE1DX,EAAE,OAAO,GAAG,EACT,KAAKhB,EAAG,SAASwB,CAAC,EAAE,MAAM,CAAC,CAAC,EAC5B,KAAK,CAACG,MAAOA,EAAG,UAAU,MAAM,EAAE,KAAK,aAAa,EAAE,CAAC;AAAA,EAE9D;AAAA,EAEA,gBAAgB5B,GAAKG,GAAMC,GAAMC,IAAO,CAAA,GAAI;AAC1C,UAAM;AAAA,MACJ,QAAAwB,IAAS,CAAA;AAAA,MACT,QAAArB,IAAS,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AAAA,MACjD,MAAAF,IAAO;AAAA,MACP,QAAAwB,IAAS,CAAC,WAAW,SAAS;AAAA,MAC9B,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,UAAApB,IAAW;AAAA,IAAA,IACTP;AAEJ,IAAAN,EAAMC,CAAG;AAET,UAAMa,IAAQT,EAAK,OACbU,IAASV,EAAK,QACdW,IAAS,KAAK,IAAI,GAAGF,IAAQL,EAAO,OAAOA,EAAO,KAAK,GACvDQ,IAAS,KAAK,IAAI,GAAGF,IAASN,EAAO,MAAMA,EAAO,MAAM,GAGxDS,IADMhB,EAAG,OAAOD,CAAG,EAAE,KAAK,WAAW,OAAOa,CAAK,IAAIC,CAAM,EAAE,EACrD,OAAO,GAAG,EAAE,KAAK,aAAa,aAAaN,EAAO,IAAI,IAAIA,EAAO,GAAG,GAAG,GAE/EyB,IAAYJ,EAAO,SAASA,IAAS,OAAO,KAAK1B,EAAK,CAAC,KAAK,CAAA,CAAE,EAAE,OAAO,CAAC+B,MAAMA,MAAM5B,CAAI,GAExF6B,IAAKlC,EAAG,UAAA,EAAY,OAAOE,EAAK,IAAI,CAACgB,MAAMA,EAAEb,CAAI,CAAC,CAAC,EAAE,MAAM,CAAC,GAAGS,CAAM,CAAC,EAAE,QAAQ,GAAG,GACnFqB,IAAKnC,EAAG,UAAA,EAAY,OAAOgC,CAAS,EAAE,MAAM,CAAC,GAAGE,EAAG,UAAA,CAAW,CAAC,EAAE,QAAQ,IAAI,GAC7EE,IAAOpC,EAAG,IAAIE,GAAM,CAACgB,MAAMlB,EAAG,IAAIgC,GAAW,CAACC,MAAMf,EAAEe,CAAC,CAAC,CAAC,IAAI,MAC7DT,IAAIxB,EAAG,YAAA,EAAc,OAAO,CAAC,GAAGoC,CAAI,CAAC,EAAE,MAAM,CAACrB,GAAQ,CAAC,CAAC;AAE9D,IAAAC,EAAE,OAAO,GAAG,EACT,KAAK,aAAa,eAAeD,CAAM,GAAG,EAC1C,KAAKf,EAAG,WAAWkC,CAAE,EAAE,SAAS,CAAC,CAAC,EAClC,KAAK,CAACP,MAAOA,EAAG,UAAU,MAAM,EAAE,KAAK,QAAQ,SAAS,EAAE,KAAK,aAAa,MAAM,CAAC,EACnF,KAAK,CAACA,MAAOA,EAAG,OAAO,SAAS,EAAE,QAAQ,GAE7CX,EAAE,OAAO,GAAG,EACT,KAAKhB,EAAG,SAASwB,CAAC,EAAE,MAAM,CAAC,EAAE,WAAWxB,EAAG,OAAO+B,CAAO,CAAC,EAAE,SAASpB,IAAW,CAACG,IAAS,CAAC,CAAC,EAC5F,KAAK,CAACa,MAAOA,EAAG,UAAU,MAAM,EAAE,KAAK,QAAQ,SAAS,EAAE,KAAK,aAAa,MAAM,CAAC,EACnF,KAAK,CAACA,MAAOA,EAAG,UAAU,YAAY,EAAE,KAAK,UAAU,SAAS,EAAE,KAAK,oBAAoB,KAAK,CAAC,EACjG,KAAK,CAACA,MAAOA,EAAG,OAAO,SAAS,EAAE,QAAQ;AAE7C,UAAMU,IAAOrB,EAAE,UAAU,YAAY,EAAE,KAAKd,CAAI,EAAE,KAAK,GAAG,EACvD,KAAK,SAAS,WAAW,EACzB,KAAK,aAAa,CAACgB,MAAM,aAAagB,EAAGhB,EAAEb,CAAI,CAAC,CAAC,KAAK;AAEzD,IAAA2B,EAAU,QAAQ,CAACM,GAAKC,MAAM;AAC5B,MAAAF,EAAK,OAAO,MAAM,EACf,KAAK,KAAKF,EAAGG,CAAG,CAAC,EACjB,KAAK,KAAK,CAACpB,MAAMM,EAAEN,EAAEoB,CAAG,CAAC,CAAC,EAC1B,KAAK,SAASH,EAAG,UAAA,CAAW,EAC5B,KAAK,UAAU,CAACjB,MAAMH,IAASS,EAAEN,EAAEoB,CAAG,CAAC,CAAC,EACxC,KAAK,MAAMR,CAAS,EACpB,KAAK,QAAQD,EAAOU,IAAIV,EAAO,MAAM,CAAC;AAAA,IAC3C,CAAC;AAAA,EACH;AACF;"}

package/dist/components/library/charts/GeoMap.js

@@ -0,0 +1,229 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { useRef as P, useState as ce, useMemo as w, useEffect as F, useCallback as le } from "react";
+import * as a from "d3";
+import { feature as se } from "topojson-client";
+import H from "world-atlas/land-110m.json";
+const ie = se(H, H.objects.land), _ = {
+  naturalEarth: a.geoNaturalEarth1,
+  mercator: a.geoMercator,
+  equirectangular: a.geoEquirectangular
+}, q = {
+  dark: {
+    bg: "#050b15",
+    bgGradient: ["#0a1628", "#050b15"],
+    land: "#1a2d4a",
+    landStroke: "#2a4060",
+    sphere: "#1e3a5f",
+    graticule: "#162a45",
+    graticuleOpacity: 0.35,
+    markerActive: "#cbd5e1",
+    markerInactive: "#64748b",
+    label: "#cbd5e1",
+    labelInactive: "#64748b",
+    arc: "#818cf8",
+    arcHighlight: "#c4b5fd",
+    arcDanger: "#f87171",
+    dot: "#a5b4fc",
+    dotDanger: "#f87171",
+    overlayFill: "rgba(248,113,113,0.10)",
+    overlayStroke: "rgba(248,113,113,0.30)"
+  },
+  light: {
+    bg: "#f8fafc",
+    bgGradient: ["#f8fafc", "#f1f5f9"],
+    land: "#e2e8f0",
+    landStroke: "#cbd5e1",
+    sphere: "#cbd5e1",
+    graticule: "#e2e8f0",
+    graticuleOpacity: 0.6,
+    markerActive: "#334155",
+    markerInactive: "#94a3b8",
+    label: "#334155",
+    labelInactive: "#94a3b8",
+    arc: "#6366f1",
+    arcHighlight: "#4f46e5",
+    arcDanger: "#ef4444",
+    dot: "#6366f1",
+    dotDanger: "#ef4444",
+    overlayFill: "rgba(239,68,68,0.08)",
+    overlayStroke: "rgba(239,68,68,0.3)"
+  }
+};
+function fe(s, i, k) {
+  return (_[s] ?? _.naturalEarth)().fitSize([i, k], { type: "Sphere" });
+}
+function he({
+  width: s = 960,
+  height: i = 480,
+  projection: k = "naturalEarth",
+  theme: D = "dark",
+  markers: G = [],
+  arcs: E = [],
+  overlays: T = [],
+  selectedId: v = null,
+  onArcClick: j,
+  onMarkerClick: z,
+  zoomable: x = !0,
+  minZoom: S = 1,
+  maxZoom: M = 8,
+  initialBounds: $ = null,
+  className: B = "",
+  children: N
+}) {
+  const n = q[D] ?? q.dark, g = P(null), [d, J] = ce(a.zoomIdentity), b = P(null), { proj: l, pathGen: Y, graticulePath: K, spherePath: L, landPath: Q } = w(() => {
+    const e = fe(k, s, i), t = a.geoPath(e);
+    return {
+      proj: e,
+      pathGen: t,
+      graticulePath: t(a.geoGraticule10()),
+      spherePath: t({ type: "Sphere" }),
+      landPath: t(ie)
+    };
+  }, [k, s, i]);
+  F(() => {
+    if (!x || !g.current) return;
+    const e = a.select(g.current), t = a.zoom().scaleExtent([S, M]).on("zoom", (r) => J(r.transform));
+    return b.current = t, e.call(t), () => e.on(".zoom", null);
+  }, [x, S, M]);
+  const C = P(!1);
+  F(() => {
+    if (!$ || C.current || !g.current || !b.current || !l) return;
+    const { sw: e, ne: t, padding: r = 40 } = $, c = l(e), u = l(t);
+    if (!c || !u) return;
+    const m = Math.min(c[0], u[0]), h = Math.min(c[1], u[1]), y = Math.max(c[0], u[0]), W = Math.max(c[1], u[1]), O = y - m, A = W - h;
+    if (O < 1 || A < 1) return;
+    const I = Math.min((s - r * 2) / O, (i - r * 2) / A), ee = (m + y) / 2, te = (h + W) / 2, re = s / 2 - ee * I, ne = i / 2 - te * I, oe = Math.max(S, Math.min(M, I)), ae = a.zoomIdentity.translate(re, ne).scale(oe);
+    a.select(g.current).call(b.current.transform, ae), C.current = !0;
+  }, [$, l, s, i, S, M]);
+  const U = le(() => {
+    !g.current || !b.current || a.select(g.current).transition().duration(400).call(b.current.transform, a.zoomIdentity);
+  }, []), V = d.k !== 1 || d.x !== 0 || d.y !== 0, R = w(() => {
+    const e = {};
+    return E.forEach((t) => {
+      const r = `${t.from[0]},${t.from[1]}-${t.to[0]},${t.to[1]}`;
+      if (e[r]) {
+        t._path = e[r];
+        return;
+      }
+      const c = a.geoInterpolate(t.from, t.to), u = [];
+      for (let h = 0; h <= 1; h += 0.02) {
+        const y = l(c(h));
+        y && u.push(y);
+      }
+      const m = u.length > 1 ? a.line()(u) : null;
+      e[r] = m, t._path = m;
+    }), E;
+  }, [E, l]), X = w(() => {
+    const e = /* @__PURE__ */ new Set();
+    return G.forEach((t) => {
+      t.active && e.add(t.id);
+    }), e;
+  }, [G]), Z = `translate(${d.x},${d.y}) scale(${d.k})`, f = 1 / d.k;
+  return /* @__PURE__ */ p("div", { className: `relative overflow-hidden ${B}`, style: { background: n.bg }, children: [
+    /* @__PURE__ */ p("svg", { ref: g, viewBox: `0 0 ${s} ${i}`, className: "h-full w-full", preserveAspectRatio: "xMidYMid slice", style: x ? { cursor: "grab" } : void 0, children: [
+      /* @__PURE__ */ p("defs", { children: [
+        /* @__PURE__ */ p("radialGradient", { id: "geo-bg", cx: "50%", cy: "50%", r: "55%", children: [
+          /* @__PURE__ */ o("stop", { offset: "0%", stopColor: n.bgGradient[0] }),
+          /* @__PURE__ */ o("stop", { offset: "100%", stopColor: n.bgGradient[1] })
+        ] }),
+        /* @__PURE__ */ p("filter", { id: "geo-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+          /* @__PURE__ */ o("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "b" }),
+          /* @__PURE__ */ p("feMerge", { children: [
+            /* @__PURE__ */ o("feMergeNode", { in: "b" }),
+            /* @__PURE__ */ o("feMergeNode", { in: "SourceGraphic" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ o("style", { children: `
+          .geo-arc{stroke-dasharray:8,6;animation:geo-flow 1.5s linear infinite}
+          @keyframes geo-flow{to{stroke-dashoffset:-14}}
+          .geo-dot{animation:geo-pulse 2s ease-in-out infinite}
+          @keyframes geo-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+        ` }),
+      /* @__PURE__ */ o("rect", { width: s, height: i, fill: "url(#geo-bg)" }),
+      /* @__PURE__ */ p("g", { transform: Z, children: [
+        /* @__PURE__ */ o("path", { d: L, fill: "none", stroke: n.sphere, strokeWidth: 0.8 * f }),
+        /* @__PURE__ */ o("path", { d: Q, fill: n.land, stroke: n.landStroke, strokeWidth: 0.4 * f }),
+        /* @__PURE__ */ o("path", { d: K, fill: "none", stroke: n.graticule, strokeWidth: 0.3 * f, opacity: n.graticuleOpacity }),
+        T.map((e) => {
+          const t = l(e.center);
+          if (!t) return null;
+          const r = l([e.center[0] + (e.radius ?? 5), e.center[1]]), c = r ? Math.abs(r[0] - t[0]) : 30;
+          return /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: t[0],
+              cy: t[1],
+              r: c,
+              fill: e.fill ?? n.overlayFill,
+              stroke: e.stroke ?? n.overlayStroke,
+              strokeWidth: 1 * f,
+              strokeDasharray: "5,5",
+              className: "animate-pulse"
+            },
+            e.id
+          );
+        }),
+        R.map((e) => {
+          if (!e._path) return null;
+          const t = v === e.id, r = e.danger;
+          return /* @__PURE__ */ o(
+            "path",
+            {
+              d: e._path,
+              fill: "none",
+              stroke: r ? n.arcDanger : t ? n.arcHighlight : e.color ?? n.arc,
+              strokeWidth: (t ? 3 : 2) * f,
+              opacity: v != null && !t ? 0.15 : r ? 0.85 : 0.65,
+              className: "geo-arc cursor-pointer",
+              onClick: () => j?.(e)
+            },
+            `arc-${e.id}`
+          );
+        }),
+        G.map((e) => {
+          const t = l([e.lon, e.lat]);
+          if (!t) return null;
+          const r = e.active ?? X.has(e.id);
+          return /* @__PURE__ */ p("g", { className: z ? "cursor-pointer" : "", onClick: () => z?.(e), children: [
+            /* @__PURE__ */ o("circle", { cx: t[0], cy: t[1], r: (r ? 3 : 2) * f, fill: r ? n.markerActive : n.markerInactive }),
+            e.label !== !1 && /* @__PURE__ */ o("text", { x: t[0] + 6 * f, y: t[1] + 4 * f, fontSize: 8 * f, fill: r ? n.label : n.labelInactive, fontFamily: "sans-serif", fontWeight: 600, children: e.label ?? e.id })
+          ] }, e.id);
+        }),
+        R.map((e) => {
+          if (e.progress == null || e.progress <= 0) return null;
+          const t = a.geoInterpolate(e.from, e.to), r = l(t(Math.min(e.progress, 0.99)));
+          if (!r) return null;
+          const c = v === e.id;
+          return /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: r[0],
+              cy: r[1],
+              r: (c ? 6 : 4.5) * f,
+              fill: e.danger ? n.dotDanger : e.dotColor ?? n.dot,
+              filter: "url(#geo-glow)",
+              className: "geo-dot cursor-pointer",
+              opacity: v != null && !c ? 0.3 : 1,
+              onClick: () => j?.(e)
+            },
+            `dot-${e.id}`
+          );
+        }),
+        typeof N == "function" ? N({ proj: l, pathGen: Y, theme: n, width: s, height: i, transform: d }) : N
+      ] })
+    ] }),
+    x && V && /* @__PURE__ */ o(
+      "button",
+      {
+        onClick: U,
+        className: "absolute bottom-3 right-3 rounded-lg border border-white/15 bg-black/50 px-2.5 py-1.5 text-[11px] font-medium text-white/80 backdrop-blur-md transition hover:bg-black/70 hover:text-white",
+        children: "Reset view"
+      }
+    )
+  ] });
+}
+export {
+  he as default
+};
+//# sourceMappingURL=GeoMap.js.map

package/dist/components/library/charts/GeoMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoMap.js","sources":["../../../../src/components/library/charts/GeoMap.jsx"],"sourcesContent":["import React, { useMemo, useRef, useEffect, useState, useCallback } from \"react\";\nimport * as d3 from \"d3\";\nimport { feature } from \"topojson-client\";\nimport world from \"world-atlas/land-110m.json\";\n\nconst land = feature(world, world.objects.land);\n\nconst PROJECTIONS = {\n  naturalEarth: d3.geoNaturalEarth1,\n  mercator: d3.geoMercator,\n  equirectangular: d3.geoEquirectangular,\n};\n\nconst THEMES = {\n  dark: {\n    bg: \"#050b15\",\n    bgGradient: [\"#0a1628\", \"#050b15\"],\n    land: \"#1a2d4a\",\n    landStroke: \"#2a4060\",\n    sphere: \"#1e3a5f\",\n    graticule: \"#162a45\",\n    graticuleOpacity: 0.35,\n    markerActive: \"#cbd5e1\",\n    markerInactive: \"#64748b\",\n    label: \"#cbd5e1\",\n    labelInactive: \"#64748b\",\n    arc: \"#818cf8\",\n    arcHighlight: \"#c4b5fd\",\n    arcDanger: \"#f87171\",\n    dot: \"#a5b4fc\",\n    dotDanger: \"#f87171\",\n    overlayFill: \"rgba(248,113,113,0.10)\",\n    overlayStroke: \"rgba(248,113,113,0.30)\",\n  },\n  light: {\n    bg: \"#f8fafc\",\n    bgGradient: [\"#f8fafc\", \"#f1f5f9\"],\n    land: \"#e2e8f0\",\n    landStroke: \"#cbd5e1\",\n    sphere: \"#cbd5e1\",\n    graticule: \"#e2e8f0\",\n    graticuleOpacity: 0.6,\n    markerActive: \"#334155\",\n    markerInactive: \"#94a3b8\",\n    label: \"#334155\",\n    labelInactive: \"#94a3b8\",\n    arc: \"#6366f1\",\n    arcHighlight: \"#4f46e5\",\n    arcDanger: \"#ef4444\",\n    dot: \"#6366f1\",\n    dotDanger: \"#ef4444\",\n    overlayFill: \"rgba(239,68,68,0.08)\",\n    overlayStroke: \"rgba(239,68,68,0.3)\",\n  },\n};\n\nfunction buildProjection(type, width, height) {\n  const factory = PROJECTIONS[type] ?? PROJECTIONS.naturalEarth;\n  return factory().fitSize([width, height], { type: \"Sphere\" });\n}\n\nexport default function GeoMap({\n  width = 960,\n  height = 480,\n  projection: projType = \"naturalEarth\",\n  theme = \"dark\",\n  markers = [],\n  arcs = [],\n  overlays = [],\n  selectedId = null,\n  onArcClick,\n  onMarkerClick,\n  zoomable = true,\n  minZoom = 1,\n  maxZoom = 8,\n  initialBounds = null,\n  className = \"\",\n  children,\n}) {\n  const t = THEMES[theme] ?? THEMES.dark;\n  const svgRef = useRef(null);\n  const [transform, setTransform] = useState(d3.zoomIdentity);\n  const zoomRef = useRef(null);\n\n  const { proj, pathGen, graticulePath, spherePath, landPath } = useMemo(() => {\n    const proj = buildProjection(projType, width, height);\n    const pathGen = d3.geoPath(proj);\n    return {\n      proj,\n      pathGen,\n      graticulePath: pathGen(d3.geoGraticule10()),\n      spherePath: pathGen({ type: \"Sphere\" }),\n      landPath: pathGen(land),\n    };\n  }, [projType, width, height]);\n\n  // D3 zoom behavior\n  useEffect(() => {\n    if (!zoomable || !svgRef.current) return;\n    const svg = d3.select(svgRef.current);\n    const zoom = d3.zoom()\n      .scaleExtent([minZoom, maxZoom])\n      .on(\"zoom\", (e) => setTransform(e.transform));\n    zoomRef.current = zoom;\n    svg.call(zoom);\n    return () => svg.on(\".zoom\", null);\n  }, [zoomable, minZoom, maxZoom]);\n\n  // Apply initial zoom to fit bounds (markers/region) on mount\n  const initialBoundsApplied = useRef(false);\n  useEffect(() => {\n    if (!initialBounds || initialBoundsApplied.current) return;\n    if (!svgRef.current || !zoomRef.current || !proj) return;\n    const { sw, ne, padding = 40 } = initialBounds; // sw=[lonMin,latMin], ne=[lonMax,latMax]\n    const p0 = proj(sw);\n    const p1 = proj(ne);\n    if (!p0 || !p1) return;\n    const bx0 = Math.min(p0[0], p1[0]);\n    const by0 = Math.min(p0[1], p1[1]);\n    const bx1 = Math.max(p0[0], p1[0]);\n    const by1 = Math.max(p0[1], p1[1]);\n    const bw = bx1 - bx0;\n    const bh = by1 - by0;\n    if (bw < 1 || bh < 1) return;\n    const scale = Math.min((width - padding * 2) / bw, (height - padding * 2) / bh);\n    const cx = (bx0 + bx1) / 2;\n    const cy = (by0 + by1) / 2;\n    const tx = width / 2 - cx * scale;\n    const ty = height / 2 - cy * scale;\n    const clampedScale = Math.max(minZoom, Math.min(maxZoom, scale));\n    const t = d3.zoomIdentity.translate(tx, ty).scale(clampedScale);\n    d3.select(svgRef.current).call(zoomRef.current.transform, t);\n    initialBoundsApplied.current = true;\n  }, [initialBounds, proj, width, height, minZoom, maxZoom]);\n\n  const resetZoom = useCallback(() => {\n    if (!svgRef.current || !zoomRef.current) return;\n    d3.select(svgRef.current)\n      .transition()\n      .duration(400)\n      .call(zoomRef.current.transform, d3.zoomIdentity);\n  }, []);\n\n  const isZoomed = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;\n\n  const arcPaths = useMemo(() => {\n    const cache = {};\n    arcs.forEach(a => {\n      const key = `${a.from[0]},${a.from[1]}-${a.to[0]},${a.to[1]}`;\n      if (cache[key]) { a._path = cache[key]; return; }\n      const interp = d3.geoInterpolate(a.from, a.to);\n      const pts = [];\n      for (let i = 0; i <= 1; i += 0.02) {\n        const p = proj(interp(i));\n        if (p) pts.push(p);\n      }\n      const path = pts.length > 1 ? d3.line()(pts) : null;\n      cache[key] = path;\n      a._path = path;\n    });\n    return arcs;\n  }, [arcs, proj]);\n\n  const activeMarkerIds = useMemo(() => {\n    const s = new Set();\n    markers.forEach(m => { if (m.active) s.add(m.id); });\n    return s;\n  }, [markers]);\n\n  const txStr = `translate(${transform.x},${transform.y}) scale(${transform.k})`;\n  const invScale = 1 / transform.k;\n\n  return (\n    <div className={`relative overflow-hidden ${className}`} style={{ background: t.bg }}>\n      <svg ref={svgRef} viewBox={`0 0 ${width} ${height}`} className=\"h-full w-full\" preserveAspectRatio=\"xMidYMid slice\" style={zoomable ? { cursor: \"grab\" } : undefined}>\n        <defs>\n          <radialGradient id=\"geo-bg\" cx=\"50%\" cy=\"50%\" r=\"55%\">\n            <stop offset=\"0%\" stopColor={t.bgGradient[0]} />\n            <stop offset=\"100%\" stopColor={t.bgGradient[1]} />\n          </radialGradient>\n          <filter id=\"geo-glow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"3\" result=\"b\" />\n            <feMerge><feMergeNode in=\"b\" /><feMergeNode in=\"SourceGraphic\" /></feMerge>\n          </filter>\n        </defs>\n        <style>{`\n          .geo-arc{stroke-dasharray:8,6;animation:geo-flow 1.5s linear infinite}\n          @keyframes geo-flow{to{stroke-dashoffset:-14}}\n          .geo-dot{animation:geo-pulse 2s ease-in-out infinite}\n          @keyframes geo-pulse{0%,100%{opacity:1}50%{opacity:.5}}\n        `}</style>\n\n        <rect width={width} height={height} fill=\"url(#geo-bg)\" />\n\n        {/* Zoomable content group */}\n        <g transform={txStr}>\n          <path d={spherePath} fill=\"none\" stroke={t.sphere} strokeWidth={0.8 * invScale} />\n          <path d={landPath} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />\n          <path d={graticulePath} fill=\"none\" stroke={t.graticule} strokeWidth={0.3 * invScale} opacity={t.graticuleOpacity} />\n\n          {/* Overlay zones (disruptions, weather) */}\n          {overlays.map(o => {\n            const c = proj(o.center);\n            if (!c) return null;\n            const edge = proj([o.center[0] + (o.radius ?? 5), o.center[1]]);\n            const r = edge ? Math.abs(edge[0] - c[0]) : 30;\n            return (\n              <circle\n                key={o.id}\n                cx={c[0]} cy={c[1]} r={r}\n                fill={o.fill ?? t.overlayFill}\n                stroke={o.stroke ?? t.overlayStroke}\n                strokeWidth={1 * invScale}\n                strokeDasharray=\"5,5\"\n                className=\"animate-pulse\"\n              />\n            );\n          })}\n\n          {/* Arcs */}\n          {arcPaths.map(a => {\n            if (!a._path) return null;\n            const sel = selectedId === a.id;\n            const danger = a.danger;\n            return (\n              <path\n                key={`arc-${a.id}`}\n                d={a._path}\n                fill=\"none\"\n                stroke={danger ? t.arcDanger : sel ? t.arcHighlight : a.color ?? t.arc}\n                strokeWidth={(sel ? 3 : 2) * invScale}\n                opacity={selectedId != null && !sel ? 0.15 : danger ? 0.85 : 0.65}\n                className=\"geo-arc cursor-pointer\"\n                onClick={() => onArcClick?.(a)}\n              />\n            );\n          })}\n\n          {/* Markers */}\n          {markers.map(m => {\n            const p = proj([m.lon, m.lat]);\n            if (!p) return null;\n            const active = m.active ?? activeMarkerIds.has(m.id);\n            return (\n              <g key={m.id} className={onMarkerClick ? \"cursor-pointer\" : \"\"} onClick={() => onMarkerClick?.(m)}>\n                <circle cx={p[0]} cy={p[1]} r={(active ? 3 : 2) * invScale} fill={active ? t.markerActive : t.markerInactive} />\n                {m.label !== false && (\n                  <text x={p[0] + 6 * invScale} y={p[1] + 4 * invScale} fontSize={8 * invScale} fill={active ? t.label : t.labelInactive} fontFamily=\"sans-serif\" fontWeight={600}>\n                    {m.label ?? m.id}\n                  </text>\n                )}\n              </g>\n            );\n          })}\n\n          {/* Moving dots (flight positions) */}\n          {arcPaths.map(a => {\n            if (a.progress == null || a.progress <= 0) return null;\n            const interp = d3.geoInterpolate(a.from, a.to);\n            const p = proj(interp(Math.min(a.progress, 0.99)));\n            if (!p) return null;\n            const sel = selectedId === a.id;\n            return (\n              <circle\n                key={`dot-${a.id}`}\n                cx={p[0]} cy={p[1]}\n                r={(sel ? 6 : 4.5) * invScale}\n                fill={a.danger ? t.dotDanger : a.dotColor ?? t.dot}\n                filter=\"url(#geo-glow)\"\n                className=\"geo-dot cursor-pointer\"\n                opacity={selectedId != null && !sel ? 0.3 : 1}\n                onClick={() => onArcClick?.(a)}\n              />\n            );\n          })}\n\n          {/* Custom children get access to projection */}\n          {typeof children === \"function\" ? children({ proj, pathGen, theme: t, width, height, transform }) : children}\n        </g>\n      </svg>\n\n      {/* Reset zoom button */}\n      {zoomable && isZoomed && (\n        <button\n          onClick={resetZoom}\n          className=\"absolute bottom-3 right-3 rounded-lg border border-white/15 bg-black/50 px-2.5 py-1.5 text-[11px] font-medium text-white/80 backdrop-blur-md transition hover:bg-black/70 hover:text-white\"\n        >\n          Reset view\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["land","feature","world","PROJECTIONS","d3","THEMES","buildProjection","type","width","height","GeoMap","projType","theme","markers","arcs","overlays","selectedId","onArcClick","onMarkerClick","zoomable","minZoom","maxZoom","initialBounds","className","children","t","svgRef","useRef","transform","setTransform","useState","zoomRef","proj","pathGen","graticulePath","spherePath","landPath","useMemo","useEffect","svg","zoom","e","initialBoundsApplied","sw","ne","padding","p0","p1","bx0","by0","bx1","by1","bw","bh","scale","cx","cy","tx","ty","clampedScale","resetZoom","useCallback","isZoomed","arcPaths","cache","a","key","interp","pts","i","p","path","activeMarkerIds","s","m","txStr","invScale","jsxs","jsx","o","c","edge","r","sel","danger","active"],"mappings":"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"}

package/dist/components/library/chat/ChatBar.js

@@ -0,0 +1,194 @@
+import { jsx as e, jsxs as r, Fragment as x } from "react/jsx-runtime";
+import { useState as m, useRef as I, useCallback as K, useEffect as d } from "react";
+import { createPortal as M } from "react-dom";
+import { AnimatePresence as P, motion as f } from "framer-motion";
+import { SparklesIcon as i, ArrowTopRightOnSquareIcon as R, TrashIcon as O, XMarkIcon as V } from "@heroicons/react/24/outline";
+import B from "./ChatMessageList.js";
+import T from "./ChatInput.js";
+import q from "./useChatState.js";
+const z = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.15 } },
+  exit: { opacity: 0, transition: { duration: 0.12 } }
+}, D = {
+  hidden: { opacity: 0, y: 20, scale: 0.97 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { type: "spring", damping: 28, stiffness: 380 }
+  },
+  exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } }
+};
+function Y({
+  onSend: p,
+  suggestions: c = [],
+  placeholder: h = "Ask a question…",
+  title: g = "AI Assistant",
+  initialMessages: k = [],
+  className: v = "",
+  panelHeight: H,
+  renderAvatar: y,
+  onOpenInTab: u
+}) {
+  const [s, n] = m(!1), [N, b] = m(!1), w = I(null), t = q({ initialMessages: k, onSend: p }), C = t.messages.length === 0, o = K(() => n(!1), []);
+  d(() => {
+    s && b(!0);
+  }, [s]), d(() => {
+    function a(l) {
+      (l.metaKey || l.ctrlKey) && l.key === "k" && (l.preventDefault(), n((E) => !E)), l.key === "Escape" && s && o();
+    }
+    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+  }, [s, o]), d(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [s]);
+  function A(a) {
+    s || n(!0), t.sendMessage(a);
+  }
+  const [S, L] = m("⌘K");
+  d(() => {
+    L(/Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘K" : "Ctrl K");
+  }, []);
+  const j = typeof document < "u" && N ? M(
+    /* @__PURE__ */ e(P, { onExitComplete: () => b(!1), children: s && /* @__PURE__ */ r(x, { children: [
+      /* @__PURE__ */ e(
+        f.div,
+        {
+          variants: z,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm",
+          onClick: o,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ r(
+        f.div,
+        {
+          ref: w,
+          variants: D,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          className: "fixed inset-x-0 top-[10vh] z-50 mx-auto flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900",
+          style: { maxHeight: "75vh" },
+          children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center justify-between border-b border-slate-100 px-4 py-2.5 dark:border-slate-800", children: [
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(i, { className: "h-4 w-4 text-brand-500" }),
+                /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-slate-900 dark:text-slate-50", children: g })
+              ] }),
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
+                u ? /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      n(!1), b(!1), document.body.style.overflow = "", u(t.messages);
+                    },
+                    className: "rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300",
+                    "aria-label": "Open in new tab",
+                    title: "Open in new tab",
+                    children: /* @__PURE__ */ e(R, { className: "h-4 w-4" })
+                  }
+                ) : null,
+                t.messages.length > 0 ? /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: t.clearMessages,
+                    className: "rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300",
+                    "aria-label": "Clear chat",
+                    children: /* @__PURE__ */ e(O, { className: "h-4 w-4" })
+                  }
+                ) : null,
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: o,
+                    className: "rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300",
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ e(V, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ e("kbd", { className: "ml-1 hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block", children: "esc" })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "min-h-0 flex-1", children: C ? /* @__PURE__ */ r("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center gap-4 px-6 py-8", children: [
+              /* @__PURE__ */ e("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 dark:bg-brand-950/30", children: /* @__PURE__ */ e(i, { className: "h-5 w-5 text-brand-500" }) }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "Ask me anything about your data." }),
+              c.length > 0 ? /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-center gap-2", children: c.map((a) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => A(a),
+                  className: "inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:border-brand-700 dark:hover:bg-brand-950/30 dark:hover:text-brand-300",
+                  children: [
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        className: "h-3 w-3",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    a
+                  ]
+                },
+                a
+              )) }) : null
+            ] }) : /* @__PURE__ */ e(
+              B,
+              {
+                messages: t.messages,
+                isLoading: t.isLoading,
+                isStreaming: t.isStreaming,
+                suggestions: c,
+                onSuggestion: (a) => t.sendMessage(a),
+                renderAvatar: y
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "border-t border-slate-100 p-3 dark:border-slate-800", children: /* @__PURE__ */ e(
+              T,
+              {
+                onSend: (a) => t.sendMessage(a),
+                disabled: t.isLoading,
+                isLoading: t.isLoading,
+                placeholder: h
+              }
+            ) })
+          ]
+        }
+      )
+    ] }) }),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ r(x, { children: [
+    j,
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        onClick: () => n(!0),
+        className: [
+          "group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-left shadow-sm transition-all hover:border-brand-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-brand-700",
+          v
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ e(i, { className: "h-5 w-5 shrink-0 text-brand-500" }),
+          /* @__PURE__ */ e("span", { className: "flex-1 text-sm text-slate-400 dark:text-slate-500", children: h }),
+          t.messages.length > 0 ? /* @__PURE__ */ r("span", { className: "rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-950/30 dark:text-brand-400", children: [
+            t.messages.length,
+            " msgs"
+          ] }) : null,
+          /* @__PURE__ */ e("kbd", { className: "hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 group-hover:border-brand-200 group-hover:text-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block", children: S })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Y as default
+};
+//# sourceMappingURL=ChatBar.js.map

package/dist/components/library/chat/ChatBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBar.js","sources":["../../../../src/components/library/chat/ChatBar.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport {\n  SparklesIcon,\n  XMarkIcon,\n  TrashIcon,\n  ArrowTopRightOnSquareIcon,\n} from \"@heroicons/react/24/outline\";\nimport ChatMessageList from \"./ChatMessageList\";\nimport ChatInput from \"./ChatInput\";\nimport useChatState from \"./useChatState\";\n\nconst BACKDROP_VARIANTS = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  exit: { opacity: 0, transition: { duration: 0.12 } },\n};\n\nconst PANEL_VARIANTS = {\n  hidden: { opacity: 0, y: 20, scale: 0.97 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    scale: 1,\n    transition: { type: \"spring\", damping: 28, stiffness: 380 },\n  },\n  exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },\n};\n\n/**\n * Command-palette style AI chat bar.\n *\n * Collapsed: a slim, clickable input strip with sparkle icon and ⌘K hint.\n * Expanded: a centered floating overlay (portal) with backdrop, full chat,\n * suggestions, and message history. No layout shift.\n *\n * Activate: click the bar, press ⌘K / Ctrl+K, or click a suggestion chip.\n * Dismiss: Escape or click the backdrop.\n */\nexport default function ChatBar({\n  onSend,\n  suggestions = [],\n  placeholder = \"Ask a question\\u2026\",\n  title = \"AI Assistant\",\n  initialMessages = [],\n  className = \"\",\n  panelHeight,\n  renderAvatar,\n  onOpenInTab,\n}) {\n  const [open, setOpen] = useState(false);\n  const [portalVisible, setPortalVisible] = useState(false);\n  const panelRef = useRef(null);\n  const chat = useChatState({ initialMessages, onSend });\n  const isEmpty = chat.messages.length === 0;\n\n  const close = useCallback(() => setOpen(false), []);\n\n  useEffect(() => {\n    if (open) setPortalVisible(true);\n  }, [open]);\n\n  useEffect(() => {\n    function onKey(e) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        setOpen((prev) => !prev);\n      }\n      if (e.key === \"Escape\" && open) close();\n    }\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, close]);\n\n  useEffect(() => {\n    if (open) document.body.style.overflow = \"hidden\";\n    else document.body.style.overflow = \"\";\n    return () => { document.body.style.overflow = \"\"; };\n  }, [open]);\n\n  function handleSend(content) {\n    if (!open) setOpen(true);\n    chat.sendMessage(content);\n  }\n\n  const [shortcutLabel, setShortcutLabel] = useState(\"⌘K\");\n  useEffect(() => {\n    setShortcutLabel(/Mac|iPhone|iPad/.test(navigator.userAgent) ? \"⌘K\" : \"Ctrl K\");\n  }, []);\n\n  const overlay =\n    typeof document !== \"undefined\" && portalVisible\n      ? createPortal(\n          <AnimatePresence onExitComplete={() => setPortalVisible(false)}>\n            {open && (\n              <>\n                {/* Backdrop */}\n                <motion.div\n                  variants={BACKDROP_VARIANTS}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"exit\"\n                  className=\"fixed inset-0 z-50 bg-black/30 backdrop-blur-sm\"\n                  onClick={close}\n                  aria-hidden=\"true\"\n                />\n\n                {/* Centered panel */}\n                <motion.div\n                  ref={panelRef}\n                  variants={PANEL_VARIANTS}\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"exit\"\n                  className=\"fixed inset-x-0 top-[10vh] z-50 mx-auto flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900\"\n                  style={{ maxHeight: \"75vh\" }}\n                >\n                  {/* Header */}\n                  <div className=\"flex items-center justify-between border-b border-slate-100 px-4 py-2.5 dark:border-slate-800\">\n                    <div className=\"flex items-center gap-2\">\n                      <SparklesIcon className=\"h-4 w-4 text-brand-500\" />\n                      <h3 className=\"text-sm font-semibold text-slate-900 dark:text-slate-50\">\n                        {title}\n                      </h3>\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      {onOpenInTab ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            setOpen(false);\n                            setPortalVisible(false);\n                            document.body.style.overflow = \"\";\n                            onOpenInTab(chat.messages);\n                          }}\n                          className=\"rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300\"\n                          aria-label=\"Open in new tab\"\n                          title=\"Open in new tab\"\n                        >\n                          <ArrowTopRightOnSquareIcon className=\"h-4 w-4\" />\n                        </button>\n                      ) : null}\n                      {chat.messages.length > 0 ? (\n                        <button\n                          type=\"button\"\n                          onClick={chat.clearMessages}\n                          className=\"rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300\"\n                          aria-label=\"Clear chat\"\n                        >\n                          <TrashIcon className=\"h-4 w-4\" />\n                        </button>\n                      ) : null}\n                      <button\n                        type=\"button\"\n                        onClick={close}\n                        className=\"rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300\"\n                        aria-label=\"Close\"\n                      >\n                        <XMarkIcon className=\"h-4 w-4\" />\n                      </button>\n                      <kbd className=\"ml-1 hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block\">\n                        esc\n                      </kbd>\n                    </div>\n                  </div>\n\n                  {/* Body — messages or empty state */}\n                  <div className=\"min-h-0 flex-1\">\n                    {isEmpty ? (\n                      <div className=\"flex h-full min-h-[200px] flex-col items-center justify-center gap-4 px-6 py-8\">\n                        <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 dark:bg-brand-950/30\">\n                          <SparklesIcon className=\"h-5 w-5 text-brand-500\" />\n                        </div>\n                        <p className=\"text-sm text-slate-500 dark:text-slate-400\">\n                          Ask me anything about your data.\n                        </p>\n                        {suggestions.length > 0 ? (\n                          <div className=\"flex flex-wrap justify-center gap-2\">\n                            {suggestions.map((text) => (\n                              <button\n                                key={text}\n                                type=\"button\"\n                                onClick={() => handleSend(text)}\n                                className=\"inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:border-brand-700 dark:hover:bg-brand-950/30 dark:hover:text-brand-300\"\n                              >\n                                <SparklesIcon\n                                  className=\"h-3 w-3\"\n                                  aria-hidden=\"true\"\n                                />\n                                {text}\n                              </button>\n                            ))}\n                          </div>\n                        ) : null}\n                      </div>\n                    ) : (\n                      <ChatMessageList\n                        messages={chat.messages}\n                        isLoading={chat.isLoading}\n                        isStreaming={chat.isStreaming}\n                        suggestions={suggestions}\n                        onSuggestion={(text) => chat.sendMessage(text)}\n                        renderAvatar={renderAvatar}\n                      />\n                    )}\n                  </div>\n\n                  {/* Input */}\n                  <div className=\"border-t border-slate-100 p-3 dark:border-slate-800\">\n                    <ChatInput\n                      onSend={(content) => chat.sendMessage(content)}\n                      disabled={chat.isLoading}\n                      isLoading={chat.isLoading}\n                      placeholder={placeholder}\n                    />\n                  </div>\n                </motion.div>\n              </>\n            )}\n          </AnimatePresence>,\n          document.body\n        )\n      : null;\n\n  return (\n    <>\n      {overlay}\n\n      {/* Trigger bar */}\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className={[\n          \"group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-left shadow-sm transition-all hover:border-brand-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-brand-700\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n      >\n        <SparklesIcon className=\"h-5 w-5 shrink-0 text-brand-500\" />\n        <span className=\"flex-1 text-sm text-slate-400 dark:text-slate-500\">\n          {placeholder}\n        </span>\n        {chat.messages.length > 0 ? (\n          <span className=\"rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-950/30 dark:text-brand-400\">\n            {chat.messages.length} msgs\n          </span>\n        ) : null}\n        <kbd className=\"hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 group-hover:border-brand-200 group-hover:text-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block\">\n          {shortcutLabel}\n        </kbd>\n      </button>\n    </>\n  );\n}\n"],"names":["BACKDROP_VARIANTS","PANEL_VARIANTS","ChatBar","onSend","suggestions","placeholder","title","initialMessages","className","panelHeight","renderAvatar","onOpenInTab","open","setOpen","useState","portalVisible","setPortalVisible","panelRef","useRef","chat","useChatState","isEmpty","close","useCallback","useEffect","onKey","e","prev","handleSend","content","shortcutLabel","setShortcutLabel","overlay","createPortal","jsx","AnimatePresence","jsxs","Fragment","motion","SparklesIcon","ArrowTopRightOnSquareIcon","TrashIcon","XMarkIcon","text","ChatMessageList","ChatInput"],"mappings":"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"}