oxbow ui

New components

Command Bars

We shipped a family of command bars with distinct use‑cases and consistent keyboard ergonomics (Cmd/Ctrl+K or / to open, ↑/↓ to navigate, ↵ to select, Esc to close). All variants include fuzzy search, a clear button, and dark‑mode friendly styles. Dynamic classes are protected in the safelist to survive obfuscation.

  • 01 (Free, minimal): Quick actions for New Project, Templates, Docs, Help. Emits cmd:choose.
  • 02 (Shortcuts + chords): “Recent” cards and “Commands”. Supports W then I/T/C and single keys.
  • 03 (Issue triage): Tabs for All/Open/Mine/Mentions, priority chips. Actions emit triage:action.
  • 04 (Automation runner): Configure, run, or schedule automations; favorites in localStorage.
  • 05 (Universal search + preview): Results + right‑side preview, pinning, copy/open.

Improvements

  • Removed brittle ring overrides and added explicit dark‑mode borders where needed.
  • Added safelist entries for dynamic tokens (bg-white/5, text-accent-600, etc.) and exported excludeFromObfuscation in each bar.

See them all components page

Notifications

We introduced accessible, Alpine‑powered overlay notifications with a single permanent live region and focused use‑cases. All appear at sensible positions, support transitions, and avoid CSS obfuscation pitfalls.

  • 01 (Global single, top‑right): Success/Info/Warning/Error. Hover pauses auto‑dismiss; close button. Trigger with:
window.dispatchEvent(
  new CustomEvent("notify", {
    detail: {
      type: "success",
      title: "Saved",
      message: "All good",
      timeout: 4000,
    },
  }),
);

  • 02 (Update available, bottom‑center): Version badge, release notes toggle, “Reload now”, “Later”. Listens to the same notify event with { version, notes }.

  • 03 (Upload progress, bottom‑center): Progress with Pause/Resume/Cancel; on completion shows Open/Dismiss. Trigger with:

window.dispatchEvent(
  new CustomEvent("notify-upload", {
    detail: { name: "archive.zip", size: "80 MB", link: "/files/archive.zip" },
  }),
);

See them all components page

Additional features

  • All notifications are placed in aria-live regions, use semantic roles, and expose screen‑reader labels for controls.
  • Transition utility classes are added to the safelist and excludeFromObfuscation to keep them stable in production builds.

Modals

We expanded the application modals with a flexible, Alpine‑powered date range picker and quality‑of‑life improvements across the set.

  • 08 (Date range + time): Dual‑month calendars with ISO week numbers, hover preview, and presets.
    • Presets: Today, Yesterday, Last 7/30 days, This/Last Week, This/Last Month, This/Last Year, All time.
    • Options: Range toggle, “Disable weekends”, and month min/max constraints (quick “Limit to this month” helper).
    • Time: Start/End time inputs with Apply/Cancel/Clear actions.
    • Events: Emits daterange:apply with { start, end } as Date objects.
  • Accessibility: Uses role="dialog", aria-modal, Escape to close, and overlay click dismissal.
  • Theming: Polished light/dark contrast for selected and in‑range days; transition and dynamic classes are safelisted and exported via excludeFromObfuscation.

See them all components page

We added new sections to the application sidebars and improved their layouts for better usability in their respective use-cases.

  • 01 (Knowledge studio): Added a “Recent” section for quick access to recent items, expanded the team section with more roles, included a system status card, and fixed footer positioning to prevent layout shifts during dropdown expansions.
  • 02 (Support console): Added “Pinned” tickets for urgent items, “Recent Tickets” with timestamps, and “Shortcuts” for quick actions like new ticket creation, bulk operations, export, and archive. Improved overall elaboration for support workflows.

See them all components page

Layout improvements

  • Resolved white gaps at the bottom by repositioning footers absolutely with background coverage.
  • Ensured collapsible sections don’t push content, maintaining stable sidebar height.
  • Enhanced dark-mode support and consistent styling across variants.

See them all components page