### Install Dependencies and Run Development Server

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Navigates to the project directory, installs dependencies, and starts the local development server.

```sh
cd maritime-app
npm install
npm run dev
```

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

### Manual Project Setup Commands

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/README.md

Commands to install dependencies and build the library in a manual development environment.

```bash
npm install
```

```bash
npm run build:lib
```

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

### Installing Framework Wrappers

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Install the specific wrapper package for your chosen framework.

```bash
npm install @oicl/openbridge-webcomponents-<framework>
```

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

### Installing Full-Bundle Package

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Install the full-bundle package to include source and documentation files.

```bash
npm install @oicl/openbridge-webcomponents-full-bundle
```

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

### Install project dependencies

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/vue-demo/README.md

Run this command to install all required packages for the project.

```sh
npm install
```

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

### Install development dependencies

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/README.md

Install the required packages to run the documentation generator.

```bash
npm i -D tsx typescript dotenv openai globby
```

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

### Run the development server

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/vue-demo/README.md

Execute this command to start the local development server for the demo.

```sh
npm run dev
```

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

### Install OpenBridge Web Components

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Install the library via npm to begin using the components.

```bash
npm install @oicl/openbridge-webcomponents
```

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

### Install package via npm

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Install the core package or framework-specific wrappers.

```bash
npm install @oicl/openbridge-webcomponents
```

```bash
npm install @oicl/openbridge-webcomponents-vue
```

```bash
npm install @oicl/openbridge-webcomponents@next
```

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

### Initialize Angular Project

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Commands to install the Angular CLI and scaffold a new project.

```sh
npm install -g @angular/cli
ng new maritime-app
```

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

### Install React Router

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Install the necessary routing dependency for the project.

```sh
npm install react-router-dom
```

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

### Install OpenBridge React package

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-react/README.md

Install the package via npm to begin using the components.

```bash
npm install @oicl/openbridge-webcomponents-react
```

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

### Install OpenBridge Angular package

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-ng/README.md

Install the library via npm.

```bash
npm install @oicl/openbridge-webcomponents-ng
```

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

### Run Angular Development Server

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Commands to navigate to the project directory and start the local development server.

```sh
cd maritime-app
npm run start
```

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

### Install OpenBridge Vue package

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-vue/README.md

Install the package via npm to begin using the components.

```bash
npm install @oicl/openbridge-webcomponents-vue
```

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

### Providing Component Usage Examples in JSDoc

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/prompt-system.txt

Include concise HTML examples in JSDoc to clarify complex component structures, such as those requiring multiple slots or specific property combinations.

```html
 * <obc-floating-item type="regular" hasTimestamp action>
 *   <span slot="primary-icon">ℹ️</span>
 *   <span slot="title">Network Connected</span>
 *   <span slot="description">You are now online.</span>
 *   <span slot="time">14:32</span>
 *   <button slot="action">View</button>
 * </obc-floating-item>
```

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

### Run Storybook in Dev Container

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/README.md

Command to start the Storybook development server after opening the workspace in a container.

```bash
npm run storybook
```

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

### Configure AppComponent for Brilliance Menu

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Initial component setup importing the top bar and brilliance menu modules.

```ts
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ObcTopBar } from "@obc/components/top-bar/top-bar";
import { ObcBrillianceMenu } from "@obc/components/brilliance-menu/brilliance-menu";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, ObcTopBar, ObcBrillianceMenu],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class AppComponent {
  title = "OpenBridge-angular";
}
```

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

### Install OpenBridge Svelte package

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-svelte/README.md

Use npm to add the Svelte wrapper library to your project dependencies.

```bash
npm install @oicl/openbridge-webcomponents-svelte
```

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

### Install Noto Sans font

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Apply the required font family globally.

```css
@font-face {
  font-family: 'Noto Sans';
  src: url('path/to/NotoSans.ttf');
}
* {
  font-family: Noto Sans;
}
```

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

### Run Local Snapshot Tests

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Commands to install required Playwright browsers and execute snapshot tests locally.

```bash
# Install Chromium (required for snapshot tests)
npx playwright install --with-deps chromium

# Run all snapshot tests
npm run test-storybook

# Update snapshots interactively (press 'u' in Vitest terminal)
# Or replace baselines wholesale:
npm run update-snapshots
```

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

### Configure TopBar Properties

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Example of passing title and page name properties to the TopBar component.

```tsx
<ObcTopBar appTitle="Hello" pageName="world!" />
```

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

### Icon Usage in Slots

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/prompt-system.txt

Examples of how to include OpenBridge icons within component slots.

```html
<obi-placeholder></obi-placeholder>
```

```html
<obi-arrow></obi-arrow>
```

```html
<obi-search></obi-search>
```

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

### Implement Scatter Plot in Frameworks

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/graph.md

Usage examples for integrating the scatter plot component in Vue and React environments.

```html
<Scatter :options="options" :data="data" />
```

```html
<Scatter options="{options}" data="{data}" />
```

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

### Clone the repository

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/CONTRIBUTING.md

Initial steps to download the project to a local machine.

```bash
git clone https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git
cd openbridge-webcomponents
```

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

### Loading the Bundle Version

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Use the bundled version for quick prototyping via a script tag.

```html
<script
  type="module"
  src="node_modules/@oicl/openbridge-webcomponents/dist/openbridge-webcomponents.bundle.js"
></script>
```

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

### Configure theme and size

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Set the global theme and component size attributes on the document root.

```html
<html lang="en" data-obc-theme="day"></html>
```

```html
<body class="obc-component-size-regular"></body>
```

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

### Importing Full-Bundle File

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Load the bundled file from the full-bundle package.

```html
<script
  type="module"
  src="node_modules/@oicl/openbridge-webcomponents-full-bundle/bundle/openbridge-webcomponents.bundle.js"
></script>
```

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

### Initialize React Project with Vite

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Creates a new React project using the TypeScript template.

```sh
npm create vite@latest maritime-app -- --template react-ts
```

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

### Import CSS file

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Include the required global styles in your project.

```js
import '@oicl/openbridge-webcomponents/dist/openbridge.css';
```

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

### Run documentation generation

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/README.md

Execute the generator for specific files, folders, or the entire source tree.

```bash
npx tsx script/docgen/docs-gen.ts \
  src/building-blocks/external-scale/external-scale.ts
```

```bash
npx tsx script/docgen/docs-gen.ts \
  src/building-blocks/external-scale
```

```bash
npx tsx script/docgen/docs-gen.ts --all
```

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

### Project Build and Maintenance Commands

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/AGENTS.md

Standard npm scripts for building, linting, formatting, and testing the web components package.

```bash
# Install dependencies (from repo root)
npm install

# Dev build (translations → vite)
npm run build

# Full build (translations → typecheck → bundle → vite → CEM → wrappers)
npm run build:full

# Type-check only
npm run typecheck

# Lint
npm run lint              # css mixins/variables/icons + slots + lit-analyzer + eslint
npm run lint:eslint       # eslint only
npm run lint:slots        # audit @slot/@fires JSDoc vs templates & dispatched events

# Format
npm run format            # prettier write
npm run format:check      # prettier check

# Storybook
npm run storybook         # dev server on :6006
npm run build-storybook   # static build

# Tests
npm run test-storybook          # visual snapshot tests (Vitest + Playwright)
npm run test-storybook:watch    # watch mode
npm run update-snapshots        # replace baselines

# Custom element manifest
npm run analyze           # regenerate custom-elements.json

# Create new component (interactive)
npm run new:component

# Download icons from Figma
npm run download:icons
```

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

### Define Initial Component Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Basic HTML structure for the top bar and brilliance menu placement.

```html
<header>
  <obc-top-bar
    [appTitle]="title"
    [showDimmingButton]="true"
    [showClock]="true"
  />
</header>

<main>
  <obc-brilliance-menu class="brilliance" />
  <router-outlet />
</main>
```

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

### Verify Bundle Size

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Builds the demo workspace to ensure the bundle remains within PWA caching limits.

```bash
npm run build --workspace=vue-demo
```

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

### Build Docker Image for Testing

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Command to build the Docker image based on the Playwright Ubuntu environment from the repository root.

```bash
npm run build:docker-for-storybook-testing
```

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

### Importing Standard Web Components

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Import individual components to use them in your project.

```javascript
import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
```

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

### Initialize Brilliance Menu and Top Bar

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Basic implementation of the TopBar and BrillianceMenu components in a React application.

```tsx
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react/components/top-bar/top-bar";
import { ObcBrillianceMenu } from "@oicl/openbridge-webcomponents-react/components/brilliance-menu/brilliance-menu";

import "./App.css";

function App() {
  return (
    <>
      <header>
        <ObcTopBar showDimmingButton appTitle="Hello" pageName="world!" />
      </header>
      <main>
        <ObcBrillianceMenu />
      </main>
    </>
  );
}
```

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

### Build Framework Wrappers

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Command to trigger the auto-generation of Vue, React, Angular, and Svelte wrappers from the core web components.

```bash
npm run build:wrappers
```

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

### Create NavigationMenu component with raw web components

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Initial implementation of the navigation menu using standard web component tags.

```tsx
export function NavigationMenu({...delegated}) {
    return (
                <obc-navigation-menu {...delegated}>
          <obc-navigation-item slot="main" label="Apps" href="#">
            <obi-applications slot="icon"></obi-applications>
          </obc-navigation-item>
          <obc-navigation-item slot="main" checked="" label="Alerts" href="#">
            <obi-alerts slot="icon"></obi-alerts>
          </obc-navigation-item>
          <obc-navigation-item slot="main" label="Dimming" href="#">
            <obi-palette-dimming slot="icon"></obi-palette-dimming>
          </obc-navigation-item>

          <obc-navigation-item slot="footer" label="Help" href="#">
            <obi-support-google slot="icon"></obi-support-google>
          </obc-navigation-item>
          <obc-navigation-item slot="footer" label="Settings" href="#">
            <obi-settings-iec slot="icon"></obi-settings-iec>
          </obc-navigation-item>
          <obc-navigation-item slot="footer" label="Alert" href="#">
            <obi-alert-list slot="icon"></obi-alert-list>
          </obc-navigation-item>

          <img slot="logo" src="/companylogo-day.png" alt="logo">
        </obc-navigation-menu>
    )
}
```

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

### Generate a new component

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Use the provided npm script to scaffold a new component using the default template.

```bash
npm run new:component
```

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

### Run visual snapshot tests

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Execute the full visual regression test suite to identify icon-related drift.

```bash
npx vitest run --project storybook
```

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

### Initialize Chart.js Plot

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/graph.md

Creates a new Chart instance using the defined configuration and data.

```javascript
const config = {
  type: "scatter",
  data: [power, adviceLines],
  options: options,
};
chart = new Chart(ctx, config);
```

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

### Download and Generate Icons

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Executes the icon download and generation process from Figma.

```bash
npm run download:icons
```

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

### Authenticate with GitHub Package Registry

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Command to log in to the GitHub package registry using the @oicl scope.

```bash
npm login --registry https://npm.pkg.github.com/ --scope=@oicl
```

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

### Search for legacy icon references

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Use grep to identify components still referencing old icon family names before performing a migration.

```bash
grep -rE "obi-<old-family>-|icon-<old-family>-" src/
```

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

### Import components

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Import specific components for standard web or Vue usage.

```js
import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
```

```js
import ObcTopBar from '@oicl/openbridge-webcomponents-vue/components/top-bar/ObcTopBar.vue';
```

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

### Update Local Baselines from Docker Results

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Steps to copy snapshot results from the temporary directory to the local project directory and update baselines.

```bash
# From packages/openbridge-webcomponents
# 1. Create results directory if it doesn't exist
mkdir -p __vis__/linux/__results__

# 2. Copy results from temp to package directory
cp -r /tmp/openbridge-webcomponents-vis-results/* __vis__/linux/__results__/

# 3. Run the update script (replaces baselines with results)
npm run update-snapshots
```

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

### Configure Root Component Logic

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Logic for toggling between the brilliance menu and navigation menu in the root component.

```typescript
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ObcTopBar } from "@obc/components/top-bar/top-bar";
import {
  ObcBrillianceMenu,
  type ObcPaletteChangeEvent,
} from "@obc/components/brilliance-menu/brilliance-menu";
import { DateService } from "./core/services/date.service";
import { NavMenuComponent } from "./nav-menu/nav-menu.component";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, ObcTopBar, ObcBrillianceMenu, NavMenuComponent],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class AppComponent {
  title = "OpenBridge-angular";
  showBrillianceMenu = false;
  showNavMenu = false;
  date: string = "";

  constructor(private dateService: DateService) {}

  ngOnInit() {
    this.dateService.date$.subscribe((newDate) => {
      this.date = newDate;
    });
  }

  handleDimmingButtonClicked() {
    this.showBrillianceMenu = !this.showBrillianceMenu;
    this.showNavMenu = false;
  }

  handleNavMenuButtonClicked() {
    this.showNavMenu = !this.showNavMenu;
    this.showBrillianceMenu = false;
  }

  onPaletteChange(event: ObcPaletteChangeEvent) {
    document.documentElement.setAttribute("data-obc-theme", event.detail.value);
  }
}
```

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

### Import TopBar Component

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

TypeScript configuration for the root component including the OpenBridge TopBar.

```ts
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ObcTopBar } from "@obc/components/top-bar/top-bar";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, ObcTopBar],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class AppComponent {
  title = "OpenBridge-angular";
}
```

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

### Configure Theme Palette

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Set the global theme by modifying the data-obc-theme attribute on the html tag.

```html
<html lang="en" data-obc-theme="day"></html>
```

```html
<html lang="en" data-obc-theme="night"></html>
```

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

### Implement Advice Lines

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/graph.md

Creates an advice line configuration where Number.NaN is used to break the line segments, effectively making parts of the line invisible.

```javascript
const adviceLines = {
  data: [
    { x: 5, y: 5 },
    { x: 10, y: 5 },
    { x: 10, y: Number.NaN },
    { x: 15, y: Number.NaN },
    { x: 15, y: 5 },
    { x: 20, y: 5 },
  ],
  showLine: true,
  borderColor: instrumentEnhancedSecondary,
  borderWidth: 8,
  borderCapStyle: "round", // Make the line ends round
  pointRadius: 0,
  stepped: true,
};
```

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

### Implement Azimuth Demo Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Provides the HTML structure for the slider and thruster components with property and event binding.

```html
<obc-slider
  [min]="0"
  [max]="360"
  [step]="1"
  [value]="0"
  (valueEvent)="onAngleChange($event)"
></obc-slider>
<obc-azimuth-thruster [angle]="angle" [thrust]="50"> </obc-azimuth-thruster>
```

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

### Use components in markup

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/docs/GettingStarted.mdx

Render the component in HTML or Vue templates.

```html
<obc-top-bar></obc-top-bar>
<!-- or with Vue -->
<ObcTopBar></ObcTopBar>
```

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

### Configure environment variables

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/README.md

Set the OpenAI API key and model preference in a .env file.

```env
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
OPENAI_MODEL=gpt-4.1      (or whichever you prefer)
```

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

### Configure BrowserRouter

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Wrap the root application component with BrowserRouter in the main entry file.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
);
```

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

### Create a new branch

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/CONTRIBUTING.md

Command to initialize a new feature or fix branch.

```bash
git checkout -b your-branch-name
```

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

### Execute Tests in Docker

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Command to run Storybook tests inside the container, mounting local files to persist snapshot results.

```bash
npm run test-storybook:docker
```

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

### Import OpenBridge CSS

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-svelte/README.md

Include the global CSS file in your application's main entry point to ensure correct component styling.

```javascript
import "@oicl/openbridge-webcomponents/dist/openbridge.css";
```

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

### Import Navigation Styles

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Import the CSS file into the NavigationMenu component.

```ts
import "./NavigationMenu.css";
```

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

### Update Application Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Minimal HTML content for the root application template.

```html
<router-outlet />
```

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

### Configure navigation menu template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Defines the navigation structure using Openbridge components and binds the active state to the router.

```html
<obc-navigation-menu>
  <obc-navigation-item
    slot="main"
    [checked]="isActive('/')"
    label="Azimuth"
    routerLink="/"
  >
    <obi-propulsion-azimuth-thruster
      slot="icon"
    ></obi-propulsion-azimuth-thruster>
  </obc-navigation-item>
  <obc-navigation-item
    slot="main"
    [checked]="isActive('/tunnel')"
    label="Tunnel"
    routerLink="/tunnel"
  >
    <obi-propulsion-tunnel-thruster
      slot="icon"
    ></obi-propulsion-tunnel-thruster>
  </obc-navigation-item>

  <obc-navigation-item slot="footer" label="Help" href="#">
    <obi-support-google slot="icon"></obi-support-google>
  </obc-navigation-item>
  <obc-navigation-item slot="footer" label="Settings" href="#">
    <obi-settings-iec slot="icon"></obi-settings-iec>
  </obc-navigation-item>
  <obc-navigation-item slot="footer" label="Alert" href="#">
    <obi-alert-list slot="icon"></obi-alert-list>
  </obc-navigation-item>

  <img slot="logo" src="/companylogo-day.png" alt="logo" />
</obc-navigation-menu>
```

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

### Style and Import Navigation Menu

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

CSS positioning for the navigation menu and the corresponding import statement.

```css
.navigation-menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
```

```typescript
import "./NavigationMenu.css";
```

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

### Configure Chart.js Options

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/graph.md

Defines responsive settings, annotations, and axis styling for a scatter plot.

```javascript
const options = {
  responsive: true, // Enable responsiveness (redraw on window resize)
  animation: false, // Disable animations
  plugins: {
    legend: {
      display: false, // Disable the legend for this case
    },
    annotation: {
      annotations: {
        // Make a horizontal line at y = target denoting the target value
        line1: {
          type: "line",
          yMin: target,
          yMax: target,
          borderColor: instrumentTickMarkTertiary,
          borderWidth: 1,
          borderDash: [5, 5],
        },
      },
    },
  },
  scales: {
    y: {
      min: 0, // Min y value
      max: 100, // Max y value
      ticks: {
        stepSize: 50, // Step size for the y axis
        color: elementNeutralColor, // Font color for the y axis
      },
      border: {
        display: false, // Disable the border of the y axis
      },
      grid: {
        color: instrumentFrameTertiary,
      },
      position: "right", // Position the y axis on the right side
      beginAtZero: true, // Start the y axis at 0
    },
    // Similarly for the x axis
    x: {
      ticks: {
        stepSize: 5,
        color: elementNeutralColor,
      },
      border: {
        color: instrumentFrameTertiary,
      },
      grid: {
        display: false, // Disable horizontal grid lines
      },
      type: "linear",
    },
  },
};
```

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

### Update Application Layout

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Position the router-outlet above navigation menus to ensure correct layering.

```html
<header>
  <obc-top-bar
    [appTitle]="title"
    [showDimmingButton]="true"
    [showClock]="true"
    [dimmingButtonActivated]="showBrillianceMenu"
    (dimmingButtonClickedEvent)="handleDimmingButtonClicked()"
    (menuButtonClickedEvent)="handleNavMenuButtonClicked()"
    [menuButtonActivated]="showNavMenu"
    [date]="date"
  />
</header>

<main>
  <router-outlet />
  @if (showBrillianceMenu) {
  <obc-brilliance-menu
    class="brilliance"
    (paletteChangedEvent)="onPaletteChange($event)"
  />} @if (showNavMenu) {
  <app-nav-menu class="navigation-menu "></app-nav-menu> }
</main>
```

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

### Create Instrument Demo Page

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Defines a new component to display the Azimuth Thruster instrument.

```tsx
import { ObcAzimuthThruster } from "@oicl/openbridge-webcomponents-react/navigation-instruments/azimuth-thruster/azimuth-thruster";

export function InstrumentDemo() {
  return <ObcAzimuthThruster />;
}
```

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

### Implement TunnelDemo Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Displays the thruster component within the tunnel demo page template.

```html
<obc-thruster [tunnel]="true" [thrust]="-30" />
```

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

### Apply Theme via HTML Attribute

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Switch the active theme by setting the data-obc-theme attribute on the html element or any ancestor.

```html
<html data-obc-theme="night"></html>
```

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

### Define Navigation Menu Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Configures the navigation menu structure with main and footer items using Openbridge components.

```html
<obc-navigation-menu>
  <obc-navigation-item slot="main" label="Apps" href="/">
    <obi-propulsion-azimuth-thruster
      slot="icon"
    ></obi-propulsion-azimuth-thruster>
  </obc-navigation-item>
  <obc-navigation-item
    slot="main"
    [checked]="true"
    label="Alerts"
    href="/tunnel"
  >
    <obi-propulsion-tunnel-thruster
      slot="icon"
    ></obi-propulsion-tunnel-thruster>
  </obc-navigation-item>

  <obc-navigation-item slot="footer" label="Help" href="#">
    <obi-support-google slot="icon"></obi-support-google>
  </obc-navigation-item>
  <obc-navigation-item slot="footer" label="Settings" href="#">
    <obi-settings-iec slot="icon"></obi-settings-iec>
  </obc-navigation-item>
  <obc-navigation-item slot="footer" label="Alert" href="#">
    <obi-alert-list slot="icon"></obi-alert-list>
  </obc-navigation-item>

  <img slot="logo" src="/companylogo-day.png" alt="logo" />
</obc-navigation-menu>
```

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

### Implement CSS for Two-Layer Component Layout

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Defines the wrapper and visible-wrapper classes using CSS variables for touch and visual target sizing.

```css
.wrapper {
  height: var(--ui-components-button-touch-target-size); /* 48px */
  min-width: var(--ui-components-button-touch-target-size);
  display: flex;
  align-items: center;
  justify-content: center;
  /* transparent — no border or background */
  @mixin style style=flat visibleWrapperClass=.visible-wrapper;
}

.visible-wrapper {
  height: var(--ui-components-button-visual-size); /* 32px */
  border-radius: var(--ui-components-button-border-radius);
  /* background and border injected by @mixin style */
}
```

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

### Implement State and Event Handling

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Logic for toggling menu visibility and handling palette changes via component events.

```ts
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ObcTopBar } from "@obc/components/top-bar/top-bar";
import {
  ObcBrillianceMenu,
  type ObcPaletteChangeEvent,
} from "@obc/components/brilliance-menu/brilliance-menu";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, ObcTopBar, ObcBrillianceMenu],
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class AppComponent {
  title = "OpenBridge-angular";
  showBrillianceMenu = false;

  handleDimmingButtonClicked() {
    this.showBrillianceMenu = !this.showBrillianceMenu;
  }

  onPaletteChange(event: ObcPaletteChangeEvent) {
    document.documentElement.setAttribute("data-obc-theme", event.detail.value);
  }
}
```

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

### Vue-Demo Visual Smoke Test Commands

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/AGENTS.md

Commands for managing visual regression tests in the vue-demo package.

```bash
npm run test:visual          # compare screens against committed baselines
npm run test:visual:update   # regenerate baselines after an intended change
npm run test:visual          # ALWAYS re-run after updating to confirm stability
```

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

### Update general visual snapshots

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Refresh snapshots for specific paths that drifted due to icon library changes.

```bash
npx vitest run --project storybook --update src/integration-systems/integration-bar
```

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

### Typecheck and Lint Project

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Runs TypeScript type checking and project-wide linting.

```bash
npx tsc --noEmit
npm run lint
```

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

### Use OpenBridge components in React

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents-react/README.md

Import and use components as standard React elements.

```jsx
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react";

function App() {
  return (
    <ObcTopBar />
  );
}
```

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

### Implement App Navigation and Brilliance Menu

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Integrates the top bar and brilliance menu components into the main application layout.

```tsx
import { useState } from "react";
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react/components/top-bar/top-bar";
import { ObcBrillianceMenu } from "@oicl/openbridge-webcomponents-react/components/brilliance-menu/brilliance-menu";
import useMinuteUpdate from "./hooks/useMinuteUpdate";

import "./App.css";
import { NavigationMenu } from "./components/NavigationMenu";

const handleBrillianceChange = (e: CustomEvent) => {
  document.documentElement.setAttribute("data-obc-theme", e.detail.value);
};

function App() {
  const [showBrillianceMenu, setShowBrillianceMenu] = useState(false);
  const time = useMinuteUpdate();

  const handleDimmingButtonClicked = () => {
    setShowBrillianceMenu(!showBrillianceMenu);
  };

  return (
    <>
      <header>
        <ObcTopBar
          showClock
          showDimmingButton
          appTitle="Hello"
          pageName="world!"
          dimmingButtonActivated={showBrillianceMenu}
          onDimmingButtonClicked={handleDimmingButtonClicked}
          date={time}
        />
      </header>
      <main>
        <NavigationMenu className="navmenu" />
        {showBrillianceMenu && (
          <ObcBrillianceMenu
            onPaletteChanged={handleBrillianceChange}
            showBrightness={false}
            className="brilliance"
          />
        )}
      </main>
    </>
  );
}

export default App;
```

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

### VS Code task configuration

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/README.md

Command snippet for use in a VS Code task configuration.

```json
"command": "npx tsx script/docgen/docs-gen.ts ${file}"
```

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

### Configure Hover Kill-Switch Variable

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/IMPLEMENTATION_GUIDELINES.md

Sets the default hover state availability globally in the HTML root.

```css
html {
  --obc-can-hover: 1;
}
```

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

### JSDoc Template for Components

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/script/docgen/prompt-system.txt

Standard JSDoc structure for documenting Lit web components, including slots and custom events.

```js
/**
 * <markdown sections …>
 *
 * @slot - Default leading-icon slot (shown when `showIcon` is true)
 * @fires remove-chip {CustomEvent<{label:string}>}
 */
```

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

### Implement NavMenu Component

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Component class definition importing required OpenBridge web components for the navigation menu.

```typescript
import { Component } from "@angular/core";
import { ObcNavigationMenu } from "@obc/components/navigation-menu/navigation-menu";
import { ObcNavigationItem } from "@obc/components/navigation-item/navigation-item";
import { ObiApplications } from "@obc/icons/icon-applications";
import { ObiAlerts } from "@obc/icons/icon-alerts";
import { ObiPaletteDimming } from "@obc/icons/icon-palette-dimming";
import { ObiSupportGoogle } from "@obc/icons/icon-support-google";
import { ObiSettingsIec } from "@obc/icons/icon-settings-iec";
import { ObiAlertList } from "@obc/icons/icon-alert-list";

@Component({
  selector: "app-nav-menu",
  imports: [
    ObcNavigationMenu,
    ObcNavigationItem,
    ObiApplications,
    ObiAlerts,
    ObiPaletteDimming,
    ObiSupportGoogle,
    ObiSettingsIec,
    ObiAlertList,
  ],
  templateUrl: "./nav-menu.component.html",
  styleUrl: "./nav-menu.component.css",
})
export class NavMenuComponent {}
```

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

### Push changes to fork

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/CONTRIBUTING.md

Command to upload local commits to the remote fork.

```bash
git push origin your-branch-name
```

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

### Integrate Components in App.tsx

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Configures the main application layout with the top bar, navigation, and brilliance menu.

```tsx
import { useState } from "react";
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react/components/top-bar/top-bar";
import { ObcBrillianceMenu } from "@oicl/openbridge-webcomponents-react/components/brilliance-menu/brilliance-menu";
import useMinuteUpdate from "./hooks/useMinuteUpdate";

import "./App.css";
import { NavigationMenu } from "./components/NavigationMenu";
import { InstrumentDemo } from "./pages/InstrumentDemo";

const handleBrillianceChange = (e: CustomEvent) => {
  document.documentElement.setAttribute("data-obc-theme", e.detail.value);
};

function App() {
  const [showBrillianceMenu, setShowBrillianceMenu] = useState(false);
  const [showNavigationMenu, setShowNavigationMenu] = useState(false);

  const time = useMinuteUpdate();

  const handleDimmingButtonClicked = () => {
    setShowBrillianceMenu(!showBrillianceMenu);
    setShowNavigationMenu(false);
  };

  const handleNavigationButtonClicked = () => {
    setShowNavigationMenu(!showNavigationMenu);
    setShowBrillianceMenu(false);
  };

  return (
    <>
      <header>
        <ObcTopBar
          showClock
          showDimmingButton
          appTitle="Hello"
          pageName="world!"
          dimmingButtonActivated={showBrillianceMenu}
          onDimmingButtonClicked={handleDimmingButtonClicked}
          menuButtonActivated={showNavigationMenu}
          onMenuButtonClicked={handleNavigationButtonClicked}
          date={time}
        />
      </header>
      <main>
        <InstrumentDemo />
        {showNavigationMenu && <NavigationMenu />}
        {showBrillianceMenu && (
          <ObcBrillianceMenu
            onPaletteChanged={handleBrillianceChange}
            showBrightness={false}
            className="brilliance"
          />
        )}
      </main>
    </>
  );
}

export default App;
```

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

### Update Root Template

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-angular.md

Template configuration for the top bar and conditional rendering of menus.

```html
<header>
  <obc-top-bar
    [appTitle]="title"
    [showDimmingButton]="true"
    [showClock]="true"
    [dimmingButtonActivated]="showBrillianceMenu"
    (dimmingButtonClickedEvent)="handleDimmingButtonClicked()"
    (menuButtonClickedEvent)="handleNavMenuButtonClicked()"
    [menuButtonActivated]="showNavMenu"
    [date]="date"
  />
</header>

<main>
  @if (showBrillianceMenu) {
  <obc-brilliance-menu
    class="brilliance"
    (paletteChangedEvent)="onPaletteChange($event)"
  />} @if (showNavMenu) {
  <app-nav-menu class="navigation-menu "></app-nav-menu> }
  <router-outlet />
</main>
```

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

### Configure Noto Sans Font

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/packages/openbridge-webcomponents/README.md

Ensure the Noto Sans font is loaded and applied globally to the project.

```css
@font-face {
  font-family: 'Noto Sans';
  src: url('path/to/NotoSans.ttf');
}

* {
  font-family: 'Noto Sans', sans-serif;
}
```

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

### Implement TopBar Component

Source: https://github.com/ocean-industries-concept-lab/openbridge-webcomponents/blob/develop/docs/getting-started-react.md

Adds the ObcTopBar component to the application header.

```tsx
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react/components/top-bar/top-bar";
import "./App.css";

function App() {
  return (
    <>
      <header>
        <ObcTopBar />
      </header>
    </>
  );
}

export default App;
```