@a4ui/core 0.35.1 → 0.36.0

package/dist/ui/DataGrid.d.ts

@@ -18,6 +18,18 @@ export interface DataGridProps {
     pageSize?: number;
     /** Show the global text filter above the table. Defaults to true. */
     filterable?: boolean;
+    /**
+     * Copy overrides, for apps that do not run in English. Every user-visible
+     * string this component renders on its own is here; without them a Spanish
+     * or French page shows "Filter…" and "12 rows" in the middle of its own
+     * table with no way to change it.
+     * @default 'Filter…'
+     */
+    filterPlaceholder?: string;
+    /** Accessible name for the filter box. @default 'Filter rows' */
+    filterLabel?: string;
+    /** Builds the row-count summary. @default (n) => `${n} rows` */
+    rowsSummary?: (count: number) => string;
     class?: string;
 }
 /**

package/dist/ui/LocationPicker.d.ts

@@ -9,6 +9,15 @@ export interface LocationPickerProps {
     value?: LocationValue;
     /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
     onChange?: (v: LocationValue) => void;
+    /**
+     * Placeholder for the free-text label field. Overridable because this was
+     * hardcoded English inside an otherwise fully translatable component — a
+     * Spanish form showed "Location label" in the middle of its own wizard.
+     * @default 'Location label'
+     */
+    labelPlaceholder?: string;
+    /** Accessible name for the "use my location" button. @default 'Use my location' */
+    geolocateLabel?: string;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.35.1'
+export const A4UI_VERSION = '0.36.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/DataGrid.tsx

@@ -31,6 +31,18 @@ export interface DataGridProps {
   pageSize?: number
   /** Show the global text filter above the table. Defaults to true. */
   filterable?: boolean
+  /**
+   * Copy overrides, for apps that do not run in English. Every user-visible
+   * string this component renders on its own is here; without them a Spanish
+   * or French page shows "Filter…" and "12 rows" in the middle of its own
+   * table with no way to change it.
+   * @default 'Filter…'
+   */
+  filterPlaceholder?: string
+  /** Accessible name for the filter box. @default 'Filter rows' */
+  filterLabel?: string
+  /** Builds the row-count summary. @default (n) => `${n} rows` */
+  rowsSummary?: (count: number) => string
   class?: string
 }
 
@@ -126,8 +138,8 @@ export function DataGrid(props: DataGridProps): JSX.Element {
               setQuery(v)
               setPage(1)
             }}
-            placeholder="Filter…"
-            aria-label="Filter rows"
+            placeholder={props.filterPlaceholder ?? 'Filter…'}
+            aria-label={props.filterLabel ?? 'Filter rows'}
           />
         </div>
       )}
@@ -170,7 +182,7 @@ export function DataGrid(props: DataGridProps): JSX.Element {
         page={Math.min(page(), totalPages())}
         totalPages={totalPages()}
         onChange={setPage}
-        summary={`${sorted().length} rows`}
+        summary={props.rowsSummary?.(sorted().length) ?? `${sorted().length} rows`}
       />
     </div>
   )

package/src/ui/InteractiveMap.tsx

@@ -51,10 +51,21 @@ interface WorldPixel {
   y: number
 }
 
+/**
+ * A tile's IDENTITY, with no position in it.
+ *
+ * `id` and `src` are both pure functions of z/x/y, so a given tile's
+ * descriptor never changes while it is on screen — only where it sits does.
+ * Keeping position out of this type is what lets the memo below hand `<For>`
+ * the same object across a pan, so the `<img>` survives instead of being torn
+ * down and rebuilt.
+ */
 interface TileDescriptor {
   id: string
-  left: number
-  top: number
+  /** Tile column, unwrapped — multiplied by TILE_SIZE to place the tile. */
+  x: number
+  /** Tile row. */
+  y: number
   src: string
 }
 
@@ -174,9 +185,33 @@ export function InteractiveMap(props: InteractiveMapProps): JSX.Element {
     return { x: c.x - w / 2, y: c.y - h / 2 }
   })
 
+  /**
+   * Live tiles, keyed by id so identity survives a pan.
+   *
+   * `<For>` in Solid keys by REFERENCE. This memo used to build fresh
+   * descriptor objects on every recompute, so every pointer move made every
+   * tile a "new" item: the whole grid was removed from the DOM and rebuilt,
+   * even though the same tiles were still on screen. Measured on a 20-tile
+   * map, one ~500 ms drag produced 340 element insertions and 344 removals.
+   *
+   * The fade-in below turned that churn into a visible strobe. A rebuilt
+   * `<img>` starts at `opacity-0` and only becomes visible when its `load`
+   * event re-adds `a4ui-tile-loaded`, so during a pan every tile blinked out
+   * and back roughly seventeen times a second — the file header has always
+   * claimed tiles are "repositioned (not reloaded) as the user pans", and now
+   * they are.
+   *
+   * Reusing entries also means the cache holds only what is on screen: ids
+   * that fall out of range are dropped on the same pass that adds new ones.
+   */
+  const tileCache = new Map<string, TileDescriptor>()
+
   const tiles = createMemo<TileDescriptor[]>(() => {
     const { w, h } = size()
-    if (w <= 0 || h <= 0) return []
+    if (w <= 0 || h <= 0) {
+      tileCache.clear()
+      return []
+    }
     const z = zoom()
     const numTiles = 2 ** z
     const tl = topLeftPx()
@@ -188,17 +223,29 @@ export function InteractiveMap(props: InteractiveMapProps): JSX.Element {
     const maxY = Math.min(numTiles - 1, Math.floor((tl.y + h) / TILE_SIZE) + 1)
 
     const list: TileDescriptor[] = []
+    const live = new Set<string>()
+
     for (let x = minX; x <= maxX; x++) {
       const wrappedX = ((x % numTiles) + numTiles) % numTiles
       for (let y = minY; y <= maxY; y++) {
-        list.push({
-          id: `${z}/${x}/${y}`,
-          left: x * TILE_SIZE - tl.x,
-          top: y * TILE_SIZE - tl.y,
-          src: buildTileUrl(url, z, wrappedX, y),
-        })
+        const id = `${z}/${x}/${y}`
+        live.add(id)
+        let tile = tileCache.get(id)
+        // The url prop can change at runtime, so a cached tile is only
+        // reusable while its src still matches.
+        const src = buildTileUrl(url, z, wrappedX, y)
+        if (!tile || tile.src !== src) {
+          tile = { id, x, y, src }
+          tileCache.set(id, tile)
+        }
+        list.push(tile)
       }
     }
+
+    for (const id of tileCache.keys()) {
+      if (!live.has(id)) tileCache.delete(id)
+    }
+
     return list
   })
 
@@ -309,7 +356,13 @@ export function InteractiveMap(props: InteractiveMapProps): JSX.Element {
                 !motionReduced() &&
                   'opacity-0 transition-opacity duration-150 [&.a4ui-tile-loaded]:opacity-100',
               )}
-              style={{ left: `${tile.left}px`, top: `${tile.top}px` }}
+              // Read from the reactive origin rather than from the tile, so
+              // panning updates two style properties on an element that stays
+              // put instead of replacing it.
+              style={{
+                left: `${tile.x * TILE_SIZE - topLeftPx().x}px`,
+                top: `${tile.y * TILE_SIZE - topLeftPx().y}px`,
+              }}
               onLoad={(event) => event.currentTarget.classList.add('a4ui-tile-loaded')}
             />
           )}

package/src/ui/LocationPicker.tsx

@@ -20,6 +20,15 @@ export interface LocationPickerProps {
   value?: LocationValue
   /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
   onChange?: (v: LocationValue) => void
+  /**
+   * Placeholder for the free-text label field. Overridable because this was
+   * hardcoded English inside an otherwise fully translatable component — a
+   * Spanish form showed "Location label" in the middle of its own wizard.
+   * @default 'Location label'
+   */
+  labelPlaceholder?: string
+  /** Accessible name for the "use my location" button. @default 'Use my location' */
+  geolocateLabel?: string
   class?: string
 }
 
@@ -77,10 +86,14 @@ export function LocationPicker(props: LocationPickerProps): JSX.Element {
           type="text"
           value={current().label ?? ''}
           onInput={(event) => setLabel(event.currentTarget.value)}
-          placeholder="Location label"
+          placeholder={props.labelPlaceholder ?? 'Location label'}
           class="h-9 flex-1 rounded-md border border-border bg-input px-3 text-sm text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:outline-none"
         />
-        <Button variant="outline" aria-label="Use my location" onClick={useMyLocation}>
+        <Button
+          variant="outline"
+          aria-label={props.geolocateLabel ?? 'Use my location'}
+          onClick={useMyLocation}
+        >
           <Crosshair class="h-4 w-4" />
         </Button>
       </div>

package/src/ui/Table.tsx

@@ -34,7 +34,15 @@ interface TableProps extends ParentProps {
 export function Table(props: TableProps): JSX.Element {
   const [local, rest] = splitProps(props, ['class', 'children'])
   return (
-    <div class="w-full overflow-x-auto">
+    // `relative` is load-bearing, not decoration: `overflow` only clips a
+    // descendant whose containing block is inside the scroller. Without a
+    // positioned wrapper, an absolutely-positioned descendant (a
+    // screen-reader-only input inside a cell control, for instance) resolves
+    // against an ancestor further up, escapes the clip at the table's full
+    // scroll width, and drags the whole DOCUMENT into horizontal scrolling —
+    // measured on a phone: a 356 px table inside a 390 px viewport pushed the
+    // page to 413 px.
+    <div class="relative w-full overflow-x-auto">
       <table class={cn('w-full border-collapse text-sm', local.class)} {...rest}>
         {local.children}
       </table>