@espressif/dashboard-ui-components 1.5.0 → 1.7.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,173 @@ 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.7.0] - 2026-10-06
+
+A minor release adding per-item icons and colours to `OverflowBadgeList`
+and element icons to `StatusBadge`, with fixes to the collapsed `Sidebar`
+flyout menus and the `WorkspaceLayout` account menu. No breaking changes.
+
+### Added
+- **`OverflowBadgeList`** — per-item icons and colours. `items` now also
+  accepts `{ id?, label, icon?, color? }` objects (exported as
+  `OverflowBadgeListItem`), which can be mixed with plain strings. Each
+  object item renders its own `icon` and uses its own `color` in place of
+  `badgeColor`, so a list can show, for example, a brand icon per
+  integration and grey out inactive entries. Plain-string items behave as
+  before: the list-level `icon` appears on the first badge only.
+- **`StatusBadge`** — `icon` also accepts a pre-built element (such as a
+  custom SVG brand icon) in addition to a Lucide component. Elements are
+  rendered as-is, so the caller sets their size. The type is exported as
+  `StatusBadgeIcon`. No breaking changes.
+
+### Changed
+- **`IconTextActionCard`, `SimpleClickableCard`, `SimpleInfoCard`** — a
+  `title` passed as a ReactNode now gets the same title typography (size and
+  weight for the card `size`) as a string title, instead of inheriting the
+  surrounding text style. It is still wrapped in a `div`, so block content
+  stays valid. Elements inside the title that set their own font size or
+  weight are unaffected; plain text inside it becomes the title weight.
+
+### Fixed
+- **`StatusBadge` / `OverflowBadgeList`** — badges with an icon no longer
+  sit higher than badges without one.
+- **`Sidebar` / `WorkspaceLayout`** — collapsed sidebar flyout menus:
+  - Choosing an item no longer brings back the group's label tooltip.
+    Closing the flyout with Escape or the keyboard still returns focus to
+    the group icon.
+  - Clicking anywhere on a row now navigates and closes the flyout.
+    Previously, with a router `linkComponent`, clicking the empty part of a
+    row navigated but left the flyout open, and clicking the row's edge
+    closed it without navigating.
+  - Choosing an item with Enter or Space now navigates to it. Previously the
+    flyout closed without navigating.
+- **`WorkspaceLayout`** — clicking the profile card in the account menu
+  (when `onProfileCardClick` is set) now closes the menu after the callback
+  runs. The card also highlights on hover like the other menu rows and can
+  be reached with the arrow keys and chosen with Enter or Space.
+
+### Internal
+Nothing in this section affects the published package.
+
+- Demo: the landing page's right panel now plays a looping, silent showreel
+  of the library's components, rendered from the real components by
+  `demo/video` (`npm run video:beats` / `npm run video:render`).
+- Demo: the `OverflowBadgeList` page gains a per-item icons example, and the
+  `WorkspaceLayout` page wires `onProfileCardClick` / `onLogoutClick` and
+  documents `onProfileCardClick`.
+- Tests for `IconTextActionCard`, `OverflowBadgeList`, `Sidebar` and the
+  `WorkspaceLayout` account menu.
+
+## [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-ZEQNTNMW.js → chunk-3PO2SF7T.js}

@@ -3637,11 +3637,16 @@ function ItemIcon({
   if (active) return /* @__PURE__ */ jsx(CircleDot, { className });
   return /* @__PURE__ */ jsx(Circle, { className: cn("opacity-50", className) });
 }
+function forwardRowClickToLink(e) {
+  if (e.target !== e.currentTarget) return;
+  e.currentTarget.firstElementChild?.click();
+}
 function GroupMenuItems({
   group,
   isSelected,
   linkComponent: LinkComponent,
-  onItemClick
+  onItemClick,
+  onItemPointerDown
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -3662,10 +3667,21 @@ function GroupMenuItems({
     /* @__PURE__ */ jsx(DropdownMenuSeparator2, {}),
     group.items.map((item) => {
       const active = isSelected(item.path);
-      return /* @__PURE__ */ jsx(DropdownMenuItem2, { className: active ? "bg-accent" : "", style: rowFontStyle, children: /* @__PURE__ */ jsx(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: /* @__PURE__ */ jsxs("span", { className: "contents", onClick: onItemClick, children: [
-        /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
-        /* @__PURE__ */ jsx("span", { className: active ? "font-semibold" : "font-medium", children: item.label })
-      ] }) }) }, item.id);
+      return /* @__PURE__ */ jsx(
+        DropdownMenuItem2,
+        {
+          className: active ? "bg-accent" : "",
+          style: rowFontStyle,
+          onPointerDown: onItemPointerDown,
+          onClickCapture: onItemClick,
+          onClick: forwardRowClickToLink,
+          children: /* @__PURE__ */ jsxs(LinkComponent, { to: item.path, className: "flex items-center gap-2 cursor-pointer w-full", children: [
+            /* @__PURE__ */ jsx(ItemIcon, { icon: item.icon, active }),
+            /* @__PURE__ */ jsx("span", { className: active ? "font-semibold" : "font-medium", children: item.label })
+          ] })
+        },
+        item.id
+      );
     })
   ] });
 }
@@ -3675,28 +3691,45 @@ function CollapsedSidebarGroup({
   linkComponent: LinkComponent
 }) {
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu2, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, className: rowIconClass, children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }) }) }),
-    /* @__PURE__ */ jsx(
-      DropdownMenuContent2,
-      {
-        side: "right",
-        align: "start",
-        sideOffset: 8,
-        className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
-        style: { minWidth: 180 },
-        children: /* @__PURE__ */ jsx(
-          GroupMenuItems,
+  const pickedWithPointer = useRef(false);
+  return /* @__PURE__ */ jsx(SidebarGroup, { className: sidebarGroupClassName, children: /* @__PURE__ */ jsx(SidebarMenu, { className: "w-auto", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu2,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) pickedWithPointer.current = false;
+        setOpen(next);
+      },
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "sm", tooltip: group.label, className: rowIconClass, children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }) }) }),
+        /* @__PURE__ */ jsx(
+          DropdownMenuContent2,
           {
-            group,
-            isSelected,
-            linkComponent: LinkComponent,
-            onItemClick: () => setOpen(false)
+            side: "right",
+            align: "start",
+            sideOffset: 8,
+            className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
+            style: { minWidth: 180 },
+            onCloseAutoFocus: (e) => {
+              if (pickedWithPointer.current) e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx(
+              GroupMenuItems,
+              {
+                group,
+                isSelected,
+                linkComponent: LinkComponent,
+                onItemClick: () => setOpen(false),
+                onItemPointerDown: () => {
+                  pickedWithPointer.current = true;
+                }
+              }
+            )
           }
         )
-      }
-    )
-  ] }) }) }) });
+      ]
+    }
+  ) }) }) });
 }
 var groupHeaderClass = cn(
   // No `flex-1`: this button is a column flex item, so growing made it take its

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

@@ -1,5 +1,5 @@
-import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-45DCL46L.js';
-import { useSidebar, SidebarTrigger, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-ZEQNTNMW.js';
+import { FooterCard, MyAccountMenu, ProfileCard, AppLogo } from './chunk-UA4DS3KA.js';
+import { useSidebar, SidebarTrigger, DropdownMenuItem, SidebarProvider, Sidebar2, SidebarInset, parseTextMarkup, isPathPrefixOf, isSidebarGroup } from './chunk-3PO2SF7T.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';
@@ -88,15 +88,19 @@ function AccountMenu({
       groups.push({
         id: "profile",
         items: [
-          onProfileCardClick ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onProfileCardClick,
-              className: "w-full text-left cursor-pointer",
-              children: profileCard
-            },
-            "profile"
+          onProfileCardClick ? (
+            // A menu item (not a plain button) so Radix closes the menu on select and
+            // includes the card in keyboard navigation. Negative margins cancel the
+            // custom-item wrapper's padding so the card keeps its position; they sit on
+            // an outer div because the hover highlight is sized from the item's wrapper.
+            /* @__PURE__ */ jsx("div", { className: "-mx-2.5 -my-1.5", children: /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onSelect: onProfileCardClick,
+                className: "px-2.5 py-1.5 cursor-pointer *:flex-1 *:min-w-0",
+                children: profileCard
+              }
+            ) }, "profile")
           ) : profileCard
         ]
       });

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

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