Oxbow UI

The commandbar-02 component is an application-level UI block designed for quick navigation and command execution. It features a search input, a list of filtered commands with icons and descriptions, and support for keyboard shortcuts, including 'chords' (sequences of keys).

Key Features

• Search & Filtering: Real-time filtering of commands based on text matching (exact, prefix, or subsequence).
• Keyboard Shortcuts:
  • ⌘K or / to open the command bar and focus the input.
  • Esc to close.
  • Arrow Up/Down to navigate results.
  • Enter to select a command.
  • Chords: Supports multi-key sequences (e.g., pressing W then C to trigger a specific command).
• Recent Items: A section to display recent requests or items.

Component Metadata

• Name: commandbar-02
• Aliases: commandbar, commandbar 2, commandbar 02
• Category: application
• Section: commandbar
• Variant: 2

Implementation Details

This component is implemented as an .astro file and uses Alpine.js for client-side interactivity. It relies on a go(href) function to handle navigation when a command is selected.

// The component is located at:
// oxbow/application/commandbar/02.astro

The modals-01 component is an application-level modal designed to invite team members to an account. It includes a form for email input, role selection (Viewer, Editor, Admin), department selection, and expiration settings. It features a success state that displays after a successful submission.

Programmatic Usage

To control the modal programmatically, you can use the following methods:

• Open the modal: Dispatch a custom event named open-invite-modal or call the Alpine.js $refs.show() method.
• Close the modal: Call the Alpine.js close() method.

Note: When using the component, ensure the open property in the x-data object is set to true if you want it visible by default, or manage it via the methods above.

// To open the modal from outside the component scope:
window.dispatchEvent(new CustomEvent('open-invite-modal'));

// Or if accessing via an Alpine component instance:
// $refs.show();

The commandbar-05 is an application-level component designed as a command bar/search interface. It allows users to search through files, people, and updates using a subsequence search algorithm.

Key Features:

• Search & Filtering: Supports global search and category tabs (all, files, people, updates).
• Pinning: Users can pin specific items to keep them prioritized in search results. Pinned items are persisted in localStorage under the key oxbow-cmd5-pins.
• Keyboard Navigation: Full keyboard support for searching, navigating results, pinning, and copying links.
• Preview Pane: Displays a preview of the selected item.

Component Metadata:

• Name: commandbar-05
• Aliases: commandbar, commandbar 5, commandbar 05
• Category: application
• Section: commandbar
• Variant: 5
• File Path: oxbow/application/commandbar/05.astro

The commandbar-01 is an application-level UI component designed for quick actions and navigation. It features a searchable command interface with keyboard shortcuts, icon support, and single-letter hotkeys.

Key Features

• Activation Shortcuts: Open the command bar using ⌘K (or Ctrl+K) or by typing /.
• Navigation: Use ↑ and ↓ arrow keys to navigate results and ↵ (Enter) to select.
• Single-letter Hotkeys: Each option can define a single-letter shortcut (e.g., N for 'New Project') that triggers the action immediately when pressed.
• Custom Events: When an item is selected, the component dispatches a cmd:choose CustomEvent containing the selected item's data.

Integration via Custom Events

To respond to user selections in your application, listen for the cmd:choose event on the window object.

window.addEventListener('cmd:choose', (event) => {
  const selectedItem = event.detail;
  console.log('User chose:', selectedItem.id, selectedItem.href);
  // Handle navigation or action here
});

Oxbow is a CLI tool used to list and add UI blocks (components) to Astro projects. You can run it using npx oxbow.

Commands

• oxbow list: Displays available components grouped by section.
• oxbow add <name|alias> [variant]: Adds a specific component or variant to your project.
• oxbow add --all: Adds all available components to your project.

Flags

• --json: (For list command) Outputs the component registry as a JSON object.
• --yes or -y: (For add command) Overwrites existing files in the src/components directory.
• --all or -a: (For add command) Targets all components in the registry.
• --cwd <path>: Sets the working directory where components should be added (defaults to current directory).

# List available components
npx oxbow list

# Add a specific component variant
npx oxbow add hero 1

# Add a component by name/alias
npx oxbow add marketing-heros-01

# Add all components, overwriting existing files
npx oxbow add --all --yes

# List components in JSON format
npx oxbow list --json