@espressif/dashboard-ui-components 1.4.0 → 1.6.0

package/.claude/rules/dashboard-ui-consumption.md

@@ -110,6 +110,37 @@ Things agents get wrong about it:
   full page reload.
 - No `prose` wrapper or spacing utilities are needed; it owns its own vertical rhythm.
 
+## Editing code and JSON
+
+`CodeEditor` (from `/components`) is the editable counterpart of `Code`: a form field
+with syntax highlighting. Use it instead of `Textarea` for JSON payloads, policies or
+templates; use `Code` for read-only display.
+
+```tsx
+import { CodeEditor } from '@espressif/dashboard-ui-components/components'
+
+<CodeEditor
+  {...field}                           // react-hook-form: native onChange + ref to the <textarea>
+  lang="json"                          // "text" for base64 / opaque data
+  theme={dark ? 'dark' : 'light'}
+  label="Payload"
+  errorContent={fieldState.error?.message}
+  onFormatError={(e) => setFormatError(String(e))}
+/>
+```
+
+Things agents get wrong about it:
+
+- `onChange` receives the native change event, like `Textarea` — there is no `onValueChange`.
+- It does **not** validate. The built-in Format button (JSON only) pretty-prints and
+  reports invalid JSON to `onFormatError`; schema rules (zod etc.) stay in the app.
+  Pass `formatter` for other languages; do not reimplement Format in `headerActions`.
+- Esc, then Tab, moves focus out (Tab otherwise indents). Inside a `Sheet` or `Dialog`,
+  Esc also reaches the overlay's own Escape handler and closes it; guard with
+  `onEscapeKeyDown={(e) => { if ((e.target as Element).closest('[data-slot="code-editor"]')) e.preventDefault() }}`
+  if that matters.
+- `className` / `style` style the editor box, not the `<textarea>`.
+
 ## Bundle size and tooling (what agents should assume)
 
 - The published library is **pre-bundled ESM** (tsup). Consumers receive **large `dist` chunks**, not one file per source component.

package/.cursor/rules/dashboard-ui-consumption.mdc

@@ -107,6 +107,37 @@ Things agents get wrong about it:
   full page reload.
 - No `prose` wrapper or spacing utilities are needed; it owns its own vertical rhythm.
 
+## Editing code and JSON
+
+`CodeEditor` (from `/components`) is the editable counterpart of `Code`: a form field
+with syntax highlighting. Use it instead of `Textarea` for JSON payloads, policies or
+templates; use `Code` for read-only display.
+
+```tsx
+import { CodeEditor } from '@espressif/dashboard-ui-components/components'
+
+<CodeEditor
+  {...field}                           // react-hook-form: native onChange + ref to the <textarea>
+  lang="json"                          // "text" for base64 / opaque data
+  theme={dark ? 'dark' : 'light'}
+  label="Payload"
+  errorContent={fieldState.error?.message}
+  onFormatError={(e) => setFormatError(String(e))}
+/>
+```
+
+Things agents get wrong about it:
+
+- `onChange` receives the native change event, like `Textarea` — there is no `onValueChange`.
+- It does **not** validate. The built-in Format button (JSON only) pretty-prints and
+  reports invalid JSON to `onFormatError`; schema rules (zod etc.) stay in the app.
+  Pass `formatter` for other languages; do not reimplement Format in `headerActions`.
+- Esc, then Tab, moves focus out (Tab otherwise indents). Inside a `Sheet` or `Dialog`,
+  Esc also reaches the overlay's own Escape handler and closes it; guard with
+  `onEscapeKeyDown={(e) => { if ((e.target as Element).closest('[data-slot="code-editor"]')) e.preventDefault() }}`
+  if that matters.
+- `className` / `style` style the editor box, not the `<textarea>`.
+
 ## Bundle size and tooling (what agents should assume)
 
 - The published library is **pre-bundled ESM** (tsup). Consumers receive **large `dist` chunks**, not one file per source component.

package/CHANGELOG.md

@@ -4,6 +4,203 @@ All notable changes to this project are documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/).
 
+## [1.6.0] - 2026-09-25
+
+A minor release adding an editable code field (`CodeEditor`), a warning
+state to `StatusCardList`, fixed-value fields to `KeyValueManager`, and
+rolling presets plus a clear action to `DateRangePicker`. Focus rings now
+follow the primary colour, and a render loop in `DataTable` is fixed. No
+breaking changes.
+
+### Added
+- **`CodeEditor`** — an editable, syntax-highlighted code field. It has the
+  same header, file name, copy button and Shiki themes as `Code`, and works
+  in a form like `Textarea`: controlled or uncontrolled, native `onChange` /
+  `onBlur` / `name`, a ref to the `<textarea>`, so `{...field}` and
+  `{...register(name)}` from react-hook-form work unchanged (including
+  values written by `setValue` / `reset`). Carries `label`, `required`,
+  `hintContent`, `error`, `errorContent`, `disabled`, `readOnly` and
+  `placeholder`.
+  - Tab indents (every line of a multi-line selection), Shift+Tab outdents,
+    Enter keeps the current indentation, and all three are undoable with
+    Cmd/Ctrl+Z. Press Esc, then Tab, to move focus out of the editor. Keys
+    pressed during IME composition are left alone.
+  - For `lang="json"` the header has a Format button that pretty-prints with
+    `tabSize` spaces (undoable, fires `onChange`). Invalid JSON is left
+    unchanged and passed to `onFormatError`. `formatter` supplies a
+    formatter for any language; `formatButton={false}` hides the button;
+    `formatLabel` sets its accessible name, and `copyLabel` sets the copy
+    button's. `headerActions` adds further
+    header controls.
+  - `hideHeader` removes the header. It is also left out automatically when
+    there is no `fileName`, no `headerActions`, and neither a copy nor a
+    format button.
+  - Other props: `lang` (default `"json"`; `"text"` for base64 or other
+    opaque data), `theme` / `themes`, `fileName`, `icon`, `copyButton`,
+    `minHeight` / `maxHeight` of the editing area, `wrap` (soft-wrap long
+    lines; off by default) and `tabSize` (default 2).
+  - Above `maxHighlightLength` characters (default 10 000) the editor shows
+    plain text, so typing in a large document stays responsive. Highlighting
+    one keystroke of a 64 KB JSON document takes about 64 ms on an Apple M4,
+    and a 10 KB one about 13 ms. Languages or themes outside the curated
+    Shiki bundle also render as plain text, with one console warning per
+    language.
+  - Text renders at 16px below the `md` breakpoint so iOS Safari does not
+    zoom on focus, and at 13px (like `Code`) from `md` up.
+- **`DateRangePicker`** — rolling presets and a clear action:
+  - New presets `last-1-hour`, `last-24-hours`, `past-7-days` and
+    `past-30-days`. They end at the moment they are selected instead of
+    snapping to day boundaries, so `past-7-days` and `past-30-days` include
+    today (the existing `last-7-days` and `last-30-days` end yesterday at
+    23:59 and are unchanged). `ROLLING_PRESET_IDS` lists them, so a consumer
+    can recompute the range with `computeDateRange` when it refreshes data.
+  - New `clearable` prop. While a preset or custom range is selected, the
+    menu shows a "Clear" item that calls the new `onClear` callback and
+    closes the menu. `clearLabel` overrides its text (default `"Clear"`).
+  - Code with an exhaustive `switch` over `DateRangePickerPresetId` must
+    handle the four new IDs.
+- **`KeyValueManager`** — two new `KeyValueManagerFieldMeta` options:
+  - `options` renders the field in the add popover as a select limited to
+    those values, and rejects any other value. Use it when the allowed values
+    are known up front, for example the header columns of an uploaded CSV.
+  - `regexFlags` is passed to the `RegExp` built from `regex`, so a pattern
+    can use Unicode property escapes such as `\p{L}` with `"u"`. Patterns
+    without flags behave as before.
+  - New label `selectPlaceholder` (default `"Select"`) for fields with
+    `options`.
+- **`StatusCardList`** — new `"warning"` value for `StatusCardState`, for a
+  step that finished but only partly succeeded (for example, a bulk job where
+  some items failed). It uses the `warning` colour token for the card, avatar
+  and text, and a `TriangleAlert` end icon. Code with an exhaustive `switch`
+  over `StatusCardState` must handle the new value.
+- **AI agent rules** — `.claude/rules/dashboard-ui-consumption.md` and
+  `.cursor/rules/dashboard-ui-consumption.mdc` gain an "Editing code and JSON"
+  section on `CodeEditor`: when to use it instead of `Textarea` / `Code`, the
+  react-hook-form wiring, and the usual mistakes (there is no `onValueChange`,
+  it does not validate, Esc inside a `Sheet` / `Dialog`).
+
+### Changed
+- **Focus ring colour** — `--color-ring` now defaults to `var(--color-primary)`
+  in light and dark mode instead of fixed blues (`#0053c2` / `#7cd9ff`).
+  Components that draw their focus ring with `ring-ring` (`Input`, `Select`,
+  `Textarea`, `SearchBox`, `AdvancedSearchBox`, `ToggleGroup`, `Tabs`,
+  `Switch`, `Checkbox`, `Dialog` and others) previously kept the blue ring in
+  apps that re-theme `primary`, while `Button` and the clickable cards already
+  used `ring-primary`, so focus rings in the same toolbar did not match.
+  - With the default theme, light mode's ring moves from `#0053c2` to the
+    primary `#0071e3`; dark mode is unchanged (both were `#7cd9ff`).
+  - Apps that want a ring distinct from primary can still set `--color-ring`.
+- **`DateRangePicker`** — a picker without a `presets` prop shows every
+  preset, so its menu now also lists the four new rolling presets. They sit
+  among the trailing ranges, which run shortest to longest: "Last 1 hour" and
+  "Last 24 hours" come before "Last 1 day", and "Past 7 days" / "Past 30 days"
+  come just before "Last 7 days" / "Last 30 days". `PRESET_IDS` follows the
+  same order. Pass `presets` to keep the previous menu.
+- **`Code`** — the header's copy button now has an accessible name and
+  tooltip (`aria-label` / `title` "Copy"); before, the icon-only button had
+  no name for screen readers. The header is now shared with `CodeEditor` and
+  is otherwise unchanged.
+
+### Fixed
+- **`DataTable`** — no longer triggers an extra internal re-render every time
+  `data` changes identity. TanStack Table resets the page index when `data`
+  changes unless pagination is manual, and each reset was a table-internal
+  state update. The page index here is always 0 (paging belongs to the
+  consumer through `pageIndex` / `onNextPage` / `onPrevPage`), so the reset
+  did nothing useful. With a consumer passing a fresh array on every render
+  (`data?.items ?? []`), those updates could pile up into React's "Maximum
+  update depth exceeded" under load, for example when switching to a
+  server-paginated table while the main thread was busy. The table now sets
+  `autoResetPageIndex: false` and memoizes its pagination state. Rows are
+  still capped at `pageSize`, so existing tables render the same.
+
+## [1.5.0] - 2026-09-22
+
+A minor release adding a combined date and time control.
+
+### Added
+- **`DateTimePicker`** — one read-only input that opens a dropdown with a
+  `Calendar` and a `TimePicker`, together editing one `Date`. Picking a day
+  keeps the dropdown open so the time can be set in the same interaction; a
+  time typed before a day is kept and applied to the chosen day; an incomplete
+  time (the browser reports `""` mid-edit) never snaps the value. `defaultTime`
+  sets the time of day used when a day is picked first (default `"00:00"`),
+  `timeStep` below 60 shows seconds, `clearable` shows an X inside the input
+  that clears both parts without changing the layout. Carries the usual
+  `label` / `required` / `error` / `errorContent` / `hintContent` / `size` /
+  `rounded` / `disabled` / `open` / `onOpenChange` props and an optional
+  hidden `name` input with the ISO string, like `DatePicker`. Values are local
+  wall-clock `Date`s; callers convert to UTC or epoch seconds.
+- **`SelectTrigger`** — `label`, `required`, `hintContent`, `error` and
+  `errorContent`, the same field chrome `Input` has: a label row above the
+  trigger (label, required marker, right-aligned hint) and an error line
+  below it, with `aria-required` / `aria-invalid` / `aria-describedby` wired.
+  With none of them set the trigger renders exactly as before, so existing
+  `FormLabel` + `Select` compositions are unaffected.
+- **`SectionCard`** — `open` for a controlled collapsible state, paired with
+  the existing `onOpenChange`. Lets an action in the header (an "Edit"
+  button, for instance) expand the card. Omit it and the card keeps its
+  `defaultOpen`-seeded internal state exactly as before. `hideCollapseIcon`
+  drops the chevron from the header's right column while the header row
+  itself stays a labelled toggle, for cards whose action button already
+  says the card can be expanded.
+- **`Illustration`** — `animated` (default `false`). Off, the component
+  renders an illustration's static resting frame and strips every SMIL
+  element from the markup, so pages that only need a picture get exactly
+  that. On, the animation plays. Sources mark parts that exist in only one
+  variant with `data-variant="static"` / `data-variant="animated"` groups.
+  Illustrations without animations render identically either way.
+- **`DatePicker`** — `clearable` and `clearLabel`. When `clearable` is set
+  and a date is selected, a 16px X appears inside the trigger next to the
+  calendar icon (the same end slot `DateTimePicker` uses) and calls
+  `onChange(undefined)` without opening the calendar. Off by default, so existing pickers are unchanged
+  (previously the only way to clear was re-clicking the selected day).
+
+### Changed
+- **`Illustration`** — `rm-data-download` redrawn: the RainMaker logo cloud
+  rains data, records travel along a dashed connector into a laptop, and rows
+  of the on-screen table light up as they land while the download progress
+  fills. Colours come from the theme tokens except the cloud, which keeps the
+  logo's own reds. Ids are prefixed `rmdd-` so the inlined markup cannot
+  collide with other inline SVGs on the page. The source carries both a
+  static resting frame and the SMIL animation; see `animated` below.
+- **`OverflowBadgeList`** — each item is now a `StatusBadge` instead of a
+  hand-styled `Badge`, so the pills match status chips elsewhere (rounded,
+  `StatusBadge` paddings, 14/16/18px icon). New `badgeSize` (`"sm" |
+  "default" | "lg"`, default `"default"`); `badgeVariant` still defaults to
+  `"outline"`. Long labels still truncate at 12rem.
+- **`StatusBadge`** — the label is wrapped in a `min-w-0 truncate` span, so a
+  `className` with a `max-w-*` now ellipsises instead of overflowing.
+- **`SelectTrigger`** — the chevron is now 16px at every `size` (it scaled
+  14/16/20px before), matching the fixed 16px decorators inside `Input`, so a
+  Select and an Input placed side by side show the same icon dimensions.
+
+### Fixed
+- **`Dialog`, `Sheet`, `DropdownMenu`, `Checkbox`, `Switch`, `Toggle`,
+  `ToggleGroup`, `Accordion`, `RadioGroup`, `PreviewCard`, `CopyButton`,
+  `NavBar`** — controlled mode is now genuinely controlled. The shared
+  `useControlledState` hook used to write its internal state on every
+  change and only then call `onChange`, so a component whose owner kept
+  `open`/`checked`/`value` unchanged still flipped on its own. A
+  `FullscreenDialog` with `open={true}` closed on the X button even when
+  its `onOpenChange` handler decided not to close (for example while a
+  navigation guard asked for confirmation), leaving an empty page. With
+  `value` defined the hook now reports that value and the setter only
+  notifies `onChange`; uncontrolled usage is unchanged.
+- **`DatePicker`** — a controlled picker whose `value` is set back to
+  `undefined` no longer flips to uncontrolled mode and shows a stale day; the
+  component now treats the presence of the `value` prop as "controlled".
+- **Field label geometry** — a `FormLabel` stacked above a control and an
+  `Input`'s own label row used to leave different gaps between label text and
+  control: `FormLabel` was an inline `<label>` sitting on a taller anonymous
+  line box, and the `Input` row grew from 14px to 20px whenever a hint was
+  present because the hint kept the default line-height. Both now render the
+  same 14px block-level row (`flex items-center gap-2 leading-none`; hints
+  are `leading-none`), so labels sit exactly 8px above every control. The
+  required marker also gets the same `gap-2` spacing in both.
+- **`DatePicker`** — the calendar's square background no longer pokes past
+  the rounded corners of its dropdown; the popover now clips its content.
+
 ## [1.4.0] - 2026-09-18
 
 A minor release that lets `ConfirmationDialog` be opened without a trigger, and

package/README.md

@@ -455,6 +455,7 @@ version you have installed is the shipped type declarations:
 | Alert | Alert banners (optionally dismissible) |
 | Link | Styled anchor element — colour-tinted pill, or `variant="ghost"` for a bare inline link |
 | Code | Syntax-highlighted code blocks |
+| CodeEditor | Editable, syntax-highlighted code field (`Code` look, `Textarea` form behaviour), with Format (JSON) and Copy buttons |
 | MarkdownContent | Renders a markdown string with library primitives (GFM, heading anchors; raw HTML is escaped, not parsed) |
 | CopiableText / CopyButton | Copy-to-clipboard utilities |
 | ProgressBar | Progress indicator |

package/dist/{chunk-TSNA6BHK.js → chunk-45DCL46L.js}

@@ -1,4 +1,4 @@
-import { Avatar, Menu, List, Button, Link } from './chunk-UHRNPXO5.js';
+import { Avatar, Menu, List, Button, Link } from './chunk-ZEQNTNMW.js';
 import { cn } from './chunk-VU4CZ76T.js';
 import { motion, AnimatePresence } from 'framer-motion';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-RCRU3JW2.js → chunk-6RJAKSPV.js}

@@ -1,6 +1,6 @@
-import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-TSNA6BHK.js';
-import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-UHRNPXO5.js';
-import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-7BO76CNB.js';
+import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-45DCL46L.js';
+import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-ZEQNTNMW.js';
+import { Button, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from './chunk-OKB2WTX7.js';
 import { cn } from './chunk-VU4CZ76T.js';
 import { Menu, Palette, Check, Globe, LogOut } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-KCMVLNM5.js → chunk-ABBHGIFI.js}

@@ -1,4 +1,4 @@
-import { Separator } from './chunk-7BO76CNB.js';
+import { Separator } from './chunk-OKB2WTX7.js';
 import { cn, isPresetColor, resolveColor } from './chunk-VU4CZ76T.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';

package/dist/{chunk-CPVDY4CV.js → chunk-HYSNJBDF.js}

@@ -1,6 +1,6 @@
-import { ProgressBar } from './chunk-XMEZ2BP6.js';
-import { Card, CardContent } from './chunk-KCMVLNM5.js';
-import { Tooltip2 } from './chunk-UHRNPXO5.js';
+import { ProgressBar } from './chunk-IYMCZTJ5.js';
+import { Card, CardContent } from './chunk-ABBHGIFI.js';
+import { Tooltip2 } from './chunk-ZEQNTNMW.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function CopyrightCard({