### Install pnpm using curl

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/documentation/getting-started.md

This command downloads and executes the pnpm installation script from the official get.pnpm.io endpoint. It's a quick way to install pnpm if it's not already available on your system.

```bash
curl -fsSL https://get.pnpm.io/install.sh | sh -
```

--------------------------------

### Run Local Example App (Next.js)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/README.md

Starts a local development server for the example Next.js application, demonstrating the usage of the Accelint Design Toolkit. This is useful for testing component integration in a real-world application context.

```bash
pnpm --filter="*apps/next" run dev
```

--------------------------------

### Run Local Example App in Next.js

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-foundation/README.md

Starts a local development server for the Next.js example application, typically found within the 'apps/next' directory, using pnpm. This allows for testing the design foundation components within a Next.js environment.

```bash
pnpm --filter "*apps/next" run dev
```

--------------------------------

### Install Design Toolkit via NPM

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Installs the @accelint/design-toolkit package using npm. This command fetches and adds the library to your project's dependencies. Ensure Node.js and npm are installed.

```bash
npm install @accelint/design-toolkit
```

--------------------------------

### Migrate Design Token Names (Shell Script)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Provides an example command to run a script that helps migrate design system token names within a project. The script assists in updating class names according to new conventions introduced in version 5.0.0 of the Design Toolkit. Requires pnpm and the script to be copied into the application.

```shell
pnpm zx scripts/token-migration.mjs "src"
```

--------------------------------

### ViewStack Example Usage (React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/view-stack/view-stack.docs.mdx

Demonstrates the basic setup and usage of the ViewStack component, including nested ViewStackViews and ViewStackTriggers for navigation. Requires unique IDs for stacks and views.

```tsx
import { ViewStack, ViewStackView, ViewStackTrigger } from './view-stack';
import { Button } from './button';
import { Icon, ChevronLeft } from './icons';
import { uuid } from 'uuid';

const ids = {
  stack: uuid(),
  a: uuid(),
  b: uuid(),
};

<ViewStack id={ids.stack} defaultView={ids.a}>
  <ViewStackView id={ids.a}>
    <ViewStackTrigger for={ids.b}>
      <Button>
        Push View B
      </Button>
    </ViewStackTrigger>
    <h1>View A</h1>
  </ViewStackView>
  <ViewStackView id={ids.b}>
    <ViewStackTrigger for='back'>
      <Button variant='icon'>
        <Icon>
          <ChevronLeft />
        </Icon>
      </Button>
    </ViewStackTrigger>
    <h1>View B</h1>
  </ViewStackView>
</ViewStack>
```

--------------------------------

### Install Map Toolkit (npm)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/README.md

Installs the core @accelint/map-toolkit package using npm. This is the primary installation command for the toolkit.

```sh
npm install @accelint/map-toolkit
```

--------------------------------

### Install @accelint/bus Package

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/bus/README.md

Installs the @accelint/bus package using npm. This is the first step before using the library in your project.

```sh
npm install @accelint/bus
```

--------------------------------

### Install Required Peer Dependencies

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Installs essential libraries that the design toolkit relies on. These include 'tailwindcss', 'tailwind-merge', and 'tailwind-variants' for styling and theming. This step is crucial for the toolkit's CSS generation and functionality. Ensure your project meets the TypeScript, React, and Node.js version requirements.

```bash
pnpm install tailwindcss tailwind-merge tailwind-variants
```

--------------------------------

### Complete Dataset Configuration Example

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/dataset/README.md

Illustrates a comprehensive example of defining, validating, and accessing properties of a dataset configuration. This includes setting visibility, retrieving fields, and demonstrates the structure of a typical configuration object.

```typescript
import { validateDatasetConfig, datasetVisible, datasetFields } from '@accelint/dataset';

const config = {
  id: 'buildings-layer',
  level: 'user',
  visible: true,
  mutatable: false,
  name: 'City Buildings',
  description: 'Building footprints from municipal data',
  serviceType: 'WFS',
  dataType: 'GEOJSON',
  presentationTypes: {
    default: ['polygon']
  },
  fields: [
    {
      id: 'height',
      visible: true,
      nullable: false,
      type: 'f32',
      label: 'Building Height (m)'
    }
  ],
  metadata: {
    table: 'buildings',
    serviceUrls: ['https://gis.city.gov/wfs'],
    serviceVersion: '2.0.0',
    geometryProperty: 'geometry',
    defaultFields: ['height', 'name'],
    filterDialect: 'cql'
  }
};

const validated = validateDatasetConfig(config);
const isVisible = datasetVisible(config); // true
const fields = datasetFields(config);     // Array<LayerDatasetField>
```

--------------------------------

### Install @accelint/smeegl Globally

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Installs the @accelint/smeegl package globally on your system, making its command-line interface accessible from any directory.

```shell
npm install -g @accelint/smeegl
```

--------------------------------

### Install and Run Storybook Locally

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/README.md

Installs project dependencies using pnpm and runs the local Storybook instance for the design toolkit. It also provides a fallback to build the project if initial run fails and instructions for enabling pnpm.

```bash
pnpm i

pnpm --filter=@accelint/design-toolkit preview
```

--------------------------------

### Basic Options List Example (TypeScript/React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/options/options.docs.mdx

Demonstrates the fundamental usage of the Options component to create a simple list of selectable items. Each item includes an icon and a label. This example showcases the basic structure for creating options.

```tsx
import { Options, OptionsItem, OptionsItemLabel, Icon, Placeholder } from '@your-ui-library';

// Basic options list
<Options>
  <OptionsItem textValue="Option 1">
    <Icon><Placeholder /></Icon>
    <OptionsItemLabel>Option 1</OptionsItemLabel>
  </OptionsItem>
  <OptionsItem textValue="Option 2">
    <Icon><Placeholder /></Icon>
    <OptionsItemLabel>Option 2</OptionsItemLabel>
  </OptionsItem>
</Options>
```

--------------------------------

### Install Constellation Tracker CLI

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/constellation-tracker/README.md

Instructions for installing the Constellation Tracker CLI tool. It can be installed from the local repository or globally using npm.

```bash
# From the root of the standard-toolkit repository
pnpm install

# Or install globally
npm install -g @accelint/constellation-tracker
```

--------------------------------

### Install spreet Utility with Homebrew

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Installs the 'spreet' utility, a prerequisite for @accelint/smeegl, using the Homebrew package manager.

```shell
brew install flother/taps/spreet
```

--------------------------------

### Install spreet Utility with crates.io

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Installs the 'spreet' utility, a prerequisite for @accelint/smeegl, using Cargo from crates.io.

```shell
cargo install spreet
```

--------------------------------

### Install Map Mode and Dependencies

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/src/map-mode/map-mode.docs.mdx

This snippet shows how to install the Map Mode toolkit along with its required dependencies, @accelint/bus and @accelint/core, and the React integration, using either npm or pnpm package managers.

```bash
npm install @accelint/map-toolkit @accelint/bus @accelint/core react
# or
pnpm add @accelint/map-toolkit @accelint/bus @accelint/core react
```

--------------------------------

### Set up Theme Provider Component

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Creates a client component to wrap your application with the Design Toolkit's ThemeProvider. This component manages theme toggling (light/dark mode) and allows for theme color overrides. It must be a client component to ensure proper functionality.

```tsx
'use client';

import {PropsWithChildren} from 'react';
import { ThemeProvider as DTKThemeProvider } from '@accelint/design-toolkit';

export function ThemeProvider({ children }: PropsWithChildren) {
  return (
    <DTKThemeProvider>
      {children}
    </DTKThemeProvider>
  );
}
```

--------------------------------

### Install @accelint/smeegl Locally with pnpm

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Installs the @accelint/smeegl package as a local dependency in your project using pnpm.

```shell
pnpm install @accelint/smeegl
```

--------------------------------

### Sectioned Content Example (TypeScript/React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/options/options.docs.mdx

Provides an example of organizing options into multiple logical groups using `OptionsSection`. Each section can have a distinct header, improving the structure and usability of long option lists.

```tsx
import { Options, OptionsItem, OptionsSection, OptionsItemLabel } from '@your-ui-library';

// Sectioned Content
<Options>
  <OptionsSection header="Popular Items">
    <OptionsItem textValue="Item 1"><OptionsItemLabel>Item 1</OptionsItemLabel></OptionsItem>
  </OptionsSection>
  <OptionsSection header="All Items">
    <OptionsItem textValue="Item 2"><OptionsItemLabel>Item 2</OptionsItemLabel></OptionsItem>
  </OptionsSection>
</Options>
```

--------------------------------

### Install @accelint/dataset Package

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/dataset/README.md

Installs the dataset validation and access library using npm. This is the primary package for integrating dataset configuration management into your project.

```bash
npm install @accelint/dataset
```

--------------------------------

### Install @accelint/smeegl Locally with npm

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Installs the @accelint/smeegl package as a local dependency in your project using npm.

```shell
npm install @accelint/smeegl
```

--------------------------------

### Global Hotkey Manager with TypeScript

Source: https://context7.com/gohypergiant/standard-toolkit/llms.txt

Demonstrates how to register and manage global hotkeys using the @accelint/hotkey-manager library. Supports simple bindings, multiple key combinations, and advanced features like key hold behavior. Includes examples of integrating hotkeys within React components. Ensure the library is installed and `globalBind()` is called once during application initialization.

```typescript
import { registerHotkey, Keycode, globalBind } from '@accelint/hotkey-manager';

// Enable hotkey bindings globally (call once in app initialization)
globalBind();

// Register a simple hotkey
export const useToggleGrid = registerHotkey({
  id: 'toggle-grid',
  key: {
    code: Keycode.KeyG,
    alt: true  // Alt+G
  },
  onKeyUp: () => {
    console.log('Grid toggled');
    // Toggle grid visibility logic
  }
});

// Register hotkey with multiple key combinations
export const useSave = registerHotkey({
  id: 'save-document',
  key: [
    { code: Keycode.KeyS, ctrl: true },  // Ctrl+S (auto-converts to Cmd+S on macOS)
    { code: Keycode.F12 }                 // F12
  ],
  onKeyUp: (event, key) => {
    if (key.code === Keycode.KeyS) {
      console.log('Saving with keyboard shortcut');
    } else {
      console.log('Quick save with F12');
    }
    // Save document logic
  }
});

// Advanced hotkey with hold behavior
export const useZoom = registerHotkey({
  id: 'zoom-control',
  key: { code: Keycode.KeyZ, shift: true },
  onKeyDown: () => console.log('Zoom started'),
  onKeyHeld: () => console.log('Continuous zoom activated'),
  onKeyUp: () => console.log('Zoom finished'),
  heldThresholdMs: 500,
  alwaysTriggerKeyUp: true
});

// Use in React component
function MapLayer() {
  const toggleGrid = useToggleGrid();
  useSave();  // Auto-activates on mount

  // Manual control
  useEffect(() => {
    if (someCondition) {
      toggleGrid.forceBind();
    } else {
      toggleGrid.forceUnbind();
    }
  }, [someCondition]);

  return <div>Map content...</div>;
}

```

--------------------------------

### Input Component: Different Sizes Example (TypeScript/React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/input/input.docs.mdx

Presents a comparison of the Input component's available size variants: 'small' and 'medium'. This example helps in choosing the appropriate size based on the layout and UI requirements, with 'medium' being the default.

```tsx
import { Input } from '@your-ui-library/input';

<div className="space-y-4">
  <Input size="small" placeholder="Small input" />
  <Input size="medium" placeholder="Medium input (default)" />
</div>
```

--------------------------------

### Basic Base Map Setup in React

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/src/deckgl/base-map/base-map.docs.mdx

Demonstrates the fundamental setup of the BaseMap component in a React application. It includes importing necessary modules and rendering a basic View with controller enabled. Deck.gl layers should be added as children.

```typescript
import { BaseMap } from '@accelint/map-toolkit/deckgl';
import { View } from '@deckgl-fiber-renderer/dom';
import { uuid } from '@accelint/core';

// Module-level constant for stability
const MAIN_MAP_ID = uuid();

export function MapView() {
  return (
    <BaseMap id={MAIN_MAP_ID} className="w-full h-full">
      <View id="main" controller />
      {/* Add your Deck.gl layers here */}
    </BaseMap>
  );
}
```

--------------------------------

### Input Component: Auto-sizing Example (TypeScript/React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/input/input.docs.mdx

A focused example of the auto-sizing Input component, showing how it dynamically adjusts its width as the user types. This is particularly useful for search bars or text areas where the content length can vary significantly.

```tsx
import { Input } from '@your-ui-library/input';

<Input
  autoSize={true}
  placeholder="This input grows with content"
  defaultValue="Initial content"
/>
```

--------------------------------

### Basic Kanban Board Initialization with React

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/kanban/kanban.docs.mdx

Demonstrates the fundamental setup of a Kanban board using React and the @accelint/design-toolkit. It initializes columns with sample cards and uses the KanbanProvider to manage the state. Dependencies include React's useState hook and the Kanban and KanbanProvider components.

```tsx
import { useState } from 'react';
import { Kanban, KanbanProvider } from '@accelint/design-toolkit';

const initialColumns = [
  {
    id: 'todo',
    title: 'To Do',
    cards: [
      {
        id: 'card-1',
        title: 'Task 1',
        body: 'Description of task 1',
        columnId: 'todo',
        position: 0,
      },
    ],
  },
  {
    id: 'in-progress',
    title: 'In Progress',
    cards: [],
  },
  {
    id: 'done',
    title: 'Done',
    cards: [],
  },
];

function MyKanbanBoard() {
  const [columns, setColumns] = useState(initialColumns);

  return (
    <KanbanProvider columns={columns} updateColumnState={setColumns}>
      <Kanban>
        <KanbanHeader>
          <KanbanHeaderTitle>Project Board</KanbanHeaderTitle>
        </KanbanHeader>

        <KanbanColumnContainer>
          {columns.map((column) => (
            <KanbanColumn key={column.id} column={column}>
              <KanbanColumnHeader>
                <KanbanColumnHeaderDragHandle />
                <KanbanColumnHeaderTitle>
                  {column.title}
                </KanbanColumnHeaderTitle>
                <KanbanColumnHeaderActions cardCount={column.cards.length} />
              </KanbanColumnHeader>

              <KanbanColumnContent>
                {column.cards.map((card) => (
                  <KanbanCard key={card.id} card={card}>
                    <KanbanCardHeader>
                      <KanbanCardHeaderTitle>{card.title}</KanbanCardHeaderTitle>
                    </KanbanCardHeader>
                    <KanbanCardBody>{card.body}</KanbanCardBody>
                  </KanbanCard>
                ))}
                <KanbanColumnActions
                  onAddCard={() => {/* Handle add card */}}
                />
              </KanbanColumnContent>
            </KanbanColumn>
          ))}
        </KanbanColumnContainer>
      </Kanban>
    </KanbanProvider>
  );
}

```

--------------------------------

### Integrate Theme Provider in Root Layout

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Applies the custom ThemeProvider to your application's root layout component. This ensures that theme settings are available throughout the application. The example shows how to structure the `html` and `body` tags for global styling and theme application.

```tsx
import {ThemeProvider} from './theme.tsx';

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    //   On page load or when changing themes, best to add inline in `head` to avoid FOUC
    //   document.documentElement.classList.toggle(
    //     "dark",
    //     localStorage.theme === "dark" ||
    //       (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
    //   );
    <html lang='en' className='font-primary dark'>
      <body className='w-full h-dvh flex flex-col'>
        <DTKTheme>
          {children}
        </DTKTheme>
      </body>
    </html>
  );
}
```

--------------------------------

### Configure Git Commit Template

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/documentation/getting-started.md

This command configures Git globally to use a specified commit message template file. This helps in maintaining consistent commit messages across all your Git repositories.

```git
git config --global commit.template ~/.gitmessage
```

--------------------------------

### Configure ThemeProvider with Color Overrides (TypeScript)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Sets up the `ThemeProvider` from '@accelint/design-toolkit' to match CSS token overrides. Defines overrides for both light and dark modes, specifically for background accent colors. This ensures consistency between visual styles and programmatic theme values.

```tsx
import { ThemeProvider } from '@accelint/design-toolkit';

<ThemeProvider
      overrides={{
        light: {
          bg: {
            accent: {
              primary: {
                bold: [255, 107, 26, 1],
              },
            },
          },
        },
        dark: {
          bg: {
            accent: {
              primary: {
                bold: [196, 211, 0, 1],
              },
            },
          },
        },
      }}
    >
      //...etc
    </ThemeProvider>
```

--------------------------------

### Usage Examples for Constellation Tracker CLI

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/constellation-tracker/README.md

Demonstrates various ways to use the Constellation Tracker CLI, including default execution, specifying custom paths, and regenerating the catalog file.

```bash
# Run with default options (uses current directory)
constellation-tracker

# Specify custom paths
constellation-tracker --node-modules "./custom/node_modules" --catalog-info "./path/to/catalog-info.yaml"

# Regenerate the catalog-info.yaml file completely
constellation-tracker --regenerate
```

--------------------------------

### Toggle Theme Mode Programmatically (JavaScript)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Demonstrates how to toggle the application's theme mode between 'light' and 'dark' using the `useTheme` hook. It utilizes `useCallback` for performance optimization when handling the mode switch. This allows dynamic theme changes based on user interaction or other conditions.

```javascript
  const { mode, toggleMode } = useTheme();

  const handleModeToggle = useCallback(() => {
    toggleMode(mode === 'light' ? 'dark' : 'light');
  }, [mode, toggleMode]);

```

--------------------------------

### Override CSS Variables for Theme Colors (CSS)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Defines custom CSS variables for theme colors, including different states like hover, pressed, and muted. Supports both light and dark modes by conditionally applying color sets. It's recommended to only override colors to maintain component consistency.

```css
// globals.css

@layer theme {
  :root {
    --fiona-orange-bold: #FF6B1A;
    --fiona-orange-hover: #9E4820;
    --fiona-orange-pressed: #7A361A;
    --fiona-orange-muted: #b35123;

    --shrek-green-bold: #C4D300;
    --shrek-green-hover: #D1E000;
    --shrek-green-pressed: #8A9400;
    --shrek-green-muted: #4F5400;

    @variant light {
      --bg-accent-primary-bold: var(--fiona-orange-bold);
      --bg-accent-primary-hover: var(--fiona-orange-hover);
      --bg-accent-primary-pressed: var(--fiona-orange-pressed);
      --bg-accent-primary-muted: var(--fiona-orange-muted);
      --fg-accent-primary-bold: var(--fiona-orange-bold);
      --fg-accent-primary-hover: var(--fiona-orange-hover);
      --fg-accent-primary-pressed: var(--fiona-orange-pressed);
      --outline-accent-primary-bold: var(--fiona-orange-bold);
      --outline-accent-primary-hover: var(--fiona-orange-hover);
      --outline-accent-primary-pressed: var(--fiona-orange-pressed);
    }
    @variant dark {
      --bg-accent-primary-bold: var(--shrek-green-bold);
      --bg-accent-primary-hover: var(--shrek-green-hover);
      --bg-accent-primary-pressed: var(--shrek-green-pressed);
      --bg-accent-primary-muted: var(--shrek-green-muted);
      --fg-accent-primary-bold: var(--shrek-green-bold);
      --fg-accent-primary-hover: var(--shrek-green-hover);
      --fg-accent-primary-pressed: var(--shrek-green-pressed);
      --outline-accent-primary-bold: var(--shrek-green-bold);
      --outline-accent-primary-hover: var(--shrek-green-hover);
      --outline-accent-primary-pressed: var(--shrek-green-pressed);
    }
  }
}
```

--------------------------------

### Configure Tailwind CSS for Design Toolkit

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/documentation/getting-started.docs.mdx

Integrates the design toolkit's styles into your project's root CSS file. This involves importing the toolkit's styles and sourcing its component styles. Incorrect paths to node_modules can lead to styling issues. This configuration is essential for the toolkit's CSS generation.

```css
// globals.css

@import "@accelint/design-toolkit/styles";
@source "../../node_modules/@accelint/design-toolkit"; //path might be different in your app
```

--------------------------------

### Example Hotkey with Multiple Actions and Options

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/hotkey-manager/README.md

Demonstrates registering a hotkey ('zoom') with multiple actions: `onKeyDown`, `onKeyHeld`, and `onKeyUp`. It also shows configuration options like `heldThresholdMs` to customize hold detection time and `alwaysTriggerKeyUp` to ensure `onKeyUp` always fires.

```typescript
registerHotkey({
  id: 'zoom',
  key: { code: Keycode.KeyZ },
  
  // Triggered on initial press
  onKeyDown: () => startZoom(),
  
  // Triggered after holding for 1 second (default)
  onKeyHeld: () => activateContinuousZoom(),
  
  // Triggered on release (unless onKeyHeld fired)
  onKeyUp: () => finishZoom(),
  
  // Configure hold detection time (in milliseconds)
  heldThresholdMs: 500,
  
  // Also trigger onKeyUp even if onKeyHeld was triggered
  alwaysTriggerKeyUp: true
})
```

--------------------------------

### Build a Static Menu with Sections

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/menu/menu.docs.mdx

Illustrates how to organize menu items into distinct sections using the MenuSection component. This example includes item labels, descriptions, and hotkeys within a section.

```javascript
<MenuTrigger>
  <Button>Open Menu</Button>
    <Menu>
      <MenuItem>
        <MenuItemLabel>Item</MenuItemLabel>
      </MenuItem>
      <MenuSection title='Additional Notable Species'>
        <MenuItem>
          <MenuItemLabel>Mallard</MenuItemLabel>
          <MenuItemDescription>Anas platyrhynchos</MenuItemDescription>
          <Hotkey variant='flat'>⌘V</Hotkey>
        </MenuItem>
        <MenuItem>
          <MenuItemLabel>Chimney swift</MenuItemLabel>
          <MenuItemDescription>Chaetura pelagica</MenuItemDescription>
          <Hotkey variant='flat'>⌘V</Hotkey>
        </MenuItem>
      </MenuSection>
    </Menu>
</MenuTrigger>
```

--------------------------------

### Install @accelint/ntds using npm

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/ntds/README.md

This command installs the @accelint/ntds package and its dependencies using npm. Ensure you have Node.js and npm installed on your system.

```shell
npm install @accelint/ntds
```

--------------------------------

### Run Local Development Server (pnpm)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/README.md

Starts the Storybook development server for @accelint/map-toolkit locally. This command is used for developing and previewing components during local work.

```bash
# Install dependencies
pnpm i

# Run Storybook development server
pnpm --filter=@accelint/map-toolkit preview
```

--------------------------------

### Build a Simplest Static Menu

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/menu/menu.docs.mdx

Demonstrates the simplest way to construct a static menu using MenuTrigger, Menu, and MenuItem components. This serves as a basic building block for more complex menu structures.

```javascript
<MenuTrigger>
  <Button>Open Menu</Button>
    <Menu>
      <MenuItem>
        <MenuItemLabel>Item</MenuItemLabel>
      </MenuItem>
      <MenuSeparator />
      <MenuItem>
        <MenuItemLabel>Item</MenuItemLabel>
      </MenuItem>
    </Menu>
</MenuTrigger>
```

--------------------------------

### Display Help for smeegl CLI

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/smeegl/README.md

Displays the help information for the smeegl command-line tool, outlining available commands and options.

```shell
smeegl --help
```

--------------------------------

### Switch Component Example Usage (TypeScript/React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/switch/switch.docs.mdx

Demonstrates various ways to use the Switch component, including basic usage with a label, controlled state management, disabled switches, using a context provider for default props, and applying custom styling through class names.

```tsx
import { Switch, SwitchProvider } from '@your-design-system/components';

// Basic switch with label
<Switch>Enable notifications</Switch>

// Controlled switch
const [isEnabled, setIsEnabled] = React.useState(false);
<Switch isSelected={isEnabled} onChange={setIsEnabled}>
  Dark mode
</Switch>

// Disabled switch
<Switch isDisabled>Feature unavailable</Switch>

// Using context provider for default props
<SwitchProvider>
  <Switch>Option 1</Switch>
  <Switch>Option 2</Switch>
</SwitchProvider>

// With custom styling
<Switch
  classNames={{
    control: "custom-control-class",
    label: "custom-label-class"
  }}
>
  Custom styled switch
</Switch>
```

--------------------------------

### Example package.json for Constellation Tracker Metadata

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/tooling/constellation-tracker/README.md

An example JSON snippet illustrating the custom fields (`owner`, `subPath`) in `package.json` that Constellation Tracker utilizes for component metadata.

```json
{
  "name": "my-package",
  "owner": "default/my-team",
  "subPath": "packages/my-package"
}
```

--------------------------------

### Chip Component Basic and Variant Examples (React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/chip/chip.docs.mdx

Demonstrates the basic usage of the Chip component and its various visual variants (info, advisory, normal, serious, critical) for different contextual meanings. Also shows how to include icons and control chip sizes (medium, small).

```tsx
// Basic chip with default styling
<Chip>Tag</Chip>

// Chip with different variants
<Chip variant="info">Information</Chip>
<Chip variant="advisory">Warning</Chip>
<Chip variant="normal">Success</Chip>
<Chip variant="serious">Caution</Chip>
<Chip variant="critical">Error</Chip>

// Chip with icon
<Chip variant="info">
  <Icon><Placeholder /></Icon>
  With Icon
</Chip>

// Chip with different sizes
<Chip size="medium">Medium Chip</Chip>
<Chip size="small">Small Chip</Chip>
```

--------------------------------

### Form Example with Labels (React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/label/label.docs.mdx

A practical example of using Label components within a form structure. It showcases how to associate labels with inputs and manage required fields.

```tsx
<form className="space-y-4">
  <div>
    <Label for="name" isRequired={true}>Full Name</Label>
    <input id="name" type="text" required />
  </div>

  <div>
    <Label for="email">Email Address</Label>
    <input id="email" type="email" />
  </div>

  <div>
    <Label for="phone">Phone Number</Label>
    <input id="phone" type="tel" />
  </div>
</form>
```

--------------------------------

### Install Cursor Coordinates Dependencies

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/src/cursor-coordinates/cursor-coordinates.docs.mdx

Provides the necessary npm or pnpm commands to install the Cursor Coordinates hook and its required dependencies, including map toolkit, bus, core, geo, and react.

```bash
npm install @accelint/map-toolkit @accelint/bus @accelint/core @accelint/geo react
# or
pnpm add @accelint/map-toolkit @accelint/bus @accelint/core @accelint/geo react
```

--------------------------------

### CoordinateField Paste Handling Examples

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/coordinate-field/coordinate-field.docs.mdx

Provides illustrative examples of the CoordinateField's paste handling functionality, demonstrating how different coordinate formats are automatically converted when pasted into the component, including cases requiring disambiguation.

```text
Example pasting behavior:
- Paste "40.7128, -74.0060" into a DDM field → Converts to 40° 42.768' N, 74° 0.360' W
- Paste "18T WL 80654 06346" into a DD field → Converts to 40.7128, -74.006
- Paste ambiguous value → Shows dialog to select the intended format
```

--------------------------------

### Deck.gl Text Layer Usage with Standard Toolkit

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/src/deckgl/text-layer/text-layer.docs.mdx

Demonstrates how to instantiate and configure the TextLayer from the @accelint/map-toolkit for use with Deck.gl. It includes data formatting, position and text retrieval functions, and various styling options such as font size, weight, family, line height, color, and outline. The example also shows how to initialize a Deck.gl instance with the custom layer.

```typescript
import { Deck } from '@deck.gl/core';
import { TextLayer } from '@accelint/map-toolkit/deckgl/text-layer';

const layer = new TextLayer({
  id: 'TextLayer',
  data: [
    { position: [-122.4, 37.74], text: 'Hello World!' },
    { position: [-122.3, 37.75], text: 'Extended: àáâãäå' }
  ],
  getText: (d) => d.text,
  getPosition: (d) => d.position,

  // Styling options
  getSize: 10, // Font size in pixels (can also be a function: d => d.fontSize)
  fontWeight: 500,
  fontFamily: 'Arial, sans-serif',
  lineHeight: 1.2,

  // Colors - provide a Color array directly or a function that returns a Color array
  getColor: [255, 255, 255, 255], // White text

  // Stroke
  outlineWidth: 1,
  outlineColor: [0, 0, 0, 255], // Black outline
});

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11
  },
  controller: true,
  layers: [layer]
});
```

--------------------------------

### Logger with Plugins: Configuration and Usage (TypeScript)

Source: https://context7.com/gohypergiant/standard-toolkit/llms.txt

Initializes a logger with configurable options including level, environment, pretty printing, and plugins. It automatically includes callsite information, environment context, and supports serialized errors. Demonstrates both development (pretty output) and production (JSON output) configurations.

```typescript
import { getLogger, callsitePlugin, environmentPlugin } from '@accelint/logger';

// Initialize logger with configuration
const logger = getLogger({
  enabled: true,
  level: 'debug',
  env: 'development',
  pretty: true,
  prefix: '[MyApp]',
  plugins: [
    // Custom plugins can be added here
  ],
  transports: [
    // Custom transports can be added here
  ]
});

// Use logger with automatic callsite tracking
logger.info('Application started', { version: '1.0.0' });
// Output: [MyApp] INFO: Application started { version: '1.0.0' }
//         at src/index.ts:15:8

logger.debug('Processing user request', {
  userId: '12345',
  action: 'login'
});

logger.warn('Deprecated API used', {
  api: '/v1/users',
  replacement: '/v2/users'
});

logger.error('Failed to connect to database', {
  error: new Error('Connection timeout'),
  retries: 3
});

// Logger automatically includes:
// - Callsite information (file, line, column)
// - Environment context (server vs client)
// - Serialized errors
// - Pretty terminal output in development

// Production usage
const prodLogger = getLogger({
  enabled: true,
  level: 'info',
  env: 'production',
  pretty: false,  // JSON output for log aggregation
  prefix: '[PROD]'
});

prodLogger.info('User authenticated', { userId: 'abc123' });
```

--------------------------------

### Tree Component: Basic Example with Dynamic Data

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/tree/tree.docs.mdx

Shows how to render the Tree component dynamically using an `items` array and a render function. This approach is efficient for large or externally sourced datasets.

```jsx
const items = [
  {
    key: 'one',
    label: 'One',
    children: [
      {
        key: 'two',
        label: 'Two',
      }
    ]
  }
];

const Node = ({ node }) => (
  <TreeItem id={node.key} textValue={node.label}>
    <TreeItemContent>
      <TreeItemLabel>{node.label}</TreeItemLabel>
    </TreeItemContent>
    {node.children?.map(child => <Node key={child.key} node={child} />)}
  </TreeItem>
);

<Tree items={items}>
  {(node) => <Node key={node.key} node={node} />}
</Tree>
```

--------------------------------

### Table Component Usage Example (React)

Source: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/design-toolkit/src/components/table/table.docs.mdx

Demonstrates how to use the Table component with column definitions and data. It shows dynamic column creation using createColumnHelper and static rendering of table structure.

```tsx
import { createColumnHelper } from '@tanstack/react-table';
import { Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell } from './table';

// Define the type for your data
interface Person {
  id: string;
  firstName: string;
  lastName: string;
}

const columnHelper = createColumnHelper<Person>();

const columnsExample = [
  columnHelper.accessor("firstName", {
    id: "firstName",
    cell: (info) => info.getValue(),
    header: () => <span>First Name</span>,
  }),
  columnHelper.accessor((row) => row.lastName, {
    id: "lastName",
    cell: (info) => <i>{info.getValue()}</i>,
    header: () => <span>Last Name</span>,
  }),
];

const dataExample = [
    {
        id: "tanner",
        firstName: "tanner",
        lastName: "linsley",
    },
    {
        id: "joe",
        firstName: "joe",
        lastName: "dirte",
    },
    {
        id: "jane",
        firstName: "jane",
        lastName: "doe",
    },
];

// Dynamic usage
<Table columns={columnsExample} data={dataExample}/>

// Static usage
<Table {...args}>
    <TableHeader>
    <TableRow>
        <TableHeaderCell>First Name</TableHeaderCell>
        <TableHeaderCell>Last Name</TableHeaderCell>
    </TableRow>
    </TableHeader>
    <TableBody>
    {dataExample.map((person) => (
        <TableRow key={person.id}>
        <TableCell>{person.firstName}</TableCell>
        <TableCell>{person.lastName}</TableCell>
        </TableRow>
    ))}
    </TableBody>
</Table>
```