@espressif/dashboard-ui-components 1.5.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,116 @@ 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.

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-WR54R7J6.js → chunk-HYSNJBDF.js}

@@ -1,4 +1,4 @@
-import { ProgressBar } from './chunk-X7LDLZBT.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';