@aiaiai-pt/design-system 0.4.4 → 0.5.1

package/components/map-utils.js

@@ -0,0 +1,338 @@
+/**
+ * Shared utilities for map components.
+ * Not exported from index.js — internal to map components only.
+ */
+
+/**
+ * @typedef {{ type: 'osm' }} OsmSource
+ * @typedef {{ type: 'xyz', url: string, attributions?: string, maxZoom?: number }} XyzSource
+ * @typedef {{ type: 'stadia', layer: string, retina?: boolean, apiKey?: string }} StadiaSource
+ * @typedef {OsmSource | XyzSource | StadiaSource} TileSourceConfig
+ */
+
+/**
+ * Creates an OL tile layer from a config object.
+ *
+ * @param {TileSourceConfig} config
+ * @returns {Promise<import('ol/layer/Tile.js').default>}
+ */
+export async function createTileLayer(config) {
+  const { default: TileLayer } = await import("ol/layer/Tile.js");
+
+  if (config.type === "stadia") {
+    const { default: StadiaMaps } = await import("ol/source/StadiaMaps.js");
+    return new TileLayer({
+      source: new StadiaMaps({
+        layer: config.layer,
+        retina: config.retina ?? true,
+        apiKey: config.apiKey,
+      }),
+    });
+  }
+
+  if (config.type === "xyz") {
+    const { default: XYZ } = await import("ol/source/XYZ.js");
+    return new TileLayer({
+      source: new XYZ({
+        url: config.url,
+        attributions: config.attributions,
+        maxZoom: config.maxZoom,
+        crossOrigin: "anonymous",
+      }),
+    });
+  }
+
+  const { default: OSM } = await import("ol/source/OSM.js");
+  return new TileLayer({ source: new OSM() });
+}
+
+// ─── Theme-Reactive Style Factory ────────────────────────────────
+
+/**
+ * @typedef {object} MapStyles
+ * @property {import('ol/style/Style.js').default} marker
+ * @property {import('ol/style/Style.js').default} polygon
+ * @property {(size: number) => import('ol/style/Style.js').default} cluster
+ * @property {() => void} refresh — re-read CSS tokens, mutate styles in place
+ */
+
+/**
+ * Creates OL styles from DS tokens. Returns mutable style objects
+ * with a refresh() method that re-reads CSS vars and updates the
+ * styles in place — call after theme change, then source.changed().
+ *
+ * @param {Element} el
+ * @returns {Promise<MapStyles>}
+ */
+export async function createMapStyles(el) {
+  const [
+    { default: Style },
+    { default: CircleStyle },
+    { default: Fill },
+    { default: Stroke },
+    { default: Text },
+  ] = await Promise.all([
+    import("ol/style/Style.js"),
+    import("ol/style/Circle.js"),
+    import("ol/style/Fill.js"),
+    import("ol/style/Stroke.js"),
+    import("ol/style/Text.js"),
+  ]);
+
+  // Mutable fill/stroke refs — mutated in-place on refresh()
+  const markerFillObj = new Fill({ color: "" });
+  const markerStrokeObj = new Stroke({ color: "", width: 0 });
+  const polyFillObj = new Fill({ color: "" });
+  const polyStrokeObj = new Stroke({ color: "", width: 0 });
+
+  let markerRadiusVal = 8;
+  let clusterBaseRadiusVal = 16;
+  let clusterFillColor = "";
+  let clusterTextColor = "";
+  let clusterFontStr = "";
+
+  const marker = new Style({
+    image: new CircleStyle({
+      radius: 8,
+      fill: markerFillObj,
+      stroke: markerStrokeObj,
+    }),
+  });
+
+  const polygon = new Style({
+    fill: polyFillObj,
+    stroke: polyStrokeObj,
+  });
+
+  /** @type {Map<string, import('ol/style/Style.js').default>} */
+  const clusterCache = new Map();
+
+  function readTokens() {
+    markerFillObj.setColor(cssVar(el, "--map-marker-fill", "#ff6b35"));
+    markerStrokeObj.setColor(cssVar(el, "--map-marker-stroke", "#fff"));
+    markerStrokeObj.setWidth(cssPx(el, "--map-marker-stroke-width", 2));
+    markerRadiusVal = cssPx(el, "--map-marker-radius", 8);
+    polyFillObj.setColor(
+      cssVar(el, "--map-polygon-fill", "rgba(255,107,53,0.2)"),
+    );
+    polyStrokeObj.setColor(cssVar(el, "--map-polygon-stroke", "#ff6b35"));
+    polyStrokeObj.setWidth(cssPx(el, "--map-polygon-stroke-width", 2));
+    clusterBaseRadiusVal = cssPx(el, "--map-cluster-radius", 16);
+    clusterFillColor = cssVar(el, "--map-cluster-fill", "#ff6b35");
+    clusterTextColor = cssVar(el, "--map-cluster-text-fill", "#fff");
+    const font = cssVar(el, "--map-cluster-font", "monospace");
+    const fontSize = cssVar(el, "--map-cluster-font-size", "12px");
+    clusterFontStr = `600 ${fontSize} ${font}`;
+
+    // Rebuild marker image with new radius (CircleStyle radius is immutable)
+    marker.setImage(
+      new CircleStyle({
+        radius: markerRadiusVal,
+        fill: markerFillObj,
+        stroke: markerStrokeObj,
+      }),
+    );
+  }
+
+  // Initial read
+  readTokens();
+
+  /** @param {number} size */
+  function cluster(size) {
+    const key = `c-${size}`;
+    let cached = clusterCache.get(key);
+    if (cached) return cached;
+
+    if (size === 1) {
+      clusterCache.set(key, marker);
+      return marker;
+    }
+
+    const style = new Style({
+      image: new CircleStyle({
+        radius: clusterBaseRadiusVal + Math.min(size, 20),
+        fill: new Fill({ color: clusterFillColor }),
+      }),
+      text: new Text({
+        text: String(size),
+        fill: new Fill({ color: clusterTextColor }),
+        font: clusterFontStr,
+      }),
+    });
+
+    clusterCache.set(key, style);
+    return style;
+  }
+
+  function refresh() {
+    readTokens();
+    clusterCache.clear(); // cluster styles must be rebuilt with new colors
+  }
+
+  return { marker, polygon, cluster, refresh };
+}
+
+// ─── Theme Watcher ───────────────────────────────────────────────
+
+/**
+ * Watches for theme changes (data-theme attribute, class changes on <html>,
+ * OS prefers-color-scheme). Calls onchange when a theme switch is detected.
+ * Returns a dispose function.
+ *
+ * @param {() => void} onchange
+ * @returns {() => void} dispose
+ */
+export function watchTheme(onchange) {
+  const mo = new MutationObserver(() => onchange());
+  mo.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "class"],
+  });
+
+  const mql = window.matchMedia("(prefers-color-scheme: dark)");
+  const handler = () => onchange();
+  mql.addEventListener("change", handler);
+
+  return () => {
+    mo.disconnect();
+    mql.removeEventListener("change", handler);
+  };
+}
+
+// ─── Error Rendering ─────────────────────────────────────────────
+
+/**
+ * Renders a visible error state inside a map container.
+ *
+ * @param {HTMLElement} el
+ * @param {string} component
+ * @param {Error} error
+ */
+export function renderMapError(el, component, error) {
+  const msg = error.message || String(error);
+  const isModuleError =
+    msg.includes("Failed to fetch") ||
+    msg.includes("Module not found") ||
+    msg.includes("Cannot find module");
+
+  el.innerHTML = "";
+  const errorEl = document.createElement("div");
+  errorEl.setAttribute("role", "alert");
+  errorEl.style.cssText = `
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    height: 100%; min-height: 120px; padding: 24px; text-align: center;
+    font-family: var(--type-body-sm-font, sans-serif); font-size: var(--type-body-sm-size, 13px);
+    color: var(--color-text-muted, #888); background: var(--color-surface-secondary, #f5f5f5);
+    border-radius: inherit;
+  `;
+
+  const title = document.createElement("strong");
+  title.style.cssText = `
+    display: block; margin-bottom: 4px;
+    font-family: var(--type-label-font, monospace); font-size: var(--type-label-size, 11px);
+    letter-spacing: 0.05em; color: var(--color-destructive, #c00);
+  `;
+  title.textContent = `${component} FAILED`;
+
+  const detail = document.createElement("span");
+  detail.textContent = isModuleError
+    ? "OpenLayers (ol) is not installed. Add it to your dependencies."
+    : msg;
+
+  errorEl.appendChild(title);
+  errorEl.appendChild(detail);
+  el.appendChild(errorEl);
+
+  console.error(`[${component}]`, error);
+}
+
+// ─── CSS Helpers ─────────────────────────────────────────────────
+
+/**
+ * @param {Element} el
+ * @param {string} prop
+ * @param {string} fallback
+ * @returns {string}
+ */
+export function cssVar(el, prop, fallback) {
+  const val = getComputedStyle(el).getPropertyValue(prop).trim();
+  return val || fallback;
+}
+
+/**
+ * Resolves a CSS custom property to a pixel number via probe element.
+ *
+ * @param {Element} el
+ * @param {string} prop
+ * @param {number} fallback
+ * @returns {number}
+ */
+export function cssPx(el, prop, fallback) {
+  const raw = getComputedStyle(el).getPropertyValue(prop).trim();
+  if (!raw) return fallback;
+
+  const probe = document.createElement("div");
+  probe.style.cssText = `position:absolute;visibility:hidden;width:${raw}`;
+  el.appendChild(probe);
+  const px = probe.offsetWidth;
+  el.removeChild(probe);
+  return px || fallback;
+}
+
+/**
+ * Resolves any CSS color expression (hex, rgb, color-mix, var refs)
+ * to a concrete rgb()/rgba() string via a probe element.
+ * Required because getComputedStyle doesn't resolve color-mix() on
+ * custom properties — only on applied styles like backgroundColor.
+ *
+ * @param {Element} el
+ * @param {string} value — raw CSS color expression
+ * @returns {string} — resolved rgb()/rgba() string
+ */
+function resolveColor(el, value) {
+  const probe = document.createElement("div");
+  probe.style.cssText = `position:absolute;visibility:hidden;background-color:${value}`;
+  el.appendChild(probe);
+  const resolved = getComputedStyle(probe).backgroundColor;
+  el.removeChild(probe);
+  return resolved || value;
+}
+
+/**
+ * Extracts RGB components from a resolved color string.
+ * Handles rgb(r, g, b) and rgba(r, g, b, a) formats.
+ *
+ * @param {string} color
+ * @returns {{ r: number, g: number, b: number }}
+ */
+function parseRgb(color) {
+  const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (match) return { r: +match[1], g: +match[2], b: +match[3] };
+  return { r: 254, g: 228, b: 142 };
+}
+
+/**
+ * Reads heatmap gradient stops from CSS custom properties.
+ * Resolves color-mix() and other CSS color expressions to concrete
+ * rgb values that OL's canvas gradient can consume.
+ *
+ * @param {Element} el
+ * @returns {string[]}
+ */
+export function getHeatmapGradient(el) {
+  const styles = getComputedStyle(el);
+  const rawStops = [
+    styles.getPropertyValue("--map-heatmap-stop-1").trim(),
+    styles.getPropertyValue("--map-heatmap-stop-2").trim(),
+    styles.getPropertyValue("--map-heatmap-stop-3").trim(),
+    styles.getPropertyValue("--map-heatmap-stop-4").trim(),
+  ].filter(Boolean);
+
+  if (rawStops.length >= 2) {
+    const stops = rawStops.map((s) => resolveColor(el, s));
+    const { r, g, b } = parseRgb(stops[0]);
+    return [`rgba(${r}, ${g}, ${b}, 0)`, ...stops];
+  }
+
+  return ["rgba(251, 227, 142, 0)", "#fbe38e", "#fb923c", "#e85a28", "#ae2a1e"];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",
@@ -11,6 +11,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "workspaces": [
+    "site"
+  ],
   "scripts": {
     "build:types": "svelte-package --input . --output dist && cp dist/components/*.d.ts components/ && rm -rf dist",
     "prepublishOnly": "npm run build:types"
@@ -51,10 +54,14 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
     "@lezer/highlight": "^1.0.0",
+    "date-fns": "^4.1.0",
+    "ol": "^10.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
+    "date-fns": "^4.1.0",
+    "ol": "^10.8.0",
     "svelte": "^5.55.3",
     "svelte-check": "^4.4.6",
     "typescript": "^5.9.3"

package/tokens/components.css

@@ -654,6 +654,221 @@
   --palette-highlight-color: var(--color-accent);
   --palette-transition: var(--duration-normal) var(--easing-enter);
 
+  /* ═══════════════════════════════════════════════
+     DATEPICKER
+     ═══════════════════════════════════════════════ */
+
+  --datepicker-calendar-padding: var(--space-sm);
+
+  /* Navigation bar */
+  --datepicker-nav-font: var(--type-label-font);
+  --datepicker-nav-size: var(--type-label-size);
+  --datepicker-nav-tracking: var(--type-label-tracking);
+  --datepicker-nav-color: var(--color-text);
+  --datepicker-nav-btn-size: var(--button-sm-height);
+  --datepicker-nav-btn-radius: var(--radius-sm);
+  --datepicker-nav-btn-hover-bg: var(--color-surface-secondary);
+
+  /* Weekday headers */
+  --datepicker-weekday-font: var(--type-label-font);
+  --datepicker-weekday-size: var(--type-caption-size);
+  --datepicker-weekday-tracking: var(--type-caption-tracking);
+  --datepicker-weekday-color: var(--color-text-muted);
+
+  /* Day cells */
+  --datepicker-day-size: var(--button-md-height);
+  --datepicker-day-font: var(--type-data-font);
+  --datepicker-day-font-size: var(--type-body-sm-size);
+  --datepicker-day-radius: var(--radius-sm);
+  --datepicker-day-hover-bg: var(--color-surface-secondary);
+  --datepicker-day-selected-bg: var(--color-accent);
+  --datepicker-day-selected-text: var(--color-text-on-accent);
+  --datepicker-day-today-border: var(--border-width) solid
+    var(--color-border-strong);
+  --datepicker-day-outside-opacity: 0.3;
+  --datepicker-day-disabled-opacity: 0.2;
+
+  /* Trigger (inherits --input-* for visual consistency) */
+  --datepicker-icon-size: var(--icon-size-sm);
+  --datepicker-icon-color: var(--color-text-muted);
+  --datepicker-placeholder-color: var(--input-placeholder);
+
+  /* Range selection (DateRangePicker) */
+  --datepicker-range-bg: var(--color-accent-subtle);
+  --datepicker-range-hover-bg: var(--color-surface-tertiary);
+  --datepicker-range-endpoint-bg: var(--color-accent);
+  --datepicker-range-endpoint-text: var(--color-text-on-accent);
+
+  /* ═══════════════════════════════════════════════
+     STAT CARD
+     ═══════════════════════════════════════════════ */
+
+  --stat-padding: var(--space-lg);
+  --stat-radius: var(--radius-md);
+  --stat-border: var(--elevation-border);
+  --stat-bg: var(--color-surface);
+
+  /* Value (large number) */
+  --stat-value-font: var(--type-display-font);
+  --stat-value-size: var(--type-display-size);
+  --stat-value-weight: var(--type-display-weight);
+  --stat-value-tracking: var(--type-display-tracking);
+
+  /* Label */
+  --stat-label-font: var(--type-label-font);
+  --stat-label-size: var(--type-label-size);
+  --stat-label-tracking: var(--type-label-tracking);
+  --stat-label-color: var(--color-text-muted);
+
+  /* Trend */
+  --stat-trend-font: var(--type-body-sm-font);
+  --stat-trend-size: var(--type-body-sm-size);
+  --stat-trend-up-color: var(--color-success);
+  --stat-trend-down-color: var(--color-destructive);
+  --stat-trend-neutral-color: var(--color-text-muted);
+
+  /* Icon */
+  --stat-icon-size: var(--icon-size-lg);
+  --stat-icon-color: var(--color-text-muted);
+
+  /* Grid */
+  --stat-grid-gap: var(--space-md);
+
+  /* ═══════════════════════════════════════════════
+     MAP
+     ═══════════════════════════════════════════════ */
+
+  --map-radius: var(--radius-md);
+  --map-border: var(--elevation-border);
+
+  /* Marker */
+  --map-marker-radius: var(--space-sm);
+  --map-marker-fill: var(--color-accent);
+  --map-marker-stroke: var(--color-surface);
+  --map-marker-stroke-width: var(--border-width-thick);
+
+  /* Cluster */
+  --map-cluster-radius: var(--space-md);
+  --map-cluster-fill: var(--color-accent);
+  --map-cluster-text-fill: var(--color-text-on-accent);
+  --map-cluster-font: var(--type-label-font);
+  --map-cluster-font-size: var(--type-label-size);
+
+  /* Polygon / draw */
+  --map-polygon-fill: color-mix(in srgb, var(--color-accent) 20%, transparent);
+  --map-polygon-stroke: var(--color-accent);
+  --map-polygon-stroke-width: var(--border-width-thick);
+
+  /* Heatmap (accent-derived sequential ramp — follows theme) */
+  --map-heatmap-stop-1: var(--color-accent-subtle);
+  --map-heatmap-stop-2: color-mix(
+    in srgb,
+    var(--color-accent) 60%,
+    var(--color-accent-subtle)
+  );
+  --map-heatmap-stop-3: var(--color-accent);
+  --map-heatmap-stop-4: var(--color-accent-hover);
+
+  /* Popup (inherits card tokens) */
+  --map-popup-bg: var(--card-bg);
+  --map-popup-border: var(--elevation-border-strong);
+  --map-popup-radius: var(--card-radius);
+  --map-popup-padding: var(--space-sm);
+  --map-popup-shadow: var(--elevation-overlay);
+  --map-popup-arrow-size: var(--space-sm);
+  --map-popup-max-width: var(--content-width-narrow);
+
+  /* Draw mode toolbar */
+  --map-toolbar-bg: var(--color-surface);
+  --map-toolbar-border: var(--elevation-border);
+  --map-toolbar-radius: var(--radius-sm);
+  --map-toolbar-padding: var(--space-2xs);
+
+  /* ═══════════════════════════════════════════════
+     CALENDAR
+     ═══════════════════════════════════════════════ */
+
+  /* Container */
+  --calendar-bg: var(--color-surface);
+  --calendar-border: var(--elevation-border);
+  --calendar-radius: var(--radius-md);
+  --calendar-padding: var(--space-md);
+
+  /* Toolbar */
+  --calendar-toolbar-gap: var(--space-sm);
+  --calendar-title-font: var(--type-heading-font);
+  --calendar-title-size: var(--type-heading-size);
+  --calendar-title-weight: var(--type-heading-weight);
+  --calendar-title-tracking: var(--type-heading-tracking);
+  --calendar-title-color: var(--color-text);
+
+  /* View toggle */
+  --calendar-toggle-font: var(--type-label-font);
+  --calendar-toggle-size: var(--type-label-size);
+  --calendar-toggle-tracking: var(--type-label-tracking);
+  --calendar-toggle-padding: var(--space-2xs) var(--space-sm);
+  --calendar-toggle-radius: var(--radius-sm);
+  --calendar-toggle-color: var(--color-text-secondary);
+  --calendar-toggle-hover-bg: var(--color-surface-secondary);
+  --calendar-toggle-active-bg: var(--color-accent);
+  --calendar-toggle-active-text: var(--color-text-on-accent);
+
+  /* Navigation buttons */
+  --calendar-nav-btn-size: var(--button-sm-height);
+  --calendar-nav-btn-radius: var(--radius-sm);
+  --calendar-nav-btn-hover-bg: var(--color-surface-secondary);
+
+  /* Weekday headers */
+  --calendar-weekday-font: var(--type-label-font);
+  --calendar-weekday-size: var(--type-caption-size);
+  --calendar-weekday-tracking: var(--type-caption-tracking);
+  --calendar-weekday-color: var(--color-text-muted);
+  --calendar-weekday-height: var(--space-xl);
+
+  /* Month cell */
+  --calendar-cell-min-height: var(--space-4xl);
+  --calendar-cell-border: var(--border-width) solid var(--color-border);
+  --calendar-cell-padding: var(--space-2xs);
+  --calendar-cell-hover-bg: var(--color-surface-secondary);
+  --calendar-cell-today-bg: var(--color-accent-subtle);
+
+  /* Day number */
+  --calendar-day-font: var(--type-data-font);
+  --calendar-day-size: var(--type-body-sm-size);
+  --calendar-day-color: var(--color-text);
+  --calendar-day-outside-opacity: 0.3;
+  --calendar-day-today-size: var(--space-lg);
+  --calendar-day-today-bg: var(--color-accent);
+  --calendar-day-today-text: var(--color-text-on-accent);
+
+  /* Time gutter (week/day views) */
+  --calendar-time-font: var(--type-data-font);
+  --calendar-time-size: var(--type-caption-size);
+  --calendar-time-color: var(--color-text-muted);
+  --calendar-time-width: var(--space-3xl);
+
+  /* Hour slot (week/day views) */
+  --calendar-slot-height: var(--space-2xl);
+  --calendar-slot-border: var(--border-width) solid var(--color-border);
+
+  /* Now indicator */
+  --calendar-now-color: var(--color-destructive);
+  --calendar-now-width: var(--border-width-thick);
+
+  /* Event block */
+  --calendar-event-font: var(--type-body-sm-font);
+  --calendar-event-size: var(--type-caption-size);
+  --calendar-event-weight: var(--type-body-sm-weight);
+  --calendar-event-radius: var(--radius-sm);
+  --calendar-event-padding: var(--space-2xs) var(--space-xs);
+  --calendar-event-default-bg: var(--color-accent);
+  --calendar-event-default-text: var(--color-text-on-accent);
+
+  /* Overflow indicator */
+  --calendar-overflow-font: var(--type-caption-font);
+  --calendar-overflow-size: var(--type-caption-size);
+  --calendar-overflow-color: var(--color-text-muted);
+
   /* ═══════════════════════════════════════════════
      FOCUS RING (global)
      ═══════════════════════════════════════════════ */