@aiaiai-pt/design-system 0.4.4 → 0.5.1

package/components/MapDisplay.svelte

@@ -0,0 +1,139 @@
+<!--
+  @component MapDisplay
+
+  Read-only map showing a point or polygon. OpenLayers with configurable tiles.
+  Consumes --map-* tokens from components.css.
+
+  @example Point
+  <MapDisplay center={[-9.14, 38.74]} zoom={14} marker={[-9.14, 38.74]} />
+
+  @example Styled tiles
+  <MapDisplay center={[-9.14, 38.74]} tileSource={{ type: 'stadia', layer: 'stamen_toner_lite' }} />
+-->
+<script>
+  import { fromLonLat } from 'ol/proj.js';
+  import { createTileLayer, createMapStyles, watchTheme, renderMapError } from './map-utils.js';
+
+  let {
+    /** @type {[number, number]} — [longitude, latitude] WGS84 */
+    center = [0, 0],
+    /** @type {number} */
+    zoom = 12,
+    /** @type {[number, number] | undefined} — [lon, lat] for single marker */
+    marker = undefined,
+    /** @type {number[][] | undefined} — polygon coords [[lon,lat], ...] */
+    polygon = undefined,
+    /** @type {import('./map-utils.js').TileSourceConfig} */
+    tileSource = { type: 'osm' },
+    /** @type {string} */
+    height = '100%',
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @type {HTMLElement | undefined} */
+  let container = $state();
+
+  $effect(() => {
+    if (!container) return;
+
+    let disposed = false;
+    /** @type {import('ol/Map.js').default | undefined} */
+    let map;
+    /** @type {(() => void) | undefined} */
+    let disposeTheme;
+
+    (async () => { try {
+      const [
+        { default: OlMap },
+        { default: View },
+        { default: VectorLayer },
+        { default: VectorSource },
+        { default: Feature },
+        { default: Point },
+        { default: Polygon },
+      ] = await Promise.all([
+        import('ol/Map.js'),
+        import('ol/View.js'),
+        import('ol/layer/Vector.js'),
+        import('ol/source/Vector.js'),
+        import('ol/Feature.js'),
+        import('ol/geom/Point.js'),
+        import('ol/geom/Polygon.js'),
+      ]);
+
+      if (disposed) return;
+
+      const [tileLayer, styles] = await Promise.all([
+        createTileLayer(tileSource),
+        createMapStyles(container),
+      ]);
+      if (disposed) return;
+
+      /** @type {Feature[]} */
+      const features = [];
+
+      if (marker) {
+        features.push(new Feature({ geometry: new Point(fromLonLat(marker)) }));
+      }
+
+      if (polygon) {
+        features.push(new Feature({
+          geometry: new Polygon([polygon.map(c => fromLonLat(c))]),
+        }));
+      }
+
+      const vectorLayer = new VectorLayer({
+        source: new VectorSource({ features }),
+        style: (feature) => {
+          const type = feature.getGeometry()?.getType();
+          return type === 'Point' ? styles.marker : styles.polygon;
+        },
+      });
+
+      map = new OlMap({
+        target: container,
+        layers: [tileLayer, vectorLayer],
+        view: new View({
+          center: fromLonLat(center),
+          zoom,
+        }),
+        controls: [],
+      });
+
+      disposeTheme = watchTheme(() => {
+        styles.refresh();
+        vectorLayer.getSource()?.changed();
+      });
+    } catch (err) { renderMapError(container, 'MapDisplay', /** @type {Error} */ (err)); } })();
+
+    return () => {
+      disposed = true;
+      disposeTheme?.();
+      map?.setTarget(undefined);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="map-display {className}"
+  style:height
+  role="img"
+  aria-label="Map"
+  {...rest}
+></div>
+
+<style>
+  .map-display {
+    width: 100%;
+    border: var(--map-border);
+    border-radius: var(--map-radius);
+    overflow: hidden;
+  }
+
+  .map-display :global(.ol-viewport) {
+    border-radius: inherit;
+  }
+</style>

package/components/MapDisplay.svelte.d.ts

@@ -0,0 +1,35 @@
+export default MapDisplay;
+type MapDisplay = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MapDisplay
+ *
+ * Read-only map showing a point or polygon. OpenLayers with configurable tiles.
+ * Consumes --map-* tokens from components.css.
+ *
+ * @example Point
+ * <MapDisplay center={[-9.14, 38.74]} zoom={14} marker={[-9.14, 38.74]} />
+ *
+ * @example Styled tiles
+ * <MapDisplay center={[-9.14, 38.74]} tileSource={{ type: 'stadia', layer: 'stamen_toner_lite' }} />
+ */
+declare const MapDisplay: import("svelte").Component<{
+    center?: any[];
+    zoom?: number;
+    marker?: any;
+    polygon?: any;
+    tileSource?: Record<string, any>;
+    height?: string;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    center?: any[];
+    zoom?: number;
+    marker?: any;
+    polygon?: any;
+    tileSource?: Record<string, any>;
+    height?: string;
+    class?: string;
+} & Record<string, any>;

package/components/MapHeatmap.svelte

@@ -0,0 +1,164 @@
+<!--
+  @component MapHeatmap
+
+  Density visualization using OpenLayers built-in Heatmap layer.
+  Gradient derived from DS semantic color tokens by default.
+  Consumes --map-* tokens from components.css.
+
+  OL Heatmap intensity is density-driven: overlapping point quads
+  accumulate alpha. blur/radius are screen pixels (not map units).
+  Keep radius >= blur for peak intensity (blurSlope = radius/blur).
+
+  @example
+  <MapHeatmap
+    points={[{ lon: -9.14, lat: 38.74, weight: 5 }]}
+    radius={25}
+    blur={15}
+  />
+
+  @example Custom gradient
+  <MapHeatmap points={data} gradient={['#fef9ee', '#fef3c7', '#f59e0b', '#dc2626']} />
+-->
+<script>
+  import { fromLonLat } from 'ol/proj.js';
+  import { createTileLayer, getHeatmapGradient, watchTheme, renderMapError } from './map-utils.js';
+
+  let {
+    /** @type {{ lon: number, lat: number, weight?: number }[]} */
+    points = [],
+    /** @type {[number, number]} — fallback center if no points [lon, lat] */
+    center = [0, 0],
+    /** @type {number} — fallback zoom if no points */
+    zoom = 6,
+    /** @type {number} — point radius in screen pixels. Keep >= blur for peak intensity. */
+    radius = 25,
+    /** @type {number} — blur falloff in screen pixels */
+    blur = 15,
+    /** @type {string[] | undefined} — custom gradient overrides tokens */
+    gradient = undefined,
+    /** @type {import('./map-utils.js').TileSourceConfig} */
+    tileSource = { type: 'osm' },
+    /** @type {number} — max zoom when auto-fitting to points extent */
+    maxZoom = 17,
+    /** @type {string} */
+    height = '100%',
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /** @type {HTMLElement | undefined} */
+  let container = $state();
+
+  $effect(() => {
+    if (!container) return;
+
+    let disposed = false;
+    /** @type {import('ol/Map.js').default | undefined} */
+    let map;
+    /** @type {(() => void) | undefined} */
+    let disposeTheme;
+
+    (async () => { try {
+      const [
+        { default: OlMap },
+        { default: View },
+        { default: VectorSource },
+        { default: Heatmap },
+        { default: Feature },
+        { default: Point },
+      ] = await Promise.all([
+        import('ol/Map.js'),
+        import('ol/View.js'),
+        import('ol/source/Vector.js'),
+        import('ol/layer/Heatmap.js'),
+        import('ol/Feature.js'),
+        import('ol/geom/Point.js'),
+      ]);
+
+      if (disposed) return;
+
+      const tileLayer = await createTileLayer(tileSource);
+      if (disposed) return;
+
+      // Non-linear weight normalization: sqrt lifts low values so they're
+      // visible while preserving relative ordering. OL expects 0-1.
+      const maxWeight = Math.max(...points.map(p => p.weight ?? 1), 1);
+
+      const features = points.map(p => {
+        const f = new Feature({ geometry: new Point(fromLonLat([p.lon, p.lat])) });
+        f.set('weight', Math.sqrt((p.weight ?? 1) / maxWeight));
+        return f;
+      });
+
+      const vectorSource = new VectorSource({ features });
+
+      const resolvedGradient = gradient ?? getHeatmapGradient(container);
+
+      const heatmapLayer = new Heatmap({
+        source: vectorSource,
+        blur,
+        radius,
+        gradient: resolvedGradient,
+        weight: (/** @type {import('ol/Feature.js').default} */ feature) =>
+          feature.get('weight') ?? 0,
+      });
+
+      map = new OlMap({
+        target: container,
+        layers: [tileLayer, heatmapLayer],
+        view: new View({
+          center: fromLonLat(center),
+          zoom,
+        }),
+      });
+
+      // Auto-fit view to points extent
+      if (points.length > 0) {
+        const extent = vectorSource.getExtent();
+        if (extent && isFinite(extent[0])) {
+          map.getView().fit(extent, {
+            padding: [50, 50, 50, 50],
+            maxZoom,
+          });
+        }
+      }
+
+      // Theme reactivity: re-read gradient tokens on theme change
+      if (!gradient) {
+        disposeTheme = watchTheme(() => {
+          heatmapLayer.setGradient(getHeatmapGradient(container));
+          map?.render();
+        });
+      }
+    } catch (err) { renderMapError(container, 'MapHeatmap', /** @type {Error} */ (err)); } })();
+
+    return () => {
+      disposed = true;
+      disposeTheme?.();
+      map?.setTarget(undefined);
+    };
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="map-heatmap {className}"
+  style:height
+  role="img"
+  aria-label="Heatmap"
+  {...rest}
+></div>
+
+<style>
+  .map-heatmap {
+    width: 100%;
+    border: var(--map-border);
+    border-radius: var(--map-radius);
+    overflow: hidden;
+  }
+
+  .map-heatmap :global(.ol-viewport) {
+    border-radius: inherit;
+  }
+</style>

package/components/MapHeatmap.svelte.d.ts

@@ -0,0 +1,50 @@
+export default MapHeatmap;
+type MapHeatmap = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MapHeatmap
+ *
+ * Density visualization using OpenLayers built-in Heatmap layer.
+ * Gradient derived from DS semantic color tokens by default.
+ * Consumes --map-* tokens from components.css.
+ *
+ * OL Heatmap intensity is density-driven: overlapping point quads
+ * accumulate alpha. blur/radius are screen pixels (not map units).
+ * Keep radius >= blur for peak intensity (blurSlope = radius/blur).
+ *
+ * @example
+ * <MapHeatmap
+ *   points={[{ lon: -9.14, lat: 38.74, weight: 5 }]}
+ *   radius={25}
+ *   blur={15}
+ * />
+ *
+ * @example Custom gradient
+ * <MapHeatmap points={data} gradient={['#fef9ee', '#fef3c7', '#f59e0b', '#dc2626']} />
+ */
+declare const MapHeatmap: import("svelte").Component<{
+    points?: any[];
+    center?: any[];
+    zoom?: number;
+    radius?: number;
+    blur?: number;
+    gradient?: any;
+    tileSource?: Record<string, any>;
+    maxZoom?: number;
+    height?: string;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    points?: any[];
+    center?: any[];
+    zoom?: number;
+    radius?: number;
+    blur?: number;
+    gradient?: any;
+    tileSource?: Record<string, any>;
+    maxZoom?: number;
+    height?: string;
+    class?: string;
+} & Record<string, any>;

package/components/MapPicker.svelte

@@ -0,0 +1,243 @@
+<!--
+  @component MapPicker
+
+  Interactive map for selecting a point or drawing a polygon.
+  OpenLayers with configurable tiles and Draw interaction.
+  Draw sketch styled with DS tokens (not OL blue default).
+  Consumes --map-* tokens from components.css.
+
+  @example Point selection
+  <MapPicker mode="point" onchange={(coords) => console.log(coords)} />
+
+  @example Polygon drawing
+  <MapPicker mode="polygon" onchange={(coords) => console.log(coords)} />
+-->
+<script module>
+  let _mappickerUid = 0;
+</script>
+
+<script>
+  import { fromLonLat, toLonLat } from 'ol/proj.js';
+  import { createTileLayer, createMapStyles, watchTheme, renderMapError } from './map-utils.js';
+
+  let {
+    /** @type {'point' | 'polygon'} */
+    mode = 'point',
+    /** @type {[number, number]} — initial center [lon, lat] */
+    center = [0, 0],
+    /** @type {number} */
+    zoom = 12,
+    /** @type {[number, number] | undefined} — current point value [lon, lat] */
+    value = $bindable(undefined),
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {import('./map-utils.js').TileSourceConfig} */
+    tileSource = { type: 'osm' },
+    /** @type {((coords: [number, number] | number[][]) => void) | undefined} */
+    onchange = undefined,
+    /** @type {string} */
+    height = '100%',
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `mappicker-${_mappickerUid++}`;
+  const pickerId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${pickerId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+
+  /** @type {HTMLElement | undefined} */
+  let container = $state();
+
+  $effect(() => {
+    if (!container || disabled) return;
+
+    let disposed = false;
+    /** @type {import('ol/Map.js').default | undefined} */
+    let map;
+    /** @type {(() => void) | undefined} */
+    let disposeTheme;
+
+    (async () => { try {
+      const [
+        { default: OlMap },
+        { default: View },
+        { default: VectorLayer },
+        { default: VectorSource },
+        { default: Feature },
+        { default: Point },
+        { default: Draw },
+      ] = await Promise.all([
+        import('ol/Map.js'),
+        import('ol/View.js'),
+        import('ol/layer/Vector.js'),
+        import('ol/source/Vector.js'),
+        import('ol/Feature.js'),
+        import('ol/geom/Point.js'),
+        import('ol/interaction/Draw.js'),
+      ]);
+
+      if (disposed) return;
+
+      const [tileLayer, styles] = await Promise.all([
+        createTileLayer(tileSource),
+        createMapStyles(container),
+      ]);
+      if (disposed) return;
+
+      const vectorSource = new VectorSource();
+
+      if (value && mode === 'point') {
+        vectorSource.addFeature(new Feature({ geometry: new Point(fromLonLat(value)) }));
+      }
+
+      const vectorLayer = new VectorLayer({
+        source: vectorSource,
+        style: (feature) => {
+          const type = feature.getGeometry()?.getType();
+          return type === 'Point' ? styles.marker : styles.polygon;
+        },
+      });
+
+      // Composite draw style: marker for vertices + polygon for fill/stroke
+      const drawStyle = [
+        styles.polygon,
+        styles.marker,
+      ];
+
+      const drawType = mode === 'point' ? 'Point' : 'Polygon';
+      const drawInteraction = new Draw({
+        source: vectorSource,
+        type: drawType,
+        style: drawStyle,
+      });
+
+      drawInteraction.on('drawstart', () => {
+        vectorSource.clear();
+      });
+
+      drawInteraction.on('drawend', (evt) => {
+        const geom = evt.feature.getGeometry();
+        if (!geom) return;
+
+        if (mode === 'point') {
+          const coords = /** @type {import('ol/geom/Point.js').default} */ (geom).getCoordinates();
+          const wgs84 = /** @type {[number, number]} */ (toLonLat(coords));
+          value = wgs84;
+          onchange?.(wgs84);
+        } else {
+          const coords = /** @type {import('ol/geom/Polygon.js').default} */ (geom).getCoordinates()[0];
+          const wgs84 = coords.map(c => /** @type {[number, number]} */ (toLonLat(c)));
+          onchange?.(wgs84);
+        }
+      });
+
+      const initialCenter = value && mode === 'point' ? fromLonLat(value) : fromLonLat(center);
+
+      map = new OlMap({
+        target: container,
+        layers: [tileLayer, vectorLayer],
+        view: new View({
+          center: initialCenter,
+          zoom,
+        }),
+      });
+
+      map.addInteraction(drawInteraction);
+
+      disposeTheme = watchTheme(() => {
+        styles.refresh();
+        vectorSource.changed();
+      });
+    } catch (err) { renderMapError(container, 'MapPicker', /** @type {Error} */ (err)); } })();
+
+    return () => {
+      disposed = true;
+      disposeTheme?.();
+      map?.setTarget(undefined);
+    };
+  });
+</script>
+
+<div class="map-picker {className}" {...rest}>
+  {#if label}
+    <label class="map-picker-label" for={pickerId}>{label}</label>
+  {/if}
+
+  <div
+    bind:this={container}
+    id={pickerId}
+    class="map-picker-canvas"
+    class:map-picker-error={!!error}
+    class:map-picker-disabled={disabled}
+    style:height
+    role="application"
+    aria-label={label ?? 'Map picker'}
+    aria-describedby={hasHint ? hintId : undefined}
+  ></div>
+
+  {#if error}
+    <span id={hintId} class="map-picker-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="map-picker-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .map-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .map-picker-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .map-picker-canvas {
+    width: 100%;
+    border: var(--map-border);
+    border-radius: var(--map-radius);
+    overflow: hidden;
+    cursor: crosshair;
+  }
+
+  .map-picker-canvas :global(.ol-viewport) {
+    border-radius: inherit;
+  }
+
+  .map-picker-canvas.map-picker-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .map-picker-canvas.map-picker-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .map-picker-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .map-picker-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+</style>

package/components/MapPicker.svelte.d.ts

@@ -0,0 +1,49 @@
+export default MapPicker;
+type MapPicker = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MapPicker
+ *
+ * Interactive map for selecting a point or drawing a polygon.
+ * OpenLayers with configurable tiles and Draw interaction.
+ * Draw sketch styled with DS tokens (not OL blue default).
+ * Consumes --map-* tokens from components.css.
+ *
+ * @example Point selection
+ * <MapPicker mode="point" onchange={(coords) => console.log(coords)} />
+ *
+ * @example Polygon drawing
+ * <MapPicker mode="polygon" onchange={(coords) => console.log(coords)} />
+ */
+declare const MapPicker: import("svelte").Component<{
+    mode?: string;
+    center?: any[];
+    zoom?: number;
+    value?: any;
+    label?: any;
+    help?: any;
+    error?: any;
+    disabled?: boolean;
+    tileSource?: Record<string, any>;
+    onchange?: any;
+    height?: string;
+    id?: any;
+    class?: string;
+} & Record<string, any>, {}, "value">;
+type $$ComponentProps = {
+    mode?: string;
+    center?: any[];
+    zoom?: number;
+    value?: any;
+    label?: any;
+    help?: any;
+    error?: any;
+    disabled?: boolean;
+    tileSource?: Record<string, any>;
+    onchange?: any;
+    height?: string;
+    id?: any;
+    class?: string;
+} & Record<string, any>;