hazo_ui 3.4.1 → 4.1.1

package/CHANGE_LOG.md

@@ -5,6 +5,50 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v4.1.1 (2026-06-14)
+
+### New
+- `Slider` — Radix-backed (`@radix-ui/react-slider`) range slider primitive following the shadcn pattern; styled via theme tokens (`bg-primary`/`bg-secondary`) so consumers re-skin via CSS variables. Closes FR-003.
+- `InputAffix` — input with optional `prefix`/`suffix` slots (e.g. a `$` affix) sharing the `Input` primitive's border/height styling; numeric-friendly. Closes FR-004.
+- **ETA Progress Bar** — determinate progress with rolling-window time estimation:
+  - `HazoUiProgressBar` — controlled determinate bar driven by a `0..1` `value` prop.
+  - `useEtaProgress` — driver hook (`{ value, start, unitDone, finish }`) that estimates remaining time from a rolling window of past run durations.
+  - `HazoUiEtaProgress` — storage-backed self-estimating bar that persists its duration window via **`hazo_state`**.
+  - Pure estimation helpers `median`, `computeEta`, `easeToward` are exported for direct use/testing.
+
+### Dependencies
+- **`hazo_state` (^0.1.0) is now a required peer dependency.** The `hazo_ui` barrel statically imports `hazo_state/client` (for `HazoUiEtaProgress`), so consumers must install `hazo_state` alongside `hazo_ui`. (It was briefly declared optional, which was incorrect — the import is unconditional.)
+
+### Fixed
+- test-app: `hazo_state` webpack alias now uses an exact (`$`) match so subpath imports (`hazo_state/client`) resolve instead of being rewritten into the bare-package path.
+- test-app autotest: `Slider` / `InputAffix` export-contract scenarios now accept `forwardRef`/`memo` components (which are objects, not functions); added `eta_progress_estimation` (pure-helper behaviour) and `eta_progress_ui` (progress-bar export contract) scenarios.
+
+## v4.0.0 (2026-06-13)
+
+### BREAKING
+
+- **`LineChart` and `MultiLineChart` removed.** These components (along with their prop types
+  `LineChartProps`, `MultiLineChartProps`, and the `MultiSeries` type) have been extracted from
+  `hazo_ui` and re-implemented in `hazo_dataviz` on recharts with the same prop API. Consumers
+  must update their imports:
+
+  ```ts
+  // Before (hazo_ui ≤ 3.x)
+  import { LineChart, MultiLineChart, type MultiSeries } from "hazo_ui";
+
+  // After (hazo_ui 4.x)
+  import { LineChart, MultiLineChart, type MultiSeries } from "hazo_dataviz/client";
+  ```
+
+  All other chart primitives are **unchanged**: `Sparkline`, `InverseSparkline`, `StackedBars`,
+  `DateRangeSelector`, and `FunnelChart` remain in `hazo_ui` along with their shared types
+  (`ChartDataPoint`, `ChartDataSeries`, `StackedBar`, `DateRangeOption`, `FunnelStep`).
+
+## v3.5.0 (2026-06-12)
+
+### New
+- `FunnelChart` — horizontal centered-bar conversion funnel with optional segment breakdown, hover tooltip (% of first / % of previous / drop-off), and edge-case handling (empty steps, zero values, single step). Closes FR-002.
+
 ## v3.4.1 — 2026-06-12
 
 **Fix:** Webpack compatibility in test-harness format.ts + source sync.

package/README.md

@@ -224,6 +224,20 @@ Lightweight, opinionated components for the four ubiquitous async states: **load
 - **[useLoadingState](#useloadingstate)** hook - `{ isLoading, setLoading, withLoading }` with an async wrapper.
 - **[useErrorDisplay](#useerrordisplay)** hook - Passive `{ error, setError, clearError }` that coerces `Error` instances to strings.
 
+### Form & Feedback Primitives (v4.1)
+
+- **Slider** - Radix-backed (`@radix-ui/react-slider`) range slider following the shadcn pattern. Styled via theme tokens (`bg-primary` / `bg-secondary`) so consumers re-skin through CSS variables.
+- **InputAffix** - Input with optional `prefix` / `suffix` slots (e.g. a `$` affix) sharing the base `Input` primitive's border/height styling; numeric-friendly.
+- **ETA Progress Bar** - Determinate progress with rolling-window time estimation:
+  - `HazoUiProgressBar` - controlled determinate bar driven by a `0..1` `value` prop.
+  - `useEtaProgress` - driver hook returning `{ value, start, unitDone, finish }` that estimates remaining time from past run durations.
+  - `HazoUiEtaProgress` - storage-backed self-estimating bar that persists its duration window via `hazo_state` (a **required** peer dependency of hazo_ui — see Setup).
+  - Pure helpers `median`, `computeEta`, `easeToward` are exported for direct use/testing.
+
+  ```tsx
+  import { Slider, InputAffix, HazoUiProgressBar, HazoUiEtaProgress, useEtaProgress } from 'hazo_ui';
+  ```
+
 ### shadcn/ui Primitive Re-exports
 
 All shadcn/ui base components are re-exported from hazo_ui, so sibling hazo_* packages (and consumers) can import UI primitives from a single source without installing shadcn/ui separately:
@@ -3362,6 +3376,66 @@ return error ? <ErrorBanner message={error} onDismiss={clearError} /> : null;
 
 Returns `{ error: string | null; setError: (v: unknown) => void; clearError: () => void }`. Pass `null` (or any nullish value) to `setError` to clear.
 
+### HazoUiEtaProgress (Requires optional `hazo_state` peer dependency)
+
+Smart ETA progress bar that learns from historical operation durations. Fetches a rolling window of past durations from `hazo_state`, estimates completion time based on remaining work units and concurrency, and animates smoothly toward the estimate. Requires `hazo_state` to be installed.
+
+```tsx
+import { HazoUiEtaProgress, type EtaProgressHandle } from "hazo_ui";
+import { useRef } from "react";
+
+function FileProcessor() {
+  const handleRef = useRef<EtaProgressHandle>(null);
+
+  async function processFiles(files: File[]) {
+    handleRef.current?.start();
+    
+    for (let i = 0; i < files.length; i++) {
+      await processFile(files[i]);
+      handleRef.current?.unitDone();
+    }
+    
+    handleRef.current?.finish();
+  }
+
+  return (
+    <>
+      <HazoUiEtaProgress
+        estimateKey="file_processing"
+        unitCount={totalFiles}
+        concurrency={3}
+        windowSize={10}
+        fallbackUnitMs={2000}
+        label="Processing files…"
+        handleRef={handleRef}
+      />
+      <button onClick={() => processFiles(files)}>Start</button>
+    </>
+  );
+}
+```
+
+**Installation requirement:** This component requires `hazo_state` as a peer dependency. Install it before using `HazoUiEtaProgress`:
+
+```bash
+npm install hazo_state
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `estimateKey` | `string` | **required** | Unique key for storing duration history in `hazo_state` |
+| `unitCount` | `number` | **required** | Total number of work units |
+| `concurrency` | `number` | `1` | How many units run in parallel |
+| `windowSize` | `number` | `5` | Number of past durations to average over |
+| `fallbackUnitMs` | `number` | `5000` | Per-unit estimate (ms) on cold start when no history exists |
+| `level` | `"global" \| "session" \| "local"` | `"global"` | hazo_state visibility level |
+| `label` | `string` | — | Label shown above the progress bar |
+| `endpoint` | `string` | `"/api/hazo-state"` | hazo_state API endpoint (for fetching history) |
+| `handleRef` | `RefObject<EtaProgressHandle>` | — | Ref exposing `start()`, `unitDone()`, `finish()` methods |
+| `className` | `string` | — | Additional classes |
+
+**Headless hook alternative:** For more control, use `useEtaProgress` directly without the component.
+
 ---
 
 ## HazoUiKanban — Drag-Drop Kanban (v2.13.0+)
@@ -3764,6 +3838,38 @@ Props:
 | `showYAxis`  | `boolean`      | `true`  | Render Y-axis ticks (max / mid / 0).                |
 | `className`  | `string`       | —       | Container className passthrough.                    |
 
+### FunnelChart
+
+Conversion-funnel visualization. Horizontal centered bars, one row per step.
+
+```tsx
+import { FunnelChart } from 'hazo_ui';
+
+<FunnelChart
+  steps={[
+    { label: 'Landing', value: 1000 },
+    { label: 'Timer start', value: 420 },
+    { label: 'Timer complete', value: 180 },
+  ]}
+  showDropoff
+/>
+```
+
+Optional `segments` prop splits each bar into colored sub-bands (mobile/desktop split, traffic-source mix, etc.).
+
+Props:
+
+| Prop           | Type                          | Default        | Description                                              |
+|----------------|-------------------------------|----------------|----------------------------------------------------------|
+| `steps`        | `FunnelStep[]`                | —              | Ordered funnel steps. Each has `label`, optional `value`, optional `segments`. |
+| `width`        | `number`                      | `360`          | viewBox width.                                           |
+| `height`       | `number`                      | auto           | viewBox height. Defaults to `PAD_TOP + steps.length * 44 + PAD_BOTTOM`. |
+| `color`        | `string`                      | `"#3b82f6"`    | Bar fill for steps without segments.                     |
+| `valueFormat`  | `(n: number) => string`       | `format_num`   | Override value formatting.                               |
+| `showDropoff`  | `boolean`                     | `true`         | Show per-step drop-off count below the value label.      |
+| `showTooltip`  | `boolean`                     | `true`         | Enable hover tooltip with full step metrics.             |
+| `className`    | `string`                      | —              | Container className passthrough.                         |
+
 ### DateRangeSelector
 
 Framework-agnostic segmented control (`value` + `onChange`) for picking

package/SETUP_CHECKLIST.md

@@ -98,11 +98,13 @@ The following peer dependencies are required:
 
 - [ ] React (^18.0.0 or ^19.0.0)
 - [ ] React DOM (^18.0.0 or ^19.0.0)
+- [ ] hazo_core (^1.2.0)
+- [ ] hazo_state (^0.1.0) — the `hazo_ui` barrel statically imports `hazo_state/client` (for `HazoUiEtaProgress`), so this is **required** even if you don't use the ETA progress bar.
 
 If not already installed:
 
 ```bash
-npm install react react-dom
+npm install react react-dom hazo_core hazo_state
 ```
 
 ### 3. Install Required Dependencies
@@ -137,6 +139,11 @@ npm install @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-selec
   - **useLoadingState, useErrorDisplay** hooks: No additional dependencies
 - **Celebration (v2.18.0)**:
   - **CelebrationProvider, celebrate, CELEBRATION_GRADIENT**: No additional peer deps — `canvas-confetti` and `html-to-image` are bundled direct dependencies
+- **Form & Feedback primitives (v4.1)**:
+  - **Slider**: `@radix-ui/react-slider`
+  - **InputAffix**: No additional dependencies (uses the base shadcn/ui `Input` component)
+  - **HazoUiProgressBar, useEtaProgress, median, computeEta, easeToward**: No additional dependencies
+  - **HazoUiEtaProgress**: `hazo_state` (^0.1.0) — a **required** peer dep of hazo_ui (the barrel imports it unconditionally), so it is always installed regardless of which components you use.
 
 ### 4. Configure Tailwind CSS