Skip to content

Releases: devnonla/devnonla-ui

v0.7.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 16 Sep 13:03

Added

  • EditableInput: inline display with a pencil control. While editing, a popover field saves via onSave (type: text | password | textarea). EditableInput.Key validates ^[A-Z][A-Z0-9_]*$.
  • Table column flex: true shares leftover container width equally; a number is a weight. Text wraps in that width instead of forcing horizontal scroll. Ignored when scroll.x or width is set.

Changed

  • Outlined fields (Input, Select, DatePicker, TimePicker) use the ink --input border instead of the glass frost border, so the stroke stays visible on a white page.
  • Table body and header use text-base (14px in this theme). Header cells use an ink wash (bg-foreground/4).

Upgrade notes

  • Once rowSelection has any selected key, a row click toggles selection and does not call onRow.onClick. Checkbox and radio clicks are unchanged.

v0.6.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 15 Sep 02:38

Added

  • Sidebar: grouped side nav from JSON (type: "group" + items). Optional search, selectedKey / onSelect, href for links. icon may be a Fluent name string.
  • DesktopWindow remembers last collapsed position and size (persistKey, on by default; false to disable).

Changed

  • DesktopWindow keeps resize handles when expanded. Dragging an edge leaves expand and keeps the new size.

v0.5.1

Choose a tag to compare

@phamvanquyit phamvanquyit released this 14 Sep 15:55

Changed

  • Hover/active on Button, Menu, Dropdown, Select, pickers, Pagination, and Tag uses ink tint (ink-hover / ink-active) instead of gray/frost overlays. Menu highlight is ink, not a glass chip.
  • Segmented uses a sliding glass thumb on a frosted track.
  • Splitter gutter is a 1px line that thickens on hover/drag; the center handle pill is gone.
  • AgentChatbox / AgentPanel column is slightly wider. AgentChatbox composer padding is tighter. Default ChatToolCall icon is a code block.

Fixed

  • ChatInput textarea height no longer stays stretched after collapse; it remeasures when the composer width changes.

v0.5.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 14 Sep 07:33

Added

  • AgentChatbox / useAgentChatStream: chat surface where the app POSTs only the new user text and can resume a live SSE stream (send, resume, onStop).
  • Dropdown / ContextMenu items: type: "group" with an optional label.

Changed

  • ChatToolCall header spacing; ChatInput clear icon is slightly smaller.

Upgrade notes

  • onToolAction and type AgentToolAction are removed. Listen with toolHooks (onCall / onResult).

v0.4.3

Choose a tag to compare

@phamvanquyit phamvanquyit released this 13 Sep 03:46

Changed

  • AgentPanel footer status is smaller muted text (text-sm / text-tertiary-foreground).

Fixed

  • AgentPanel / useAgentStream: streamed tool-call events merge into one card (same id, still running, or result-before-params) instead of stacking duplicates.
  • SSE tool-call / tool-result accept field aliases (tool_call_id / callId, name, label, arguments / args, output).

v0.4.2

Choose a tag to compare

@phamvanquyit phamvanquyit released this 13 Sep 03:07

Fixed

  • AgentPanel / useAgentStream: a repeated tool-call SSE event with the same toolCallId updates the existing card (name, label, input) instead of adding a duplicate bubble.

v0.4.1

Choose a tag to compare

@phamvanquyit phamvanquyit released this 13 Sep 02:57

Changed

  • DesktopIcon no longer wraps the default Fluent icon in a frosted squircle plate.
  • Meadow desktop icon grid uses a tighter icon–label gap and nav padding.

Upgrade notes

  • .nonla-desktop-icon-plate is removed. Custom default-icon chrome should go through DesktopIcon media.

v0.4.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 13 Sep 02:21

Added

  • Pagination: Ant Design-style pager (align, showTotal, showQuickJumper, showSizeChanger, simple, hideOnSinglePage, responsive, size changer, jump ellipses). Types: PaginationAlign, PaginationSemanticSlot, PaginationSizeChangerProps.
  • Table pagination forwards the same Pagination options (showTotal, showQuickJumper, align, …).
  • OverlayScroll autoHeight and a horizontal overlay thumb.
  • ButtonCopy / CodeBlockCopyButton size (ControlSize).
  • Tailwind theme colors --color-well / --color-well-strong; .nonla-chat-tool-result-ok.
  • Public types: DesktopHeaderProps, DesktopWindowProps, WindowHeaderProps.

Changed

  • DesktopHeader slots are left / right (was logo / leading / trailing / profile).
  • DesktopWindow chrome is left · title (double-click expands) · right. WindowHeader fills those slots from a child (left / right, not children).
  • Spin variant="agent" matrix uses brand cells and explicit small / default / large metrics. variant="subAgent" removed (same as agent).
  • CodeBlock body uses OverlayScroll.
  • Chat tool / message UI: lucide icons, Spin variant="agent" for running tools, quieter tool cards.

Fixed

  • Escape on an open Modal no longer closes DesktopWindow.
  • Input number / password / search icons follow control size.

Upgrade notes

  • DesktopHeader: logo + leadingleft; trailing + profileright.
  • WindowHeader: pass left / right instead of children.
  • Replace Spin variant="subAgent" with variant="agent".
  • ButtonCopy / CodeBlockCopyButton size is "small" | "default" | "large", not the native button attribute.
  • Standalone Pagination: showSizeChanger turns on when total > 50 unless simple or you pass false. Table still defaults showSizeChanger={false}.

v0.3.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 12 Sep 13:50

Added

  • Splitter / Splitter.Panel — resizable split panels (orientation, min/max size, onResize).
  • ColorPicker panel: saturation/brightness, hue/alpha, HEX / RGB / HSB, presets, showText, allowClear, sizes.
  • Color helper (toHexString, toRgbString, toHsbString, toCssString).

Changed

  • ColorPicker public API now matches Ant Design-style props (value / onChange(color, css), size as control size). SchemaForm color fields use the new picker.

Upgrade notes

  • Replace ColorPicker usage: onChange is (color: Color, css: string) => void; size is "small" | "default" | "large"; presets is optional { label, colors }[].
  • Store Color in controlled mode to avoid HEX round-trip drift.

v0.2.0

Choose a tag to compare

@phamvanquyit phamvanquyit released this 12 Sep 07:42

Added

  • Shimmer — sweep highlight for live status text (import { Shimmer } from "devnonla-ui").
  • <App> ConfigProvider: componentSize, useApp(), useToken(), usePopupContainer(), plus in-tree message.* / Modal.confirm holders.
  • getDesignToken() and useControlSize() — live --nonla-* snapshot and size resolution (control prop → App componentSize → default).
  • Theme knobs --nonla-z-base / --nonla-z-desktop / --nonla-z-window / --nonla-z-header / --nonla-z-popup-base (derived --nonla-z-drawer / --nonla-z-modal / --nonla-z-message / --nonla-z-popup).
  • AgentPanel toolUis and toolHooks — extra tool cards win over builtins; hooks match by name (omit / "*" for every tool).
  • Chat helpers: matchesToolName, matchesToolHook, builtinToolUis, matchesToolUIName, isToolRunning.

Changed

  • Default --nonla-brand #eb9d29#f18d00; --nonla-solid-fg charcoal → white (Button primary, Tag solid, Checkbox).
  • Tailwind spacing control-sm / field-sm 28 → 24, control-lg / field-lg 36 → 40 (aligned with height knobs 24 / 32 / 40).
  • Overlays (Select, Dropdown, DatePicker, Modal, Drawer, …) portal through App getPopupContainer.
  • Desktop window / icon plates use token z-index layers and --nonla-window-glass.
  • .dark is no longer an alias of the light seed block.

Upgrade notes

  • Put one <App> near the root so message.*, Modal.confirm, overlays, and componentSize share theme.
  • Brand fill labels: override --nonla-solid-fg / colors.solidFg if you still want charcoal on amber.
  • Replace class nonla-chat-shimmer with Shimmer or .nonla-shimmer.
  • resolveToolUI(toolName, extras?) — second argument is optional; extra UIs are checked first.