@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/heat-map-overlay/heat-map-overlay.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useId,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const DEFAULT_GRADIENT = {
+  0.2: "rgba(0, 0, 255, 0.6)",
+  0.5: "rgba(0, 255, 0, 0.7)",
+  0.8: "rgba(255, 165, 0, 0.85)",
+  1: "rgba(255, 0, 0, 0.95)"
+};
+const DEFAULT_LABELS = {
+  region: "Heat map"
+};
+function projectEquirectangular(lng, lat) {
+  const x = (lng + 180) / 360 * VIEWBOX_WIDTH;
+  const y = (90 - lat) / 180 * VIEWBOX_HEIGHT;
+  return { x, y };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function gradientStops(gradient) {
+  return Object.entries(gradient).map(([key, value]) => ({ color: value, offset: Number.parseFloat(key) })).sort((a, b) => a.offset - b.offset);
+}
+function projectPoints(points) {
+  return points.map((point) => {
+    const { x, y } = projectEquirectangular(point.lng, point.lat);
+    return {
+      raw: point,
+      weight: clamp(point.weight ?? 1, 0, 1),
+      x,
+      y
+    };
+  });
+}
+function HeatBlob({ gradientId, point, radius }) {
+  const blobRadius = Math.max(2, radius * (0.4 + 0.6 * point.weight));
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: point.x,
+      cy: point.y,
+      "data-point-id": point.raw.id,
+      "data-weight": point.weight,
+      fill: `url(#${gradientId})`,
+      opacity: point.weight,
+      r: blobRadius
+    }
+  );
+}
+function GradientDefs({
+  blurId,
+  gradient,
+  gradientId
+}) {
+  const stops = gradientStops(gradient);
+  return /* @__PURE__ */ jsxs("defs", { children: [
+    /* @__PURE__ */ jsx("radialGradient", { cx: "50%", cy: "50%", id: gradientId, r: "50%", children: stops.map((stop) => /* @__PURE__ */ jsx(
+      "stop",
+      {
+        offset: `${(stop.offset * 100).toString()}%`,
+        stopColor: stop.color
+      },
+      stop.offset
+    )) }),
+    /* @__PURE__ */ jsx("filter", { id: blurId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: 12 }) })
+  ] });
+}
+function DataSummary({ data, titleId }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": titleId, className: "sr-only", role: "region", children: [
+    /* @__PURE__ */ jsx("h3", { id: titleId, children: "Heat map data summary" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      data.length.toString(),
+      " point",
+      data.length === 1 ? "" : "s",
+      " plotted on the heat map."
+    ] }),
+    /* @__PURE__ */ jsx("ul", { children: data.map((point) => /* @__PURE__ */ jsx("li", { children: `${point.lat.toString()}, ${point.lng.toString()}: weight ${(point.weight ?? 1).toString()}` }, point.id)) })
+  ] });
+}
+function Stage({
+  backdrop,
+  backdropAlt,
+  blur,
+  blurId,
+  data,
+  gradient,
+  gradientId,
+  opacity,
+  radius
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          GradientDefs,
+          {
+            blurId,
+            gradient,
+            gradientId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            "data-heat-layer": true,
+            filter: blur > 0 ? `url(#${blurId})` : void 0,
+            opacity,
+            children: data.map((point) => /* @__PURE__ */ jsx(
+              HeatBlob,
+              {
+                gradientId,
+                point,
+                radius
+              },
+              point.raw.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+const HeatMapOverlay = forwardRef(
+  (props, ref) => {
+    const {
+      backdrop,
+      backdropAlt,
+      blur = 12,
+      children,
+      className,
+      data,
+      gradient = DEFAULT_GRADIENT,
+      labels,
+      opacity = 0.7,
+      radius = 30,
+      ...rest
+    } = props;
+    const titleId = useId();
+    const gradientId = useId();
+    const blurId = useId();
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const projected = useMemo(() => projectPoints(data), [data]);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Stage,
+            {
+              backdrop,
+              backdropAlt,
+              blur,
+              blurId,
+              data: projected,
+              gradient,
+              gradientId,
+              opacity,
+              radius
+            }
+          ),
+          children ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur", children }) : null,
+          /* @__PURE__ */ jsx(DataSummary, { data, titleId })
+        ]
+      }
+    );
+  }
+);
+HeatMapOverlay.displayName = "HeatMapOverlay";
+export {
+  HeatMapOverlay
+};

package/dist/components/heat-map-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  HeatMapOverlay
+} from "./heat-map-overlay";
+export {
+  HeatMapOverlay
+};

package/dist/components/heat-overlay/heat-overlay.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const TONE_FILL = {
+  cool: "fill-blue-500",
+  danger: "fill-red-500",
+  neutral: "fill-foreground",
+  warn: "fill-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Heat overlay"
+};
+const clamp01 = (v) => {
+  if (v < 0) {
+    return 0;
+  }
+  if (v > 1) {
+    return 1;
+  }
+  return v;
+};
+const HeatBlob = (props) => {
+  const { defaultTone, gradientId, intensity, point } = props;
+  const weight = clamp01(point.weight);
+  const tone = point.tone ?? defaultTone;
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      className: cn("mix-blend-multiply", TONE_FILL[tone]),
+      cx: point.x,
+      cy: point.y,
+      "data-heat-point": point.id,
+      "data-heat-tone": tone,
+      fill: `url(#${gradientId})`,
+      fillOpacity: weight * 0.6,
+      r: Math.max(8, intensity * weight)
+    }
+  );
+};
+const HeatOverlay = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      defaultTone = "warn",
+      intensity = 48,
+      labels,
+      points,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const gradientId = useId();
+    if (points.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-10 h-full w-full",
+          className
+        ),
+        "data-heat-overlay": true,
+        ref,
+        role: "img",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { cx: "50%", cy: "50%", id: gradientId, r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "currentColor", stopOpacity: "0.4" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
+          ] }) }),
+          points.map((point) => /* @__PURE__ */ jsx(
+            HeatBlob,
+            {
+              defaultTone,
+              gradientId,
+              intensity,
+              point
+            },
+            point.id
+          ))
+        ]
+      }
+    );
+  }
+);
+HeatOverlay.displayName = "HeatOverlay";
+export {
+  HeatOverlay
+};

package/dist/components/heat-overlay/index.js

@@ -0,0 +1,6 @@
+import {
+  HeatOverlay
+} from "./heat-overlay";
+export {
+  HeatOverlay
+};

package/dist/components/historic-timeline/historic-timeline.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_TICK_COUNT = 8;
+const COLOR_PALETTE = {
+  amber: {
+    band: "bg-amber-500/15",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    marker: "border-amber-500 bg-amber-500"
+  },
+  blue: {
+    band: "bg-blue-500/15",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    marker: "border-blue-500 bg-blue-500"
+  },
+  emerald: {
+    band: "bg-emerald-500/15",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    marker: "border-emerald-500 bg-emerald-500"
+  },
+  neutral: {
+    band: "bg-muted",
+    chip: "bg-muted text-muted-foreground",
+    marker: "border-muted-foreground bg-muted-foreground"
+  },
+  purple: {
+    band: "bg-purple-500/15",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    marker: "border-purple-500 bg-purple-500"
+  },
+  red: {
+    band: "bg-red-500/15",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300",
+    marker: "border-red-500 bg-red-500"
+  },
+  rose: {
+    band: "bg-rose-500/15",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+    marker: "border-rose-500 bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Historic timeline"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function yearToPercent(year, start, end) {
+  const span = end - start;
+  if (span <= 0) return 0;
+  return clamp((year - start) / span * 100, 0, 100);
+}
+function buildTicks(start, end, count) {
+  const safeCount = Math.max(2, count);
+  const span = end - start;
+  if (span <= 0) return [];
+  const step = span / (safeCount - 1);
+  return Array.from({ length: safeCount }).map((_, index) => {
+    const year = Math.round(start + step * index);
+    return {
+      label: formatYear(year),
+      offset: yearToPercent(year, start, end)
+    };
+  });
+}
+function resolveCategoryColor(categoryId, categories) {
+  if (!categoryId) return "neutral";
+  const match = categories.find((category) => category.id === categoryId);
+  return match?.color ?? "neutral";
+}
+function Axis({ ticks }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-7 border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+      children: ticks.map((tick) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-1 -translate-x-1/2",
+          style: { left: `${tick.offset.toString()}%` },
+          children: tick.label
+        },
+        tick.label
+      ))
+    }
+  );
+}
+function EraBands({ endYear, eras, startYear }) {
+  if (eras.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: eras.map((era) => {
+    const left = yearToPercent(era.startYear, startYear, endYear);
+    const right = yearToPercent(era.endYear, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const palette = COLOR_PALETTE[era.color ?? "neutral"];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-y-0", palette.band),
+        "data-era-id": era.id,
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        }
+      },
+      era.id
+    );
+  }) });
+}
+function EraLabels({ endYear, eras, startYear }) {
+  if (eras.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-6 border-b border-border", children: eras.map((era) => {
+    const left = yearToPercent(era.startYear, startYear, endYear);
+    const right = yearToPercent(era.endYear, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const palette = COLOR_PALETTE[era.color ?? "neutral"];
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute top-1 truncate rounded px-1 text-[10px] font-semibold uppercase tracking-wide",
+          palette.chip
+        ),
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        },
+        children: era.name
+      },
+      `${era.id}-label`
+    );
+  }) });
+}
+function PeriodLane({
+  categories,
+  endYear,
+  periods,
+  startYear
+}) {
+  if (periods.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "relative flex h-7 items-center border-b border-border/60", children: periods.map((period) => {
+    const left = yearToPercent(period.startYear, startYear, endYear);
+    const right = yearToPercent(period.endYear, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const color = resolveCategoryColor(period.category, categories);
+    const palette = COLOR_PALETTE[color];
+    const titleText = typeof period.title === "string" ? period.title : "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": titleText ? `${titleText}, ${formatYear(period.startYear)} \u2013 ${formatYear(period.endYear)}` : void 0,
+        className: cn(
+          "absolute top-1 flex h-5 items-center overflow-hidden rounded-sm px-1 text-[10px] font-medium",
+          palette.chip
+        ),
+        "data-period-id": period.id,
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "truncate", children: period.title })
+      },
+      period.id
+    );
+  }) });
+}
+function EventMarker({
+  categories,
+  endYear,
+  event,
+  startYear
+}) {
+  if (event.year < startYear || event.year > endYear) return null;
+  const left = yearToPercent(event.year, startYear, endYear);
+  const color = resolveCategoryColor(event.category, categories);
+  const palette = COLOR_PALETTE[color];
+  const titleText = typeof event.title === "string" ? event.title : "";
+  const ariaLabel = titleText ? `${titleText}, ${formatYear(event.year)}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: "absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+      "data-event-id": event.id,
+      "data-event-year": event.year,
+      style: { left: `${left.toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "h-3 w-3 rounded-full border-2 ring-2 ring-background",
+              palette.marker
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-4 w-44 -translate-x-1/2 text-center", children: [
+          event.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "block truncate text-xs font-medium text-foreground underline-offset-4 hover:underline",
+              href: event.href,
+              children: event.title
+            }
+          ) : /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-foreground", children: event.title }),
+          /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-muted-foreground", children: [
+            formatYear(event.year),
+            event.description ? /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              event.description
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function EventLane({
+  categories,
+  endYear,
+  events,
+  startYear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-20", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border" }),
+    events.map((event) => /* @__PURE__ */ jsx(
+      EventMarker,
+      {
+        categories,
+        endYear,
+        event,
+        startYear
+      },
+      event.id
+    ))
+  ] });
+}
+function Legend({ categories }) {
+  if (categories.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 border-t border-border px-3 py-2 text-xs", children: categories.map((category) => {
+    const palette = COLOR_PALETTE[category.color ?? "neutral"];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full px-2 py-0.5",
+          palette.chip
+        ),
+        "data-category-id": category.id,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-2 w-2 rounded-full", palette.marker)
+            }
+          ),
+          category.label
+        ]
+      },
+      category.id
+    );
+  }) });
+}
+const HistoricTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      categories = [],
+      className,
+      endYear,
+      eras = [],
+      events = [],
+      labels,
+      periods = [],
+      startYear,
+      tickCount = DEFAULT_TICK_COUNT,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const ticks = useMemo(
+      () => buildTicks(startYear, endYear, tickCount),
+      [endYear, startYear, tickCount]
+    );
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(Axis, { ticks }),
+          /* @__PURE__ */ jsx(EraLabels, { endYear, eras, startYear }),
+          /* @__PURE__ */ jsx(
+            PeriodLane,
+            {
+              categories,
+              endYear,
+              periods,
+              startYear
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
+            /* @__PURE__ */ jsx(
+              EventLane,
+              {
+                categories,
+                endYear,
+                events,
+                startYear
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Legend, { categories })
+        ]
+      }
+    );
+  }
+);
+HistoricTimeline.displayName = "HistoricTimeline";
+export {
+  HistoricTimeline
+};

package/dist/components/historic-timeline/index.js

@@ -0,0 +1,6 @@
+import {
+  HistoricTimeline
+} from "./historic-timeline";
+export {
+  HistoricTimeline
+};