### Install Dependencies with npm

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-solid-project/README.md

Installs project dependencies using npm. This command is a standard way to set up a project after cloning.

```bash
npm install # or pnpm install or yarn install
```

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

### SETUP / Vue Integration

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configure the runtime adapter to enable LocatorJS in Vue applications.

```APIDOC
## SETUP / Vue Integration

### Description
Initialize the LocatorJS runtime within the Vue entry point to enable component source location.

### Method
N/A (Configuration)

### Parameters
#### Request Body
- **adapter** (string) - Required - Set to "vue" for Vue projects.

### Request Example
```typescript
setupLocatorUI({ adapter: "vue" });
```
```

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

### Configure LocatorJS Runtime Setup

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Demonstrates advanced configuration options for the @locator/runtime setup function. This allows customization of framework adapters, IDE targets with custom URL templates, project path overrides, and initial tooltip display.

```typescript
import setupLocatorUI from "@locator/runtime";

// Basic setup - auto-detects framework adapter
setupLocatorUI();

// Advanced setup with custom configuration
setupLocatorUI({
  // Explicitly specify the framework adapter
  adapter: "react", // Options: "react" | "jsx" | "svelte" | "vue" 

  // Custom IDE targets with URL templates
  targets: {
    vscode: {
      url: "vscode://file/${projectPath}${filePath}:${line}:${column}",
      label: "VSCode",
    },
    webstorm: {
      url: "webstorm://open?file=${projectPath}${filePath}&line=${line}&column=${column}",
      label: "WebStorm",
    },
    cursor: {
      url: "cursor://file/${projectPath}${filePath}:${line}:${column}",
      label: "Cursor",
    },
    // Custom editor example
    sublime: {
      url: "subl://open?url=file://${projectPath}${filePath}&line=${line}&column=${column}",
      label: "Sublime Text",
    },
  },

  // Override project path if auto-detection fails
  projectPath: "/Users/developer/my-project",

  // Show intro tooltip on first use
  showIntro: true,
});
```

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

### Install @locator/webpack-loader

Source: https://github.com/infi-pc/locatorjs/blob/master/packages/webpack-loader/README.md

Commands to install the package using common Node.js package managers.

```bash
npm install --save-dev @locator/webpack-loader
yarn add -D @locator/webpack-loader
pnpm add -D @locator/webpack-loader
```

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

### Storybook Meta Configuration in JSX

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-react-project/src/stories/Introduction.stories.mdx

This code configures the Storybook documentation for an example introduction page using the Meta component. It sets the title for the Storybook entry, organizing it under the 'Example' category with the name 'Introduction'.

```jsx
<Meta title="Example/Introduction" />
```

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

### SETUP / Svelte Integration

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configure Vite and the runtime adapter to enable LocatorJS in Svelte applications.

```APIDOC
## SETUP / Svelte Integration

### Description
Integrate LocatorJS with Svelte by defining the project path in Vite and initializing the runtime in the entry point.

### Method
N/A (Configuration)

### Parameters
#### Request Body
- **adapter** (string) - Required - Set to "svelte" for Svelte projects.

### Request Example
```javascript
setupLocatorUI({ adapter: "svelte" });
```
```

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

### Run Development Server with npm

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-solid-project/README.md

Starts the application in development mode, typically opening it at http://localhost:3000. The server will automatically reload on code changes.

```bash
npm dev
# or npm start
```

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

### Install LocatorJS for React/Vite Projects (npm)

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Installs the necessary Babel plugin and runtime packages for React projects using Vite or similar bundlers. This enables build-time source location injection and runtime click detection.

```bash
npm install --save-dev @locator/babel-jsx @locator/runtime
```

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

### Run Development Server in Next.js

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/next-16/README.md

Commands to start the development server for a Next.js application using different package managers. This allows for live reloading and quick iteration during development.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Configure @locator/webpack-loader for Next.js

Source: https://github.com/infi-pc/locatorjs/blob/master/packages/webpack-loader/README.md

Configuration examples for integrating the loader into Next.js projects using either Turbopack or standard Webpack.

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      "**/*.{tsx,jsx}": {
        loaders: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      },
    },
  },
};

export default nextConfig;
```

```javascript
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      });
    }
    return config;
  },
};
```

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

### Initialize LocatorJS Runtime in React App

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Initializes the LocatorJS runtime in a React application's entry point. This setup enables the UI overlay and click detection for opening source files in the IDE, but only when the application is running in development mode.

```typescript
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import setupLocatorUI from "@locator/runtime";

// Only enable in development mode
if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

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

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

### Configure Babel for LocatorJS Plugin

Source: https://context7.com/infi-pc/locatorjs/llms.txt

A standalone Babel configuration file that includes the @locator/babel-jsx plugin. This setup allows for fine-grained control over the plugin's behavior, such as specifying the environment, the type of data attribute to inject, and component names to ignore.

```javascript
// babel.config.js - Standalone Babel configuration
module.exports = {
  presets: ["@babel/preset-react"],
  plugins: [
    [
      "@locator/babel-jsx",
      {
        // Only run in development environment
        env: "development",

        // Use full file paths in attributes (for Server Components)
        dataAttribute: "path", // Options: "id" (default) | "path"

        // Ignore specific component names
        ignoreComponentNames: ["Provider", "Context", "Wrapper"],
      },
    ],
  ],
};
```

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

### LocalStorage Options API

Source: https://context7.com/infi-pc/locatorjs/llms.txt

LocatorJS stores user preferences in localStorage for session persistence and customization. This API allows you to get, set, listen for changes, and clean these options.

```APIDOC
## LocalStorage Options API

LocatorJS stores user preferences in localStorage, allowing customization that persists across sessions.

### Functions

- `getStoredOptions()`: Retrieves the current stored options.
- `setStoredOptions(options)`: Sets custom options. Accepts an object with optional properties like `projectPath`, `templateOrTemplateId`, `adapterId`, `replacePath`, `disabled`, `showIntro`, `welcomeScreenDismissed`, `hrefTarget`, `tmuxSession`.
- `listenOnOptionsChanges(callback)`: Listens for changes in options and executes a callback function with the new options.
- `cleanOptions()`: Resets all options to their default values.

### Example Usage

```typescript
import {
  getStoredOptions,
  setStoredOptions,
  cleanOptions,
  listenOnOptionsChanges,
} from "@locator/shared";

// Get current stored options
const options = getStoredOptions();
console.log(options);

// Set custom options
setStoredOptions({
  projectPath: "/home/user/my-project",
  templateOrTemplateId: "cursor",
  hrefTarget: "_self",
  replacePath: {
    from: "/app/",
    to: "/home/user/projects/my-app/",
  },
});

// Listen for options changes
listenOnOptionsChanges((newOptions) => {
  console.log("Options updated:", newOptions);
});

// Reset all options
cleanOptions();
```
```

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

### LocalStorage Options API - TypeScript

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Manages user preferences and customization settings stored in localStorage for LocatorJS. This API allows getting, setting, listening for changes, and cleaning options, ensuring persistent preferences across sessions and synchronization between tabs.

```typescript
import {
  getStoredOptions,
  setStoredOptions,
  cleanOptions,
  listenOnOptionsChanges,
} from "@locator/shared";

// Get current stored options
const options = getStoredOptions();
console.log(options);
// {
//   projectPath?: string;
//   templateOrTemplateId?: string;
//   adapterId?: string;
//   replacePath?: { from: string; to: string };
//   disabled?: boolean;
//   showIntro?: boolean;
//   welcomeScreenDismissed?: boolean;
//   hrefTarget?: "_blank" | "_self";
//   tmuxSession?: string;
// }

// Set custom options
setStoredOptions({
  projectPath: "/home/user/my-project",
  templateOrTemplateId: "cursor",
  hrefTarget: "_self",
  // Path replacement for remote development / Docker
  replacePath: {
    from: "/app/",
    to: "/home/user/projects/my-app/",
  },
});

// Listen for options changes (useful for multi-tab sync)
listenOnOptionsChanges((newOptions) => {
  console.log("Options updated:", newOptions);
});

// Reset all options to defaults
cleanOptions();
```

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

### Build for Production with npm

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-solid-project/README.md

Builds the application for production, optimizing it for performance and creating a distributable 'dist' folder. The output is minified and includes content hashes for caching.

```bash
npm run build
```

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

### Integrate LocatorJS with SolidJS

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configures Vite with the SolidJS babel plugin and initializes the LocatorJS runtime in the application entry point.

```javascript
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [
    solidPlugin({
      babel: {
        plugins: [
          [
            "@locator/babel-jsx/dist",
            { env: "development" },
          ],
        ],
      },
    }),
  ],
  build: { target: "esnext" },
});
```

```tsx
import { render } from "solid-js/web";
import App from "./App";
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI({ adapter: "jsx" });
}

render(() => <App />, document.getElementById("root")!);
```

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

### Integrate LocatorJS with Preact

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configures Vite with the Preact preset and initializes the LocatorJS runtime in the main entry point.

```javascript
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

export default defineConfig({
  plugins: [
    preact({
      babel: {
        plugins: [
          [
            "@locator/babel-jsx/dist",
            { env: "development" },
          ],
        ],
      },
    }),
  ],
});
```

```tsx
import { render } from "preact";
import App from "./App";
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI({ adapter: "jsx" });
}

render(<App />, document.getElementById("app")!);
```

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

### Framework Detection Functions

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Utility functions to detect the frontend framework running in the current environment, aiding in adapter selection.

```APIDOC
## Framework Detection Functions

Utility functions to detect which framework is running in the current environment.

### Functions

- `detectReact()`: Detects React using the `__REACT_DEVTOOLS_GLOBAL_HOOK__`.
- `detectSvelte()`: Detects Svelte using HMR (`__SVELTE_HMR` or `__SAPPER__`).
- `detectVue()`: Detects Vue using the global `__VUE__` object.
- `detectJSX()`: Detects JSX data attributes, typically from `@locator/babel-jsx` (`__LOCATOR_DATA__`).

### Example Usage

```typescript
import {
  detectReact,
  detectSvelte,
  detectVue,
  detectJSX,
} from "@locator/shared";

if (detectReact()) {
  console.log("React detected");
}

if (detectSvelte()) {
  console.log("Svelte detected");
}

if (detectVue()) {
  console.log("Vue detected");
}

if (detectJSX()) {
  console.log("JSX detected");
}

// Auto-select adapter based on detection
function getAdapter() {
  if (detectReact()) return "react";
  if (detectJSX()) return "jsx";
  if (detectSvelte()) return "svelte";
  if (detectVue()) return "vue";
  return null;
}
```
```

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

### Configure Vue with Vite

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Integrates LocatorJS into a Vue project by configuring the Vite plugin and initializing the runtime UI in the application entry point.

```javascript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});
```

```typescript
import { createApp } from "vue";
import App from "./App.vue";
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI({
    adapter: "vue",
  });
}

createApp(App).mount("#app");
```

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

### POST /api/locator/targets

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configure custom IDE URL templates to define how LocatorJS opens files in your preferred editor.

```APIDOC
## POST /api/locator/targets

### Description
Define custom IDE targets using URL templates that support variables like file path, line, and column.

### Method
POST

### Parameters
#### Request Body
- **targets** (object) - Required - A map of editor identifiers to their respective URL templates and labels.

### Request Example
{
  "targets": {
    "vscode": {
      "url": "vscode://file/${projectPath}${filePath}:${line}:${column}",
      "label": "VSCode"
    }
  }
}

### Response
#### Success Response (200)
- **status** (string) - Confirmation of target configuration.
```

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

### Configure Webpack and Turbopack Loaders

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configures the @locator/webpack-loader to enable component source mapping in development environments. Supports Next.js Turbopack, standard Webpack, and generic build configurations.

```typescript
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      "**/*.{tsx,jsx}": {
        loaders: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      },
    },
  },
};

export default nextConfig;
```

```javascript
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
              ignoreComponentNames: ["CustomProvider"],
            },
          },
        ],
      });
    }
    return config;
  },
};
```

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
            },
          },
        ],
      },
    ],
  },
};
```

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

### Integrate LocatorJS with Next.js App Router

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Sets up the LocatorJS runtime within a Next.js App Router environment. Requires a client-side provider to initialize the UI during development.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx?$/,
      use: [
        { loader: "@locator/webpack-loader", options: { env: "development" } },
      ],
    });
    return config;
  },
};

module.exports = nextConfig;
```

```tsx
"use client";

import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

export default function ClientProviders({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}
```

```tsx
import ClientProviders from "./ClientProviders";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  );
}
```

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

### Define Custom IDE Targets

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configures custom URL templates for opening source files in various IDEs like VSCode, WebStorm, and Cursor using the LocatorJS runtime configuration.

```typescript
import setupLocatorUI from "@locator/runtime";

setupLocatorUI({
  targets: {
    vscode: {
      url: "vscode://file/${projectPath}${filePath}:${line}:${column}",
      label: "VSCode",
    },
    webstorm: {
      url: "webstorm://open?file=${projectPath}${filePath}&line=${line}&column=${column}",
      label: "WebStorm",
    },
    cursor: {
      url: "cursor://file/${projectPath}${filePath}:${line}:${column}",
      label: "Cursor",
    },
    windsurf: {
      url: "windsurf://file/${projectPath}${filePath}:${line}:${column}",
      label: "Windsurf",
    },
    nvim: {
      url: "nvim://file/${projectPath}${filePath}:${line}:${column}",
      label: "Neovim (macOS only)",
    },
    tmuxVim: {
      url: "tmux://send-keys -t ${tmuxSession} ':e +${line} ${projectPath}${filePath}' Enter",
      label: "Tmux + Vim",
    },
  },
});
```

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

### Generic Webpack Configuration

Source: https://github.com/infi-pc/locatorjs/blob/master/packages/webpack-loader/README.md

Standard Webpack configuration for integrating the loader into a project, including optional configuration parameters like ignoreComponentNames.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "@locator/webpack-loader",
            options: {
              env: "development",
              ignoreComponentNames: ["CustomProvider"],
            },
          },
        ],
      },
    ],
  },
};
```

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

### Implement External Svelte Store

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-svelte-project/README.md

Creates a simple writable store to persist component state during Hot Module Replacement (HMR). This approach ensures data remains intact even when the component module is reloaded.

```javascript
import { writable } from 'svelte/store';
export default writable(0);
```

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

### Importing Storybook Meta and Assets in JavaScript

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-react-project/src/stories/Introduction.stories.mdx

This snippet demonstrates importing the Storybook Meta component and various SVG assets. These assets are likely used for visual representation within the Storybook documentation, such as icons for different features or components.

```javascript
import { Meta } from '@storybook/addon-docs';
import Code from './assets/code-brackets.svg';
import Colors from './assets/colors.svg';
import Comments from './assets/comments.svg';
import Direction from './assets/direction.svg';
import Flow from './assets/flow.svg';
import Plugin from './assets/plugin.svg';
import Repo from './assets/repo.svg';
import StackAlt from './assets/stackalt.svg';
```

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

### Configure Svelte with Vite

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Integrates LocatorJS into a Svelte project by updating the Vite configuration to include the svelte plugin and defining the project path for source resolution.

```javascript
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte()],
  define: {
    __PROJECT_PATH__: `"${process.cwd()}/"`,
  },
});
```

```typescript
import App from "./App.svelte";
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI({
    adapter: "svelte",
  });
}

const app = new App({
  target: document.getElementById("app")!,
});

export default app;
```

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

### Framework Detection Functions - TypeScript

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Utility functions for detecting the frontend framework (React, Svelte, Vue, JSX) running in the current environment. These functions are crucial for automatically selecting the appropriate adapter for LocatorJS.

```typescript
import {
  detectReact,
  detectSvelte,
  detectVue,
  detectJSX,
} from "@locator/shared";

// Detect React via DevTools hook
if (detectReact()) {
  console.log("React detected via __REACT_DEVTOOLS_GLOBAL_HOOK__");
}

// Detect Svelte via HMR
if (detectSvelte()) {
  console.log("Svelte detected via __SVELTE_HMR or __SAPPER__");
}

// Detect Vue via global
if (detectVue()) {
  console.log("Vue detected via __VUE__");
}

// Detect JSX data attributes (from @locator/babel-jsx)
if (detectJSX()) {
  console.log("LocatorJS data detected via __LOCATOR_DATA__");
}

// Auto-select adapter based on detection
function getAdapter() {
  if (detectReact()) return "react";
  if (detectJSX()) return "jsx";
  if (detectSvelte()) return "svelte";
  if (detectVue()) return "vue";
  return null;
}
```

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

### Configure Vite for LocatorJS (React)

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Configures the Vite build process to include the @locator/babel-jsx plugin. This plugin injects source location data attributes into JSX elements during development.

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            "@locator/babel-jsx/dist",
            {
              env: "development",
            },
          ],
        ],
      },
    }),
  ],
});
```

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

### LocatorJS Babel Plugin JSX Transformation

Source: https://context7.com/infi-pc/locatorjs/llms.txt

Illustrates how the @locator/babel-jsx plugin transforms JSX input components into output components with added source location data attributes. It shows the difference between using 'id' and 'path' for the dataAttribute configuration.

```tsx
// Input component
function Button({ children }) {
  return <button className="btn">{children}</button>;
}

// Output after transformation (with dataAttribute: "id")
function Button({ children }) {
  return <button className="btn" data-locatorjs-id={"/path/to/project/src/Button.tsx::0"}>{children}</button>;
}

// Output after transformation (with dataAttribute: "path")
function Button({ children }) {
  return <button className="btn" data-locatorjs={"/path/to/project/src/Button.tsx:3:10"}>{children}</button>;
}
```

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

### CSS Styling for Storybook Documentation

Source: https://github.com/infi-pc/locatorjs/blob/master/apps/vite-react-project/src/stories/Introduction.stories.mdx

This block contains CSS styles intended for use within a Storybook documentation page. It defines styles for various elements like subheadings, link lists, individual link items, and tip elements, ensuring a consistent and visually appealing presentation of documentation content.

```css
<style>
  {
    .subheading {
      --mediumdark: '#999999';
      font-weight: 900;
      font-size: 13px;
      color: #999;
      letter-spacing: 6px;
      line-height: 24px;
      text-transform: uppercase;
      margin-bottom: 12px;
      margin-top: 40px;
    }

    .link-list {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      row-gap: 10px;
    }

    @media (min-width: 620px) {
      .link-list {
        row-gap: 20px;
        column-gap: 20px;
        grid-template-columns: 1fr 1fr;
      }
    }

    @media all and (-ms-high-contrast:none) {
    .link-list {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 1fr;
      }
    }

    .link-item {
      display: block;
      padding: 20px 30px 20px 15px;
      border: 1px solid #00000010;
      border-radius: 5px;
      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
      color: #333333;
      display: flex;
      align-items: flex-start;
    }

    .link-item:hover {
      border-color: #1EA7FD50;
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }

    .link-item:active {
      border-color: #1EA7FD;
      transform: translate3d(0, 0, 0);
    }

    .link-item strong {
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
    }

    .link-item img {
      height: 40px;
      width: 40px;
      margin-right: 15px;
      flex: none;
    }

    .link-item span {
      font-size: 14px;
      line-height: 20px;
    }

    .tip {
      display: inline-block;
      border-radius: 1em;
      font-size: 11px;
      line-height: 12px;
      font-weight: 700;
      background: #E7FDD8;
      color: #66BF3C;
      padding: 4px 12px;
      margin-right: 10px;
      vertical-align: top;
    }

    .tip-wrapper {
      font-size: 13px;
      line-height: 20px;
      margin-top: 40px;
      margin-bottom: 40px;
    }

    .tip-wrapper code {
      font-size: 12px;
      display: inline-block;
    }
  }
</style>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.