### Start Development Server

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Run the development server using `npm start`. This command utilizes Vite's development server and performs server-side rendering (SSR) during development.

```shell
npm start # or `yarn start`
```

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

### Install Project Dependencies

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Install all necessary project dependencies using pnpm. Ensure Node.js and pnpm are installed.

```bash
pnpm install
```

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

### Start Development Server

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Start the development server for NASNET Connect. This command is used during development to test changes.

```bash
pnpm dev
```

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

### Start Development Server in Debug Mode

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Start the development server with debugging enabled. Useful for troubleshooting.

```bash
pnpm dev.debug
```

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

### Dynamic Steps with Context and Management

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Use this example to dynamically add steps to the stepper, toggle edit mode, and manage form data via context. Ensure all necessary Qwik imports and stepper components are available.

```tsx
import { component$, useSignal, useStore, $ } from "@builder.io/qwik";
import { 
  CStepper,
  createStepperContext,
  useStepperContext,
  type CStepMeta,
} from "~/components/Core/Stepper/CStepper";

// Create a context
const FormContext = createStepperContext<{ formData: Record<string, any> }>
(
  "form-context",
);

export default component$(() => {
  // Toggle for edit mode
  const isEditMode = useSignal(false);

  // Store form data
  const formData = useStore({
    /* your data */
  });

  // Initial steps
  const steps = useSignal<CStepMeta[]>([
    // Your initial steps here
  ]);

  // Function to add a step programmatically
  const addSpecialStep = $(
    () => {
      const newStep: CStepMeta = {
        id: Date.now(), // Unique ID
        title: "Special Step",
        description: "This step was added programmatically",
        component: <SpecialStepComponent />,
        isComplete: false,
      };

      steps.value = [...steps.value, newStep];
    },
  );

  return (
    <div>
      <div class="controls">
        <label>
          <input
            type="checkbox"
            checked={isEditMode.value}
            onChange$={() => (isEditMode.value = !isEditMode.value)}
          />
          Enable Edit Mode
        </label>

        <button onClick$={addSpecialStep}>Add Special Step</button>
      </div>

      <CStepper
        steps={steps.value}
        contextId={FormContext}
        contextValue={{ formData }}
        isEditMode={isEditMode.value}
        onComplete$={() => console.log("Complete with data:", formData)}
      />
    </div>
  );
});

```

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

### VStepper Management Example

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Illustrates how to enable and use the management mode for VStepper, allowing for dynamic step addition and editing. The example uses a signal to control the edit mode and another signal to manage the list of steps.

```typescript
export const ManagementVStepperExample = component$(() => {
  const isEditMode = useSignal(false);
  const steps = useSignal<StepItem[]>([
    /* initial steps */
  ]);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isEditMode.value}
          onChange$={() => (isEditMode.value = !isEditMode.value)}
        />
        Enable Management Mode
      </label>

      <VStepper
        steps={steps.value}
        isEditMode={isEditMode.value}
        dynamicStepComponent={() => <DynamicStepContent />}
      />
    </div>
  );
});
```

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

### Basic VStepper Example

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Demonstrates the fundamental usage of VStepper with a predefined list of steps and basic navigation enabled. The onComplete$ callback is used to show an alert when all steps are finished.

```typescript
export const BasicVStepperExample = component$(() => {
  const steps: StepItem[] = [
    {
      id: 1,
      title: "Personal Info",
      component: () => <PersonalInfoStep />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Review",
      component: () => <ReviewStep />,
      isComplete: false,
    },
  ];

  return (
    <VStepper
      steps={steps}
      position="left"
      allowStepNavigation={true}
      onComplete$={() => alert("Completed!")}
    />
  );
});
```

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

### VStepper Context Example

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Shows how to integrate VStepper with a context wrapper to manage shared data across steps. The example uses a store to hold form data that can be accessed and modified by different steps.

```typescript
export const ContextVStepperExample = component$(() => {
  const formData = useStore<FormData>({
    personalInfo: { name: "", email: "" },
    preferences: { theme: "light", notifications: true },
  });

  return <VStepperContextWrapper steps={steps} data={formData} />;
});
```

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

### Dark Mode Shadow Adjustment

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Example of how to adjust shadow tokens for dark mode to maintain visual balance. This example targets the `shadow-lg` token.

```css
.dark .shadow-lg {
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.25),
    0 4px 6px -4px rgb(0 0 0 / 0.15);
}
```

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

### Navigation Spacing Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Set horizontal and vertical padding for navigation elements like navbars and dropdown items.

```html
<nav class="px-4 py-2">
  <a href="#" class="mx-2">Nav Item 1</a>
  <a href="#" class="mx-2">Nav Item 2</a>
</nav>
<div class="px-4 py-2">
  <a href="#">Dropdown Item</a>
</div>
```

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

### Button Padding Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Apply these utility classes to set padding for buttons of different sizes. Use px for horizontal and py for vertical padding.

```html
<button class="px-3 py-1">Small Button</button>
<button class="px-4 py-2">Default Button</button>
<button class="px-6 py-3">Large Button</button>
```

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

### Basic VStepper Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Illustrates the setup for a vertical stepper with side navigation. Options include positioning the navigation on the 'left' or 'right', preloading the next step, and showing a default continue button.

```tsx
import { component$ } from "@builder.io/qwik";
import { VStepper, type VStepItem } from "~/components/Core/Stepper";

export default component$(() => {
  const steps: VStepItem[] = [
    {
      id: 1,
      title: "Account Setup",
      component: AccountSetupComponent,
      isComplete: false,
    },
    {
      id: 2,
      title: "Profile Details",
      component: ProfileDetailsComponent,
      isComplete: false,
    },
  ];

  return (
    <VStepper
      steps={steps}
      position="left" // or "right" for RTL
      preloadNext={true} // preload the next step for smoother transitions
      showContinueButton={true} // show default "Continue" button
    />
  );
});
```

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

### Card Padding and Spacing Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Use these classes for padding within card components and for vertical margins between card sections.

```html
<div class="p-4">
  <div class="px-6 py-4">
    <h2>Card Header</h2>
    <p>Card content...</p>
  </div>
  <div class="my-4"></div>
  <div class="px-6 py-4">
    <h2>Card Footer</h2>
  </div>
</div>
```

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

### Form Control Spacing Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Configure spacing for form inputs, labels, and helper text to ensure proper alignment and readability.

```html
<label class="mb-1.5">Label</label>
<input class="px-3 py-2" type="text" />
<p class="mt-1">Helper text</p>
```

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

### Layout Gap Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Define the gap between elements in layout contexts such as main/sidebar arrangements or grid systems.

```html
<div class="gap-6">
  <div>Sidebar</div>
  <div>Main Content</div>
</div>
<div class="grid grid-cols-2 gap-4">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
</div>
```

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

### Table Cell Padding Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Set padding for table cells, headers, and footers to control spacing within data tables.

```html
<table>
  <thead>
    <tr>
      <th class="px-4 py-3">Header 1</th>
      <th class="px-4 py-3">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="px-4 py-2">Data 1</td>
      <td class="px-4 py-2">Data 2</td>
    </tr>
  </tbody>
</table>
```

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

### Section Margin Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Control vertical spacing between major and minor content sections using margin utility classes.

```html
<section class="my-8">
  Major Section
</section>
<section class="my-4">
  Minor Section
</section>
```

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

### Step Component Using Context

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Implement a step component that utilizes the VStepper context to access and modify form data. This example shows how to bind input values and trigger step completion.

```tsx
const PersonalInfoStep = component$(() => {
  const context = useVStepperContext<FormData>(FormStepperContext);

  return (
    <div class="space-y-4">
      <h2 class="text-xl font-semibold">Personal Information</h2>

      <input
        type="text"
        value={context.data.personalInfo.name}
        onInput$={(_, el) => {
          context.data.personalInfo.name = el.value;

          // Complete step automatically when name is provided
          if (el.value.trim()) {
            context.completeStep$();
          }
        }}
        placeholder="Enter your name"
      />

      <button
        onClick$={() => {
          if (context.data.personalInfo.name) {
            context.completeStep$(); // Complete current step
            context.nextStep$(); // Move to next step
          }
        }}
      >
        Complete & Continue
      </button>
    </div>
  );
});
```

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

### Typography Margin Examples

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Apply appropriate bottom margins to headings and vertical margins to paragraphs for clear typographic hierarchy.

```html
<h1 class="mb-6">Main Title</h1>
<h2 class="mt-8 mb-4">Subtitle</h2>
<p class="my-4">This is a paragraph with spacing.</p>
```

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

### Newsletter with RTL/LTR Support

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Feedback/Newsletter/README.md

The component automatically adapts to text direction. This example shows Arabic text for RTL environments.

```tsx
// Works seamlessly in RTL environments
<Newsletter
  title="اشترك في النشرة الإخبارية"
  description="احصل على آخر النصائح والتحديثات"
/>
```

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

### Preview Production Build Locally

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Use `npm run preview` to create a production build of client modules and a preview entry point, then run a local server. This is for previewing only and not for production use.

```shell
npm run preview # or `yarn preview`
```

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

### Navigate to Project Directory

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Change the current directory to the cloned NASNET Connect project folder.

```bash
cd nasnet-connect
```

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

### Build for Production

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Build the NASNET Connect project for production deployment. This optimizes the application for performance.

```bash
pnpm build
```

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

### Basic Graph Component Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Graph/README.md

Demonstrates how to initialize and render the Graph component with custom nodes and connections. Ensure necessary imports for `component$` and `Graph` are included.

```tsx
import { component$ } from "@builder.io/qwik";
import { Graph, createNode } from "~/components/Core/Graph";
import type { GraphConnection } from "~/components/Core/Graph";

export default component$(() => {
  // Create nodes
  const nodes = [
    createNode("User", "user1", 50, 100),
    createNode("WirelessRouter", "router", 180, 100),
    createNode("DomesticWAN", "domestic", 310, 100),
  ];

  // Create connections
  const connections: GraphConnection[] = [
    {
      from: "user1",
      to: "router",
      color: "#f59e0b",
      animated: true,
      packetColors: ["#f59e0b"],
    },
    {
      from: "router",
      to: "domestic",
      color: "#84cc16",
      animated: true,
      packetColors: ["#84cc16"],
    },
  ];

  return (
    <Graph
      nodes={nodes}
      connections={connections}
      title="Simple Network Graph"
    />
  );
});

```

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

### Basic VStepper Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Demonstrates how to use the VStepper component by defining an array of steps and passing it as a prop. Includes event handlers for step completion, change, and overall form completion. The 'position' and 'allowStepNavigation' props are also shown.

```tsx
import { component$ } from "@builder.io/qwik";
import { VStepper, type StepItem } from "~/components/Core/Stepper/VStepper";

export default component$(() => {
  // Define your steps
  const steps: StepItem[] = [
    {
      id: 1,
      title: "Step 1",
      component: () => <Step1Component />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Step 2",
      component: () => <Step2Component />,
      isComplete: false,
    },
    {
      id: 3,
      title: "Step 3",
      component: () => <Step3Component />,
      isComplete: false,
    },
  ];

  return (
    <VStepper
      steps={steps}
      onStepComplete$={(id) => console.log(`Step ${id} completed`)}
      onStepChange$={(id) => console.log(`Changed to step ${id}`)}
      onComplete$={() => console.log("All steps completed!")}
      position="left"
      allowStepNavigation={true}
    />
  );
});

```

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

### Basic CStepper Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Demonstrates how to initialize and use the CStepper component with a defined set of steps. Each step includes an ID, title, description, and a component to render. Event handlers for step completion, change, and overall completion are included.

```tsx
import { component$ } from "@builder.io/qwik";
import { CStepper, type CStepMeta } from "~/components/Core/Stepper/CStepper";

export default component$(() => {
  // Define your steps
  const steps: CStepMeta[] = [
    {
      id: 1,
      title: "Step 1",
      description: "First step description",
      component: <Step1Component />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Step 2",
      description: "Second step description",
      component: <Step2Component />,
      isComplete: false,
    },
    {
      id: 3,
      title: "Step 3",
      description: "Third step description",
      component: <Step3Component />,
      isComplete: false,
    },
  ];

  return (
    <CStepper
      steps={steps}
      onStepComplete$={(id) => console.log(`Step ${id} completed`)}
      onStepChange$={(id) => console.log(`Changed to step ${id}`)}
      onComplete$={() => console.log("All steps completed!")}
    />
  );
});

```

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

### Clone NASNET Connect Repository

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Clone the NASNET Connect repository from GitHub. This is the first step in setting up the project.

```bash
git clone https://github.com/nasnet-community/connect.git
```

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

### Preview Production Build

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Preview the production build of NASNET Connect. This allows you to test the optimized build before deployment.

```bash
pnpm preview
```

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

### Programmatic Step Management

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Demonstrates how to programmatically add new steps to the VStepper component using Qwik's reactive signals and event handlers.

```APIDOC
## Programmatic Step Management

```tsx
import { component$, useSignal, $ } from "@builder.io/qwik";

export default component$(() => {
  const steps = useSignal<StepItem[]>([
    // initial steps...
  ]);

  // Add a new step
  const addStep = $(() => {
    const newStep: StepItem = {
      id: Date.now(),
      title: "New Step",
      component: () => <NewStepComponent />,
      isComplete: false,
    };

    steps.value = [...steps.value, newStep];
  });

  return (
    <div>
      <button onClick$={addStep}>Add New Step</button>

      <VStepper
        steps={steps.value}
        // other props...
      />
    </div>
  );
});
```
```

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

### Add Integrations with Qwik CLI

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Use the `npm run qwik add` command to integrate additional tools like Cloudflare, Netlify, or Express Server into your Qwik project.

```shell
npm run qwik add # or `yarn qwik add`
```

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

### Deploy for Development (Vercel Edge)

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Deploy the application for development purposes using the `npm run deploy` command. A Vercel account may be required.

```shell
npm run deploy
```

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

### Basic HStepper Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Demonstrates how to set up a horizontal stepper with multiple steps. Configure the mode to 'easy' or 'advance' for different navigation behaviors.

```tsx
import { component$ } from "@builder.io/qwik";
import { HStepper, type HStepItem } from "~/components/Core/Stepper";

export default component$(() => {
  const steps: HStepItem[] = [
    {
      id: 1,
      title: "Step 1",
      component: <Step1Component />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Step 2",
      component: <Step2Component />,
      isComplete: false,
    },
  ];

  return (
    <HStepper
      steps={steps}
      mode="easy" // "easy" or "advance"
      onModeChange$={(mode) => console.log(`Mode changed to ${mode}`)}
    />
  );
});
```

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

### Build for Production

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Generate production-ready client and server modules by running `npm run build`. This command also performs a TypeScript type check.

```shell
npm run build # or `yarn build`
```

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

### CStepper Basic Usage

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Demonstrates the basic implementation of the CStepper component with a list of steps.

```tsx
import { component$ } from "@builder.io/qwik";
import { CStepper, type CStepMeta } from "~/components/Core/Stepper";

export default component$(() => {
  // Define your steps
  const steps: CStepMeta[] = [
    {
      id: 1,
      title: "Personal Info",
      description: "Enter your personal details",
      component: <Step1 />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Contact Info",
      description: "Enter your contact information",
      component: <Step2 />,
      isComplete: false,
    },
  ];

  return (
    <CStepper
      steps={steps}
      onStepComplete$={(id) => console.log(`Step ${id} completed`)}
      onComplete$={() => console.log("All steps completed!")}
    />
  );
});
```

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

### Vercel Edge Production Build Command

Source: https://github.com/nasnet-community/connect/blob/main/qwikcity.README.md

Build the application for production, which includes running both server and client build commands. This command is specifically for the Vercel Edge adapter.

```shell
npm run build
```

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

### Programmatically Add Step in VStepper

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Demonstrates how to add a new step to the VStepper dynamically using Qwik's `useSignal` and `$` for event handlers. The new step is appended to the existing steps array.

```tsx
import { component$, useSignal, $ } from "@builder.io/qwik";

export default component$(() => {
  const steps = useSignal<StepItem[]>([
    // initial steps...
  ]);

  // Add a new step
  const addStep = $(() => {
    const newStep: StepItem = {
      id: Date.now(),
      title: "New Step",
      component: () => <NewStepComponent />,
      isComplete: false,
    };

    steps.value = [...steps.value, newStep];
  });

  return (
    <div>
      <button onClick$={addStep}>Add New Step</button>

      <VStepper
        steps={steps.value}
        // other props...
      />
    </div>
  );
});
```

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

### Graph with Traffic Types

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Graph/README.md

Demonstrates how to style graph connections using predefined traffic types like 'Domestic' and 'VPN'. Ensure the Graph component and necessary types are imported.

```tsx
import { component$ } from "@builder.io/qwik";
import { Graph, createNode } from "~/components/Core/Graph";
import type { GraphConnection } from "~/components/Core/Graph";

export default component$(() => {
  // Create nodes
  const nodes = [
    createNode("User", "user", 50, 100),
    createNode("WirelessRouter", "router", 180, 100),
    createNode("VPNServer", "vpn", 310, 100),
  ];

  // Create connections with traffic types
  const connections: GraphConnection[] = [
    {
      from: "user",
      to: "router",
      trafficType: "Domestic",
      animated: true,
    },
    {
      from: "router",
      to: "vpn",
      trafficType: "VPN",
      animated: true,
    },
  ];

  return (
    <Graph
      nodes={nodes}
      connections={connections}
      title="Traffic Types Example"
    />
  );
});
```

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

### Graph with Connection Types

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Graph/README.md

Illustrates styling graph connections using physical connection types such as 'Wireless', 'Ethernet', and 'Fiber'. Imports for Graph component and createNode are required.

```tsx
import { component$ } from "@builder.io/qwik";
import { Graph, createNode } from "~/components/Core/Graph";
import type { GraphConnection } from "~/components/Core/Graph";

export default component$(() => {
  // Create nodes
  const nodes = [
    createNode("User", "user", 50, 100),
    createNode("WirelessRouter", "router", 180, 100),
    createNode("EthernetRouter", "isp", 310, 100),
    createNode("ForeignWAN", "internet", 440, 100),
  ];

  // Create connections with connection types
  const connections: GraphConnection[] = [
    {
      from: "user",
      to: "router",
      connectionType: "Wireless",
      animated: true,
    },
    {
      from: "router",
      to: "isp",
      connectionType: "Ethernet",
      animated: true,
    },
    {
      from: "isp",
      to: "internet",
      connectionType: "Fiber",
      animated: true,
    },
  ];

  return (
    <Graph
      nodes={nodes}
      connections={connections}
      title="Connection Types Example"
    />
  );
});
```

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

### Import and Render LandingPage Component

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Star/LandingPage/README.md

Shows how to import and render the main LandingPage component within a React application. Ensure the component is correctly imported from its source path.

```tsx
import { LandingPage } from "~/components/Star/LandingPage";

export default component$(() => {
  return (
    <div>
      <LandingPage />
    </div>
  );
});
```

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

### Responsive Spacing Adjustments for Mobile

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Demonstrates how to reduce container padding and section margins for smaller screens to improve mobile readability.

```html
<div class="px-3 my-4">
  Mobile optimized content
</div>
```

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

### Import Stepper Components

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Import the necessary stepper components from the Core library.

```tsx
import { CStepper, HStepper, VStepper } from "~/components/Core/Stepper";
```

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

### Create Stepper Context for Data Sharing

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Illustrates how to create and use a typed context for sharing data between stepper components. This is useful for managing complex state across multiple steps.

```tsx
import { component$ } from "@builder.io/qwik";
import {
  CStepper,
  createStepperContext,
  useStepperContext,
  type CStepMeta,
} from "~/components/Core/Stepper/CStepper";

// Create a typed context for your stepper
const MyStepperContext = createStepperContext<{ 
  userData: { name: string; email: string };
}>("my-stepper");

export default component$(() => {
  // Your steps...
  const steps: CStepMeta[] = [
    /* ... */
  ];

  // Your data to share via context
  const contextValue = { userData: { name: "", email: "" } };

  return (
    <CStepper
      steps={steps}
      contextId={MyStepperContext}
      contextValue={contextValue}
    />
  );
});
```

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

### Basic Dark Mode Syntax with Tailwind

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/ThemeStrategy.md

Apply dark mode styles to elements using the `dark:` prefix. Ensure semantic color tokens are used for consistency.

```jsx
<div class="text-text-default bg-white dark:bg-surface-dark dark:text-text-dark-default">
  Content that changes in dark mode
</div>
```

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

### Dynamically Add Steps to CStepper

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Demonstrates how to programmatically add new steps to the CStepper component. Use this when the number or content of steps is not fixed at build time.

```tsx
import { component$, useSignal, $ } from "@builder.io/qwik";
import { CStepper, type CStepMeta } from "~/components/Core/Stepper/CStepper";

export default component$(() => {
  // Track the steps array
  const steps = useSignal<CStepMeta[]>([
    {
      id: 1,
      title: "First Step",
      description: "This is the first step",
      component: <StepContent />,
      isComplete: false,
    },
    {
      id: 2,
      title: "Second Step",
      description: "This is the second step",
      component: <StepContent />,
      isComplete: false,
    },
  ]);

  // Function to add a new step
  const addStep = $(() => {
    const newStep: CStepMeta = {
      id: steps.value.length + 1,
      title: `Step ${steps.value.length + 1}`,
      description: `This is step ${steps.value.length + 1}`,
      component: <StepContent />,
      isComplete: false,
    };

    // Add to steps array
    steps.value = [...steps.value, newStep];
  });

  return (
    <div>
      <button onClick$={addStep}>Add New Step</button>

      <CStepper
        steps={steps.value}
        onComplete$={() => alert("All steps completed!")}
      />
    </div>
  );
});

// Assuming StepContent is defined elsewhere
const StepContent = component$(() => <div>Step Content</div>);
```

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

### Environment Variables for Vite

Source: https://github.com/nasnet-community/connect/blob/main/README.md

Configure the application using environment variables. These are typically prefixed with VITE_ for Vite-specific settings.

```env
VITE_API_URL=your_api_url
VITE_APP_VERSION=your_app_version
```

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

### CStepper Context-based State Management

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Illustrates how to use context for sharing data between steps in a CStepper. Requires creating a typed context and using `useStepperContext` within step components.

```tsx
import {
  CStepper,
  createStepperContext,
  useStepperContext,
} from "~/components/Core/Stepper";

// Create a typed context
const FormContext = createStepperContext<{ name: string; email: string }>
(
  "my-form",
);

// In your main component
export default component$(() => {
  return (
    <CStepper
      steps={steps}
      contextId={FormContext}
      contextValue={{ name: "", email: "" }}
    />
  );
});

// Inside a step component
const Step1 = component$(() => {
  const context = useStepperContext(FormContext);

  return (
    <div>
      <input
        value={context.data.name}
        onInput$={(e) => {
          const input = e.target as HTMLInputElement;
          context.data.name = input.value;

          // Mark step as complete if valid
          if (input.value.length > 2) {
            context.completeStep$();
          }
        }}
      />

      {/* Navigation */}
      <button onClick$={() => context.nextStep$()}>Next</button>
    </div>
  );
});
```

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

### Basic Spinner with Dark Mode Support

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/Progress/DARK_MODE_OPTIMIZATION.md

Demonstrates the basic usage of the Spinner component, including showing a label and indicating a loading state, with automatic dark mode support.

```tsx
<Spinner color="primary" showLabel label="Loading..." />
```

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

### Context Wrapper Component

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Create a wrapper component that provides the VStepper context to its children. This component initializes the context with steps, initial data, and a scroll handler.

```tsx
const VStepperContextWrapper = component$(
  (props: { steps: StepItem[]; data: FormData }) => {
    const scrollToStep$ = $((index: number) => {
      const element = document.getElementById(`step-${index}`);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    });

    // Provide context
    useProvideVStepperContext(
      FormStepperContext,
      props.steps,
      0,
      props.data,
      scrollToStep$,
    );

    return <VStepper steps={props.steps} allowStepNavigation={true} />;
  },
);
```

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

### Use Semantic Tokens for Theming

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/ThemeStrategy.md

Avoid hard-coded colors and instead utilize semantic tokens defined in your Tailwind configuration for consistent theming across light and dark modes.

```jsx
// Avoid hard-coded colors
<div class="bg-white text-gray-900">...</div>

// Use semantic tokens instead
<div class="bg-surface text-text-default dark:bg-surface-dark dark:text-text-dark-default">...</div>
```

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

### Stepper Navigation Functions

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Utilize context functions to navigate between steps. `goToStep$` moves to a specific step by index, `nextStep$` advances to the next complete step, and `prevStep$` moves to the previous step.

```tsx
// Go to a specific step by index
stepper.goToStep$(1); // Go to the second step (index 1)

// Go to next step (only works if current step is complete)
stepper.nextStep$();

// Go to previous step
stepper.prevStep$();
```

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

### Context API Functions

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Overview of the VStepper context API functions available for programmatic control of navigation, step completion, and step management.

```APIDOC
## Context API Functions

The VStepper context provides these functions for step management:

### Navigation Functions

```tsx
// Navigate to a specific step by index
context.goToStep$(2); // Go to step at index 2

// Move to next step
context.nextStep$();

// Move to previous step
context.prevStep$();

// Scroll to a specific step
context.scrollToStep$(1);
```

### Step Completion Functions

```tsx
// Complete the current step
context.completeStep$();

// Complete a specific step by ID
context.completeStep$(stepId);

// Update step completion status
context.updateStepCompletion$(stepId, true);
```

### Step Management Functions

```tsx
// Add a new step (optionally at specific position)
const newStepId = context.addStep$(newStep, 2); // Add at index 2

// Remove a step by ID
context.removeStep$(stepId);

// Swap steps by their indexes
context.swapSteps$(1, 2); // Swap steps at index 1 and 2
```
```

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

### Compile Semantic Catalogs

Source: https://github.com/nasnet-community/connect/blob/main/docs/i18n-foundation.md

Compile the semantic message catalogs. This command processes the source message files into a format usable by the application.

```bash
npm run i18n:compile
```

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

### Handle Step Completion with Direct Props

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Custom step components can manage their completion status by receiving and invoking an `onComplete$` prop. This allows for localized completion logic within individual steps.

```tsx
const StepComponent = component$(({ onComplete$ }) => {
  return <button onClick$={() => onComplete$(1)}>Complete Step</button>;
});
```

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

### Progress Bar with Buffer and Value Display

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/Progress/DARK_MODE_OPTIMIZATION.md

Shows a ProgressBar component displaying current value and buffer progress, with value positioned in the center for clear visualization.

```tsx
<ProgressBar
  value={70}
  buffer={90}
  color="primary"
  showValue
  valuePosition="center"
/>
```

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

### Migrate to Mobile-Optimized Card Component

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/MOBILE_OPTIMIZATION.md

Shows how to update a standard Card component to its mobile-optimized version by adding specific props. Use this when transitioning existing Card implementations to leverage mobile-specific features.

```tsx
// Before
<Card className="p-4">Content</Card>

// After
<Card
  className="p-4 mobile:p-3"
  mobileOptimized
  touchFeedback
>
  Content
</Card>
```

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

### Themed Container with Spinner and Progress Bar

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/Progress/DARK_MODE_OPTIMIZATION.md

Illustrates how to apply a specific theme ('dark') to a container, affecting nested Spinner and ProgressBar components with different colors and animations.

```tsx
<div data-theme="dark">
  <Spinner color="success" variant="dots" />
  <ProgressBar value={50} color="info" animation="striped" />
</div>
```

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

### List and Blockquote Spacing

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Style spacing for list items, indents, and blockquote padding to enhance readability.

```html
<ul>
  <li class="my-1">List item 1</li>
  <li class="my-1">List item 2</li>
</ul>
<blockquote class="pl-4">This is a blockquote.</blockquote>
```

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

### Use Stepper Context in Step Components

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Shows how to access and manipulate shared context data within individual step components using `useStepperContext`. This enables reactive updates and control flow based on context.

```tsx
import { component$ } from "@builder.io/qwik";
import { useStepperContext } from "~/components/Core/Stepper/CStepper";
import { MyStepperContext } from "./YourContextFile";

export const Step1Component = component$(() => {
  // Get the stepper context
  const stepper = useStepperContext(MyStepperContext);

  return (
    <div>
      <input
        type="text"
        value={stepper.data.userData.name}
        onInput$={(e) => {
          const input = e.target as HTMLInputElement;
          stepper.data.userData.name = input.value;

          // Using the new completeStep$ function when input meets criteria
          if (input.value.length > 3) {
            stepper.completeStep$(); // Completes the current step
          }
        }}
      />

      {/* Complete step with button */}
      <button
        onClick$={() => {
          if (stepper.data.userData.name) {
            stepper.completeStep$(); // Complete current step
            stepper.nextStep$(); // Move to next step
          }
        }}
      >
        Continue
      </button>
    </div>
  );
});
```

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

### VStepper Navigation Context API

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/VStepper/README.md

Utilize VStepper's context API for programmatic navigation between steps. Functions like `goToStep$`, `nextStep$`, `prevStep$`, and `scrollToStep$` allow precise control over the user's view.

```typescript
// Navigate to a specific step by index
context.goToStep$(2); // Go to step at index 2

// Move to next step
context.nextStep$();

// Move to previous step
context.prevStep$();

// Scroll to a specific step
context.scrollToStep$(1);
```

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

### Responsive Page Container Padding

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Apply responsive padding to page containers, adjusting horizontal padding based on screen size.

```html
<div class="px-4 md:px-6 lg:px-8">
  Content here
</div>
```

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

### HStepper Context Integration

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/README.md

Shows how to use the `useHStepperContext` hook within a step component to interact with the stepper's state and methods, such as completing a step or moving to the next.

```tsx
import { component$ } from "@builder.io/qwik";
import { HStepper, useHStepperContext } from "~/components/Core/Stepper";

// Inside a step component
const Step1 = component$(() => {
  const stepper = useHStepperContext();

  return (
    <div>
      {/* Component content */}

      {/* Complete this step and go to next */}
      <button
        onClick$={() => {
          stepper.completeStep$();
          stepper.nextStep$();
        }}
      >
        Continue
      </button>
    </div>
  );
});
```

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

### GraphConfig Interface

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Graph/README.md

Defines the configuration options for the Graph component.

```APIDOC
## GraphConfig Interface

Provides configuration options for the Graph component.

### Fields

- **`width`** (`number | string`) - Optional - The width of the graph.
- **`height`** (`number | string`) - Optional - The height of the graph.
- **`backgroundColor`** (`string`) - Optional - The background color for the graph in light mode.
- **`darkBackgroundColor`** (`string`) - Optional - The background color for the graph in dark mode.
- **`expandOnHover`** (`boolean`) - Optional - Whether the graph elements should expand on hover.
- **`maxExpandedWidth`** (`string`) - Optional - The maximum width when an element is expanded.
- **`maxExpandedHeight`** (`string`) - Optional - The maximum height when an element is expanded.
- **`animationDuration`** (`number`) - Optional - The duration of animations in milliseconds.
- **`zoomable`** (`boolean`) - Optional - Whether zooming is enabled for the graph.
- **`draggable`** (`boolean`) - Optional - Whether nodes are draggable within the graph.
- **`showLegend`** (`boolean`) - Optional - Whether to display the legend.
- **`legendItems`** (`LegendItem[]`) - Optional - Custom items to display in the legend.
- **`viewBox`** (`string`) - Optional - The SVG viewBox attribute for the graph.
- **`preserveAspectRatio`** (`string`) - Optional - The SVG preserveAspectRatio attribute for the graph.
```

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

### Responsive Spacing Adjustments for Tablets

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/foundation/DesignTokens.md

Shows intermediate spacing adjustments for tablet screen sizes, balancing desktop and mobile designs.

```html
<div class="px-4 md:px-6 lg:px-8">
  Tablet and desktop content
</div>
<div class="gap-4 md:gap-6">
  Responsive grid gap
</div>
```

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

### Responsive Table with Mobile Card Layout

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/MOBILE_OPTIMIZATION.md

Configure a `MobileOptimizedTable` to use a card layout on mobile, with custom labels and column visibility controls.

```tsx
<MobileOptimizedTable
  data={tableData}
  columns={[
    {
      id: "name",
      header: "Name",
      field: "name",
      mobileLabel: "Full Name", // Custom label for mobile
      hideOnMobile: false, // Show on mobile
    },
    {
      id: "details",
      header: "Details",
      field: "details",
      hideOnMobile: true, // Hide on mobile
      hideOn: { sm: true }, // Hide on small screens
    },
  ]}
  mobileLayout="card" // Use card layout on mobile
  mobileSafeArea // Apply safe area padding
/>
```

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

### Update Step Completion using Context API

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Use the `useStepperContext` hook to access functions for managing step completion. `completeStep$` marks a step as complete, while `updateStepCompletion$` allows explicit setting of completion status.

```tsx
const stepper = useStepperContext(MyStepperContext);

// Mark the current step complete
stepper.completeStep$();

// Mark a specific step complete
stepper.completeStep$(2);

// Explicitly set completion status
stepper.updateStepCompletion$(1, true);
```

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

### Enabling Step Management in CStepper

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Shows how to enable the step management UI in the CStepper component by setting the `isEditMode` prop to `true`. This allows users to add, reorder, and remove steps directly within the component.

```tsx
<CStepper
  steps={steps}
  isEditMode={true} // Enable step management UI
  // other props...
/>

```

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

### Apply Mobile Shadows to Card

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/MOBILE_OPTIMIZATION.md

Use the `mobile:shadow-mobile-card` class to apply mobile-optimized shadows to a Card component.

```tsx
<Card elevation="md" className="mobile:shadow-mobile-card">
  Card with mobile-optimized shadows
</Card>
```

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

### Migrate to Mobile-Optimized Table Component

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/DataDisplay/MOBILE_OPTIMIZATION.md

Illustrates the transformation from a standard Table to a MobileOptimizedTable. This is useful for adapting data presentation for better mobile usability, including layout and safe area considerations.

```tsx
// Before
<Table data={data} columns={columns} />

// After
<MobileOptimizedTable
  data={data}
  columns={enhancedColumns}
  mobileLayout="card"
  mobileSafeArea
/>
```

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

### Accessing CStepper State

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Demonstrates how to access the active step index, all defined steps, and the completion status of the current step using the stepper context.

```tsx
// Get the active step index
const currentStepIndex = stepper.activeStep.value;

// Get all steps
const allSteps = stepper.steps.value;

// Check if current step is complete
const isCurrentStepComplete =
  stepper.steps.value[stepper.activeStep.value].isComplete;
```

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

### Step Completion Methods

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Stepper/CStepper/README.md

Methods to update the completion status of steps within the CStepper component.

```APIDOC
## Step Completion Methods

The CStepper component provides multiple ways to mark steps as complete:

### Using the Context API

The stepper context provides two functions for managing step completion:

1. `updateStepCompletion$(stepId, isComplete)` - Sets a specific step's completion status
2. `completeStep$(stepId?)` - Marks a step as complete (defaults to current step if no ID provided)

Example:

```tsx
const stepper = useStepperContext(MyStepperContext);

// Mark the current step complete
stepper.completeStep$();

// Mark a specific step complete
stepper.completeStep$(2);

// Explicitly set completion status
stepper.updateStepCompletion$(1, true);
```

### Using Direct Props

When implementing custom step components, you can also handle step completion through props:

```tsx
const StepComponent = component$(({ onComplete$ }) => {
  return <button onClick$={() => onComplete$(1)}>Complete Step</button>;
});
```
```

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

### Validate Translations with Markdown Output

Source: https://github.com/nasnet-community/connect/blob/main/docs/i18n-foundation.md

Run the translation validator and output the results in Markdown format. This is intended for use in GitHub issue updates.

```bash
npm run i18n:validate -- --markdown
```

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

### Create Graph Node

Source: https://github.com/nasnet-community/connect/blob/main/src/components/Core/Graph/README.md

Defines the signature for creating a graph node with specified type, ID, position, and optional overrides.

```typescript
createNode(
  nodeType: NetworkNodeType,
  id: string | number,
  x: number,
  y: number,
  overrides?: Partial<GraphNode>
): GraphNode
```