@reuters-graphics/graphics-components 3.8.0 → 3.10.0

package/dist/components/Geocoder/Geocoder.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
   import { geocode, type GeocodeFeature, type GeocodeOptions } from './geocode';
+  import { normalizeMinLength, normalizeDebounceMs } from './normalize';
   import MagnifyingGlass from '../SearchInput/components/MagnifyingGlass.svelte';
   import X from '../SearchInput/components/X.svelte';
 
@@ -12,12 +13,25 @@
     searchPlaceholder?: string;
     /** Callback fired when a location is selected from the results. */
     onselect?: (location: { lng: number; lat: number; name: string }) => void;
+    /**
+     * Minimum number of characters before a request is made. Raising this
+     * cuts the number of paid geocoding requests per search. Defaults to 2.
+     */
+    minLength?: number;
+    /**
+     * Debounce window in milliseconds between the last keystroke and the
+     * request. Raising this fires fewer requests while the user is still
+     * typing (each request is billed). Defaults to 300.
+     */
+    debounceMs?: number;
   }
 
   let {
     accessToken,
     searchPlaceholder = 'Search for a location',
     onselect,
+    minLength = 2,
+    debounceMs = 300,
     autocomplete = true,
     bbox,
     country,
@@ -44,12 +58,22 @@
   let debounceTimer: ReturnType<typeof setTimeout>;
   let abortController: AbortController | null = null;
 
+  // Normalize the throttling props so a non-numeric value passed via markup
+  // (e.g. `minLength="two"`) can't coerce to NaN and disable the gate — which
+  // would bill a request on every keystroke. Fall back to the documented
+  // defaults, clamped to sane floors.
+  let effectiveMinLength = $derived(normalizeMinLength(minLength));
+  let effectiveDebounceMs = $derived(normalizeDebounceMs(debounceMs));
+
   function handleInput() {
     selectedIndex = -1;
     clearTimeout(debounceTimer);
     abortController?.abort();
 
-    if (query.length < 2) {
+    // Trim first so whitespace-only input (e.g. "  ") doesn't clear the gate
+    // and bill a request for an empty search.
+    const trimmed = query.trim();
+    if (trimmed.length < effectiveMinLength) {
       suggestions = [];
       return;
     }
@@ -58,7 +82,7 @@
       abortController = new AbortController();
       try {
         suggestions = await geocode(
-          query,
+          trimmed,
           {
             accessToken,
             autocomplete,
@@ -78,7 +102,7 @@
         if (e instanceof DOMException && e.name === 'AbortError') return;
         console.error('Geocoder error:', e);
       }
-    }, 300);
+    }, effectiveDebounceMs);
   }
 
   onDestroy(() => {

package/dist/components/Geocoder/Geocoder.svelte.d.ts

@@ -10,6 +10,17 @@ interface Props extends Omit<GeocodeOptions, 'accessToken'> {
         lat: number;
         name: string;
     }) => void;
+    /**
+     * Minimum number of characters before a request is made. Raising this
+     * cuts the number of paid geocoding requests per search. Defaults to 2.
+     */
+    minLength?: number;
+    /**
+     * Debounce window in milliseconds between the last keystroke and the
+     * request. Raising this fires fewer requests while the user is still
+     * typing (each request is billed). Defaults to 300.
+     */
+    debounceMs?: number;
 }
 /** `Geocoder` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-geocoder--docs) */
 declare const Geocoder: import("svelte").Component<Props, {}, "">;

package/dist/components/Geocoder/normalize.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Coercion helpers for the Geocoder's request-throttling props.
+ *
+ * These props can arrive as strings when set via markup (e.g.
+ * `minLength="two"`), so a non-numeric value must not be trusted directly: a
+ * `NaN` would disable the length gate or the debounce and bill a Mapbox request
+ * on every keystroke. Both helpers fall back to the documented defaults and
+ * clamp to sane floors.
+ */
+/**
+ * Coerce a consumer-supplied `minLength` to a safe integer of at least 1.
+ * Invalid or sub-1 values fall back to `fallback` (default 2).
+ */
+export declare function normalizeMinLength(value: unknown, fallback?: number): number;
+/**
+ * Coerce a consumer-supplied `debounceMs` to a finite, non-negative number.
+ * Invalid or negative values fall back to `fallback` (default 300).
+ */
+export declare function normalizeDebounceMs(value: unknown, fallback?: number): number;

package/dist/components/Geocoder/normalize.js

@@ -0,0 +1,25 @@
+/**
+ * Coercion helpers for the Geocoder's request-throttling props.
+ *
+ * These props can arrive as strings when set via markup (e.g.
+ * `minLength="two"`), so a non-numeric value must not be trusted directly: a
+ * `NaN` would disable the length gate or the debounce and bill a Mapbox request
+ * on every keystroke. Both helpers fall back to the documented defaults and
+ * clamp to sane floors.
+ */
+/**
+ * Coerce a consumer-supplied `minLength` to a safe integer of at least 1.
+ * Invalid or sub-1 values fall back to `fallback` (default 2).
+ */
+export function normalizeMinLength(value, fallback = 2) {
+    const n = Number(value);
+    return Number.isFinite(n) && n >= 1 ? Math.floor(n) : fallback;
+}
+/**
+ * Coerce a consumer-supplied `debounceMs` to a finite, non-negative number.
+ * Invalid or negative values fall back to `fallback` (default 300).
+ */
+export function normalizeDebounceMs(value, fallback = 300) {
+    const n = Number(value);
+    return Number.isFinite(n) && n >= 0 ? n : fallback;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -82,12 +82,19 @@
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
     "react-syntax-highlighter": "^15.6.1",
+    "remark-mdx": "^3.1.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.86.3",
     "storybook": "^8.6.12",
     "svelte": "^5.28.1",
     "svelte-check": "^4.1.6",
+    "ts-morph": "^28.0.0",
+    "tsx": "^4.22.4",
     "typescript": "^5.8.3",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.1.0",
     "vite": "^6.3.2"
   },
   "dependencies": {
@@ -118,7 +125,19 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./scss/*": "./dist/scss/*"
+    "./scss/*": "./dist/scss/*",
+    "./llm-docs/*": "./dist/llm-docs/*"
+  },
+  "llms": {
+    "description": [
+      "Svelte 5 component library for Reuters Graphics journalism.",
+      "Provides components for page layout, text elements, multimedia, maps, and data visualisation,",
+      "alongside a full SCSS design system with spacing tokens, typography utilities, colour palettes,",
+      "and CSS custom properties for theming."
+    ],
+    "files": [
+      "./dist/llm-docs/**/*"
+    ]
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -129,7 +148,8 @@
     "start": "storybook dev -p 3000",
     "lint": "eslint --fix",
     "format": "prettier . --write",
-    "build": "rimraf ./dist && svelte-package -i ./src && publint",
+    "generate:llm-docs": "tsx scripts/generate-llm-docs/index.ts",
+    "build": "rimraf ./dist && svelte-package -i ./src && pnpm generate:llm-docs && publint",
     "build:docs": "storybook build -o docs",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",