@a4ui/core 0.35.0 → 0.35.2

package/dist/ui/RingProgress.d.ts

@@ -7,6 +7,8 @@ export interface RingProgressProps {
     thickness?: number;
     /** Content centered over the ring. Defaults to the rounded percent. */
     label?: JSX.Element;
+    /** Accessible name for the `role="progressbar"` element. */
+    'aria-label'?: string;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "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.0'
+export const A4UI_VERSION = '0.35.2'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/AudioWaveform.tsx

@@ -167,10 +167,8 @@ export function AudioWaveform(props: AudioWaveformProps): JSX.Element {
           {(peak, index) => {
             const played = createMemo(() => index() / bars().length <= progress())
             return (
-              <button
-                type="button"
+              <div
                 aria-hidden="true"
-                tabIndex={-1}
                 onClick={(event) => {
                   event.stopPropagation()
                   handleBarClick(index())

package/src/ui/EventScheduler.tsx

@@ -203,7 +203,13 @@ export function EventScheduler(props: EventSchedulerProps): JSX.Element {
       </div>
 
       {/* Body: scrolls vertically; gutter of hour labels + day columns */}
-      <div class="flex overflow-y-auto" style={{ 'max-height': '32rem' }}>
+      <div
+        role="group"
+        aria-label="Schedule grid"
+        tabIndex={0}
+        class="flex overflow-y-auto outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+        style={{ 'max-height': '32rem' }}
+      >
         <div class="w-14 shrink-0" style={{ height: `${gridHeight()}px` }}>
           <For each={hours()}>
             {(h) => (

package/src/ui/GanttChart.tsx

@@ -155,7 +155,15 @@ export function GanttChart(props: GanttChartProps): JSX.Element {
   })
 
   return (
-    <div class={cn('overflow-x-auto rounded-lg border border-border bg-card', props.class)}>
+    <div
+      role="group"
+      aria-label="Gantt chart"
+      tabIndex={0}
+      class={cn(
+        'overflow-x-auto rounded-lg border border-border bg-card outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+        props.class,
+      )}
+    >
       <Show
         when={props.tasks.length > 0}
         fallback={<p class="p-4 text-sm text-muted-foreground">No tasks to display.</p>}

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/OnboardingChecklist.tsx

@@ -79,6 +79,7 @@ export function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Elemen
           value={percent()}
           size={56}
           thickness={6}
+          aria-label={`${done()} of ${total()} steps complete`}
           label={
             <span class="text-xs">
               {done()}/{total()}

package/src/ui/QueryBuilder.tsx

@@ -243,10 +243,10 @@ function RuleRow(props: RuleRowProps): JSX.Element {
 
   return (
     <div class="flex flex-wrap items-center gap-2">
-      <Select class="w-40" value={props.rule.field} onChange={setField}>
+      <Select class="w-40" value={props.rule.field} onChange={setField} aria-label="Field">
         <For each={props.fields}>{(f) => <option value={f.name}>{f.label}</option>}</For>
       </Select>
-      <Select class="w-32" value={props.rule.operator} onChange={setOperator}>
+      <Select class="w-32" value={props.rule.operator} onChange={setOperator} aria-label="Operator">
         <For each={props.operatorsFor(props.rule.field)}>{(op) => <option value={op}>{op}</option>}</For>
       </Select>
       <Show
@@ -257,10 +257,11 @@ function RuleRow(props: RuleRowProps): JSX.Element {
             type={field()?.type === 'number' ? 'number' : 'text'}
             value={props.rule.value}
             onInput={setValue}
+            aria-label="Value"
           />
         }
       >
-        <Select class="w-40" value={props.rule.value} onChange={setValue}>
+        <Select class="w-40" value={props.rule.value} onChange={setValue} aria-label="Value">
           <option value="" disabled>
             Select…
           </option>

package/src/ui/RingProgress.tsx

@@ -12,6 +12,8 @@ export interface RingProgressProps {
   thickness?: number
   /** Content centered over the ring. Defaults to the rounded percent. */
   label?: JSX.Element
+  /** Accessible name for the `role="progressbar"` element. */
+  'aria-label'?: string
   class?: string
 }
 
@@ -37,6 +39,7 @@ export function RingProgress(props: RingProgressProps): JSX.Element {
   return (
     <div
       role="progressbar"
+      aria-label={props['aria-label']}
       aria-valuenow={clamped()}
       aria-valuemin={0}
       aria-valuemax={100}

package/src/ui/SpreadsheetGrid.tsx

@@ -235,6 +235,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
       ref={containerRef}
       tabIndex={0}
       role="grid"
+      aria-label="Spreadsheet"
       aria-rowcount={props.rows}
       aria-colcount={props.cols}
       class={cn(
@@ -244,20 +245,22 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
       onKeyDown={handleKeyDown}
     >
       <div class="grid" style={{ 'grid-template-columns': `48px repeat(${props.cols}, minmax(80px, 1fr))` }}>
-        <div class="border-b border-r border-border bg-muted" />
-        <For each={headers()}>
-          {(h) => (
-            <div
-              role="columnheader"
-              class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
-            >
-              {h}
-            </div>
-          )}
-        </For>
+        <div role="row" class="contents">
+          <div aria-hidden="true" class="border-b border-r border-border bg-muted" />
+          <For each={headers()}>
+            {(h) => (
+              <div
+                role="columnheader"
+                class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
+              >
+                {h}
+              </div>
+            )}
+          </For>
+        </div>
         <For each={rowIndices()}>
           {(r) => (
-            <>
+            <div role="row" class="contents">
               <div
                 role="rowheader"
                 class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs text-muted-foreground"
@@ -295,7 +298,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
                   </div>
                 )}
               </For>
-            </>
+            </div>
           )}
         </For>
       </div>