### Install and Build CAD Viewer Examples

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/examples/README.md

Commands to install dependencies, build all examples, and prepare them for serving.

```bash
pnpm install

pnpm build

cd packages/examples

pnpm pre-serve

pnpm serve
```

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

### Development Server for CAD Simple Viewer Example

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer-example/README.md

Start the development server to run the CAD Simple Viewer example locally. This command can be run from the monorepo root or the example's package directory.

```bash
pnpm dev:simple
```

```bash
cd packages/cad-simple-viewer-example
pnpm dev
```

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

### Build Individual CAD Viewer Examples

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/examples/README.md

Commands to build all examples from the root or individual example packages.

```bash
# Build all examples from the root
pnpm build

# Or build individual examples
cd packages/cad-viewer-example && pnpm build
cd packages/cad-simple-viewer-example && pnpm build
```

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

### Build Dependencies for CAD Simple Viewer Example

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer-example/README.md

Install dependencies and build the monorepo or specific packages required for the example. This ensures all necessary components are available.

```bash
pnpm install
pnpm build
```

```bash
pnpm --filter @mlightcad/cad-simple-viewer build
pnpm --filter @mlightcad/cad-html-plugin build
```

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

### Install and Build Dependencies

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Install all project dependencies and build the entire monorepo workspace. This is a prerequisite for running the CAD Viewer example.

```bash
pnpm install
pnpm build
```

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

### Start Simple Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/README.md

Run the development server to start a simplified version of the CAD viewer.

```bash
pnpm dev:simple
```

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

### Install @mlightcad/cad-simple-viewer

Source: https://github.com/mlightcad/cad-viewer/wiki/Integrate-Simple-CAD-Viewer

Install the package using npm.

```bash
npm install @mlightcad/cad-simple-viewer
```

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

### Install CAD Viewer Project

Source: https://github.com/mlightcad/cad-viewer/blob/main/README.md

Clone the repository and install dependencies using pnpm.

```bash
git clone https://github.com/mlightcad/cad-viewer.git
cd cad-viewer
pnpm install
```

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

### Run Development Server (Package Directory)

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Navigate to the package directory and run this command to start the development server.

```bash
cd packages/cad-viewer-example
pnpm dev
```

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

### Install CAD PDF Plugin

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-pdf-plugin/README.md

Install the @mlightcad/cad-pdf-plugin package using pnpm.

```bash
pnpm add @mlightcad/cad-pdf-plugin
```

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

### Install and Build Monorepo Dependencies

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-html-exporter-cli/README.md

Install project dependencies and build the browser export harness from the monorepo root.

```bash
pnpm install
pnpm --filter @mlightcad/cad-html-exporter-cli install-browser
pnpm --filter @mlightcad/cad-html-exporter-cli build
```

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

### Run Development Server (Monorepo Root)

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Execute this command from the monorepo root to start the development server.

```bash
pnpm dev
```

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

### Install cad-viewer Component

Source: https://github.com/mlightcad/cad-viewer/wiki/Integrate-CAD-Viewer-Component

Command to install the cad-viewer component using npm.

```bash
npm install @mlightcad/cad-viewer
```

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

### Build Specific Example Dependencies

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Build only the necessary dependencies for the CAD Viewer example within the monorepo. This is an alternative to building the entire workspace.

```bash
pnpm --filter @mlightcad/cad-html-plugin build
pnpm --filter @mlightcad/cad-simple-viewer build
pnpm --filter @mlightcad/cad-viewer build
```

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

### Install Dependencies with pnpm

Source: https://github.com/mlightcad/cad-viewer/wiki/Debugging-with-Multiple-Repo-Changes

Run this command from the root of the project you are debugging to install dependencies, including local file overrides.

```bash
pnpm install
```

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

### Install CAD HTML Plugin

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-html-plugin/README.md

Install the CAD HTML plugin using pnpm. Ensure peer dependencies are met.

```bash
pnpm add @mlightcad/cad-html-plugin
```

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

### Install Cad-SVG-Plugin

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-svg-plugin/README.md

Install the CAD SVG plugin using pnpm. Ensure peer dependencies are also met.

```bash
pnpm add @mlightcad/cad-svg-plugin
```

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

### Install CAD Simple Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer/README.md

Install the cad-simple-viewer package using npm. This command is used to add the core CAD logic library to your project.

```bash
npm install @mlightcad/cad-simple-viewer
```

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

### Basic Vue Component Integration

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer/README.md

Integrate the MlCADViewer component into a Vue.js application. Ensure all required dependencies are installed and imported correctly. This example shows how to initialize the viewer with basic configuration.

```vue
<template>
  <div>
    <!-- For local file loading (users can open files via menu) -->
    <MlCADViewer :background="0x808080" />
    
    <!-- For remote file loading (automatically loads from URL) -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :url="'https://example.com/drawing.dwg'" 
    /> -->
    
    <!-- For local file loading (automatically loads from File object) -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :local-file="selectedFile" 
    /> -->
    
    <!-- With custom base URL for fonts and templates -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :base-url="'https://my-cdn.com/cad-data/'"
    /> -->
  </div>
</template>

<script setup lang="ts">
import 'uno.css'
import 'element-plus/dist/index.css'
import 'element-plus/dist/index.css'

import {
  i18n,
  MlCadViewer
} from '@mlightcad/cad-viewer'
import ElementPlus from 'element-plus'
import { createApp } from 'vue'

const initApp = () => {
  const app = createApp(MlCadViewer)
  app.use(i18n)
  app.use(ElementPlus)
  app.mount('#app')
}

initApp()
</script>
```

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

### Basic MlCADViewer Integration

Source: https://github.com/mlightcad/cad-viewer/wiki/Integrate-CAD-Viewer-Component

Integrates the MlCADViewer component into a Vue 3 application. Ensure all listed dependencies are installed. This example shows how to initialize the app with the viewer and its necessary plugins.

```vue
<template>
  <div>
    <!-- For local file loading (users can open files via menu) -->
    <MlCADViewer :background="0x808080" />
    
    <!-- For remote file loading (automatically loads from URL) -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :url="'https://example.com/drawing.dwg'" 
    /> -->
    
    <!-- For local file loading (automatically loads from File object) -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :local-file="selectedFile" 
    /> -->
    
    <!-- With custom base URL for fonts and templates -->
    <!-- <MlCADViewer 
      :background="0x808080" 
      :base-url="'https://my-cdn.com/cad-data/'"
    /> -->
  </div>
</template>

<script setup lang="ts">
import 'uno.css'
import 'element-plus/dist/index.css'
import 'element-plus/dist/index.css'

import {
  i18n,
  MlCadViewer
} from '@mlightcad/cad-viewer'
import ElementPlus from 'element-plus'
import { createApp } from 'vue'

const initApp = () => {
  const app = createApp(MlCadViewer)
  app.use(i18n)
  app.use(ElementPlus)
  app.mount('#app')
}

initApp()
</script>
```

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

### Install CAD Viewer Package

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer/README.md

Install the CAD Viewer package using npm. This command adds the necessary library to your project dependencies.

```bash
npm install @mlightcad/cad-viewer
```

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

### Example Implementation for Custom Fonts and Templates

Source: https://github.com/mlightcad/cad-viewer/wiki/Self-Hosted-Fonts-and-Templates

Demonstrates initializing the CAD viewer with a custom base URL, loading default fonts along with custom ones, and opening a document from a custom template URL.

```typescript
// Initialize the CAD viewer with custom base URL
const docManager = AcApDocManager.createInstance(canvas)
docManager.baseUrl = 'https://my-cdn.com/cad-resources/'

// Load custom fonts
await docManager.loadDefaultFonts(['Arial', 'My Custom Font'])

// Open a document from a custom template
await docManager.openUrl(docManager.baseUrl + 'templates/custom-template.dxf')
```

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

### Example of Published Package Overrides in pnpm-workspace.yaml

Source: https://github.com/mlightcad/cad-viewer/wiki/Debugging-with-Multiple-Repo-Changes

This snippet shows the standard way to pin dependency versions in a `pnpm-workspace.yaml` file when using published packages.

```yaml
packages:
  - 'packages/*'

overrides:
  '@mlightcad/data-model': '^1.8.3'
  '@mlightcad/libredwg-converter': '^3.6.3'
  '@mlightcad/mtext-input-box': '^0.2.16'
  '@mlightcad/mtext-renderer': '^0.11.2'
  # ... other shared dependency pins
```

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

### Set PICKBOX System Variable to a New Value

Source: https://github.com/mlightcad/cad-viewer/wiki/System-Variables

Shows another example of changing the PICKBOX system variable, this time to a value of 10. This reinforces the direct command-line assignment method.

```text
Command: PICKBOX
New value for PICKBOX <3>: 10
```

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

### Implement Point-based Command Logic

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer/src/command/AGENTS.md

Example of implementing a command that prompts the user for two points. It utilizes `AcEdPromptPointOptions` and an optional Jig for preview. The entity is created and added to the model space after input is collected.

```typescript
async execute(context: AcApContext) {
  // Get first point
  const firstPointPrompt = new AcEdPromptPointOptions(
    AcApI18n.t('jig.[command].firstPoint')
  )
  const firstPoint = await AcApDocManager.instance.editor.getPoint(firstPointPrompt)

  // Get subsequent points
  const nextPointPrompt = new AcEdPromptPointOptions(
    AcApI18n.t('jig.[command].nextPoint')
  )
  nextPointPrompt.useDashedLine = true
  nextPointPrompt.useBasePoint = true
  nextPointPrompt.jig = new AcAp[CommandName]Jig(context.view, firstPoint)
  const nextPoint = await AcApDocManager.instance.editor.getPoint(nextPointPrompt)

  // Create and add entity to model space
  const db = context.doc.database
  const entity = new AcDb[EntityType](/* parameters */)
  db.tables.blockTable.modelSpace.appendEntity(entity)
}
```

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

### Example fonts.json Structure

Source: https://github.com/mlightcad/cad-viewer/wiki/Self-Hosted-Fonts-and-Templates

Defines metadata for fonts, including their names, file paths, types, and optional encoding. This file must be located at the root of your base URL.

```json
[
  {
    "name": ["Arial"],
    "file": "arial.ttf",
    "type": "mesh",
    "description": "Standard Arial font for text rendering"
  },
  {
    "name": ["SimKai"],
    "file": "simkai.ttf", 
    "type": "mesh",
    "description": "Chinese Kai font for CJK text support"
  },
  {
    "name": ["Custom SHX Font"],
    "file": "custom.shx",
    "type": "shx",
    "description": "Custom AutoCAD shape font",
    "encoding": "gbk"
  }
]
```

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

### Rubber-Band and Base-Point Settings

Source: https://github.com/mlightcad/cad-viewer/wiki/User-Input

Several prompt options support visual feedback mechanisms like rubber-band lines and base points to guide user input.

```APIDOC
## Rubber-Band and Base-Point Settings

Several prompt options support a rubber‑band line or base‑point behavior:

- `AcEdPromptPointOptions`: `basePoint`, `useBasePoint`, `useDashedLine`, `allowNone`.
- `AcEdPromptDistanceOptions`: `basePoint`, `useBasePoint`, `useDashedLine`, `only2d`.
- `AcEdPromptAngleOptions`: `basePoint`, `useBasePoint`, `useDashedLine`, `useAngleBase`.
- `AcEdPromptBoxOptions`: `useBasePoint`, `useDashedLine` and separate `firstCornerMessage` / `secondCornerMessage`.

When `useBasePoint` is true, the editor draws a rubber‑band line from the base point to the cursor. `useDashedLine` controls whether that line is dashed.

### Example Usage
```ts
const distanceOptions = new AcEdPromptDistanceOptions()
distanceOptions.useBasePoint = true
distanceOptions.useDashedLine = true
```
```

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

### Add Command Description for Internationalization

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer/src/command/AGENTS.md

Example of adding an internationalized description for a command. This file should be located at `src/i18n/[language]/command.ts`.

```typescript
[command]: {
  description: '命令描述'
}
```

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

### MlCadViewer Component Usage Examples

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer/README.md

Demonstrates various ways to use the MlCadViewer component, including loading local or remote files, and setting a custom base URL. Ensure the MlCadViewer component is imported from '@mlightcad/cad-viewer' and AcApSettingManager from '@mlightcad/cad-simple-viewer'.

```vue
<template>
  <!-- Local file loading - users can open files via main menu -->
  <MlCadViewer locale="en" />
  
  <!-- Remote file loading - automatically loads from URL -->
  <!-- <MlCadViewer 
    locale="en" 
    :url="'https://example.com/drawing.dwg'"
  /> -->
  
  <!-- Local file loading - automatically loads from File object -->
  <!-- <MlCadViewer 
    locale="en" 
    :local-file="selectedFile" 
  /> -->
  
  <!-- Custom baseUrl for fonts and templates -->
  <!-- <MlCadViewer 
    locale="en" 
    :base-url="'https://my-cdn.com/cad-data/'"
  /> -->
</template>

<script setup lang="ts">
import { MlCadViewer } from '@mlightcad/cad-viewer'
import { AcApSettingManager } from '@mlightcad/cad-simple-viewer'

// Configure global UI flags before the viewer mounts
AcApSettingManager.instance.isShowCommandLine = false
// Optional toggles
// AcApSettingManager.instance.isShowToolbar = false
// AcApSettingManager.instance.isShowStats = true
// AcApSettingManager.instance.isShowCoordinate = false
// AcApSettingManager.instance.isShowEntityInfo = false
</script>
```

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

### Conditional Logic for Development and Production

Source: https://github.com/mlightcad/cad-viewer/wiki/Configure-Worker-URLs

Provides an example of how to implement conditional logic to handle differences in worker URL resolution between development and production environments, particularly when `localhost` or `127.0.0.1` are used as hostnames.

```typescript
const isDev =
  typeof window !== 'undefined' &&
  !!window.location &&
  (window.location.hostname === 'localhost' ||
    window.location.hostname === '127.0.0.1')
if (isDev) {
  ...
} else {
  ...
}
```

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

### Add Jig Prompts for Internationalization

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer/src/command/AGENTS.md

Example of adding internationalized prompts for a command's jig, specifically for the first and next points. This file should be located at `src/i18n/[language]/jig.ts`.

```typescript
[command]: {
  firstPoint: '指定第一个点：',
  nextPoint: '指定下一个点：'
}
```

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

### Worker Creation Example

Source: https://github.com/mlightcad/cad-viewer/wiki/Configure-Worker-URLs

Illustrates how a Web Worker is instantiated using a provided worker URL. The `workerUrl` is resolved relative to the document (HTML page), not the JavaScript module.

```typescript
new Worker(workerUrl, { type: 'module' })
```

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

### Creating a Custom Circle Command

Source: https://github.com/mlightcad/cad-viewer/wiki/Command

Extend `AcEdCommand` to create a new command. This example prompts the user for a circle's center point and radius, then creates and adds the circle entity to the model space. Always prefer `context.view.editor` over the global instance when inside a command.

```typescript
import {
  AcEdCommand,
  AcApContext,
  AcApDocManager,
  AcEdPromptPointOptions,
  AcEdPromptDistanceOptions
} from '@mlightcad/cad-simple-viewer'

import { AcDbCircle } from '@mlightcad/data-model'

export class AcApCircleCmd extends AcEdCommand {
  async execute(context: AcApContext) {
    // Prompt for center point
    const centerPrompt = new AcEdPromptPointOptions(
      'Specify center point of circle:'
    )
    const center = await AcApDocManager.instance.editor.getPoint(centerPrompt)

    // Prompt for radius
    const radiusPrompt = new AcEdPromptDistanceOptions(
      'Specify radius of circle:'
    )
    const radius = await AcApDocManager.instance.editor.getDistance(radiusPrompt)

    // Create circle entity and add it to model space
    const db = context.doc.database
    const circle = new AcDbCircle(center, radius)
    db.tables.blockTable.modelSpace.appendEntity(circle)
  }
}
```

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

### Accessing and Setting System Variables

Source: https://github.com/mlightcad/cad-viewer/wiki/System-Variables

Demonstrates the unified API for getting and setting system variables, regardless of their storage location (database or runtime cache). Requires an instance of AcDbSysVarManager and a database object.

```typescript
const sysVarManager = AcDbSysVarManager.instance()

const currentLayer = sysVarManager.getVar('CLAYER', db)
sysVarManager.setVar('CLAYER', 'Walls', db)
sysVarManager.setVar('PICKBOX', 12, db)
```

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

### Custom Base URL Configuration for MlCadViewer

Source: https://github.com/mlightcad/cad-viewer/wiki/Integrate-CAD-Viewer-Component

Use the `baseUrl` property to specify a custom location for loading fonts, templates, and example files. Ensure your server hosts these resources with the expected directory structure (fonts/, templates/, examples/).

```vue
<template>
  <MlCadViewer 
    :base-url="'https://my-company.com/cad-resources/'"
    :url="'https://my-company.com/drawings/project.dwg'"
  />
</template>
```

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

### Build and Preview Production

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Commands to build the project for production and then preview the built application.

```bash
pnpm build
pnpm preview
```

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

### Build CAD Viewer Project

Source: https://github.com/mlightcad/cad-viewer/blob/main/README.md

Build the project for production using pnpm.

```bash
pnpm build
```

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

### Preview Simple Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/README.md

Preview the production build of the simple CAD viewer.

```bash
pnpm preview:simple
```

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

### Build CAD PDF Plugin

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-pdf-plugin/README.md

Build the @mlightcad/cad-pdf-plugin package to produce distribution files.

```bash
pnpm --filter @mlightcad/cad-pdf-plugin build
```

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

### Define Command Aliases

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer-example/README.md

Allows overriding default command names with custom aliases, for example, mapping 'LINE' to 'LX'.

```typescript
commandAliases
```

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

### Eager Plugin Loading via createInstance (Folder Import)

Source: https://github.com/mlightcad/cad-viewer/wiki/Plugin-System

Dynamically loads plugins from a specified folder during initialization. Requires `pluginList` to be provided in the browser environment, where each file should default-export a plugin or factory. `continueOnError` can be set to true to prevent a single plugin failure from stopping the entire process.

```typescript
AcApDocManager.createInstance({
  container: el,
  plugins: {
    fromFolder: {
      folderPath: './plugins',
      pluginList: ['MyPlugin.js'],
      continueOnError: true
    }
  }
})
```

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

### Preview Full-Featured Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/README.md

Preview the production build of the full-featured CAD viewer.

```bash
pnpm preview
```

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

### Configure Worker URLs for AcApDocManager

Source: https://github.com/mlightcad/cad-viewer/wiki/Configure-Worker-URLs

Example of how to configure worker URLs when creating an instance of AcApDocManager. These URLs are resolved relative to the HTML page.

```typescript
AcApDocManager.createInstance({
  webworkerFileUrls: {
    mtextRender: './workers/mtext-renderer-worker.js',
    dxfParser: './workers/dxf-parser-worker.js',
    dwgParser: './workers/libredwg-parser-worker.js'
  }
})
```

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

### Listen to Command Lifecycle Events

Source: https://github.com/mlightcad/cad-viewer/wiki/Command

Demonstrates how to subscribe to `commandWillStart` and `commandEnded` events using the editor instance. Logs the global name of the command to the console when these events occur.

```typescript
const editor = AcApDocManager.instance.curView.editor

editor.events.commandWillStart.addEventListener(({ command }) => {
  console.log('Command will start:', command.globalName)
})

editor.events.commandEnded.addEventListener(({ command }) => {
  console.log('Command ended:', command.globalName)
})
```

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

### Add New Font Entry to fonts.json

Source: https://github.com/mlightcad/cad-viewer/wiki/Self-Hosted-Fonts-and-Templates

Example of adding a new font entry to the `fonts.json` file after uploading the font file to the `fonts/` directory.

```json
[
  // ... existing fonts ...
  {
    "name": "My Custom Font",
    "file": "my-custom-font.ttf",
    "type": "mesh",
    "description": "Custom font for specific project needs"
  }
]
```

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

### Get AcEditor Instance Globally

Source: https://github.com/mlightcad/cad-viewer/wiki/Command

Retrieves the current editor instance from the global document manager. This method is suitable for accessing the editor from anywhere within the application.

```typescript
const editor =
  AcApDocManager.instance.curView.editor
```

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

### Initialize Keyword Collection with String List

Source: https://github.com/mlightcad/cad-viewer/wiki/User-Input

Shows how to initialize an `AcEdKeywordCollection` using an ObjectARX-style string list. This format supports local and global names, optional abbreviations, and alias derivation from uppercase letters.

```typescript
const keywords = new AcEdKeywordCollection('Ja Nein _ Yes No')
```

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

### Set PICKBOX System Variable from Command Line

Source: https://github.com/mlightcad/cad-viewer/wiki/System-Variables

Demonstrates how to change the PICKBOX system variable from the command line. This is a direct interaction where the variable name acts as the command.

```text
Command: PICKBOX
New value for PICKBOX <3>: 5
```

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

### Project Build and Development Scripts

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer-example/README.md

Commonly used scripts for developing, building, and managing the project. These commands are executed using pnpm.

```bash
pnpm dev          # Vite dev server
pnpm build        # Typecheck + production build
pnpm preview      # Serve `dist/`
pnpm clean        # Remove `dist/`, `lib/`, tsbuildinfo
pnpm lint         # ESLint on `src/`
pnpm lint:fix     # ESLint with auto-fix
```

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

### Export DXF to HTML Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-html-exporter-cli/README.md

Convert a DXF file to an HTML viewer by running the CLI from the package directory.

```bash
# From the package directory
node dist/cli.js path/to/drawing.dxf
```

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

### CAD Viewer Component Integration

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer-example/README.md

Example of how to integrate the MlCadViewer component in a Vue application, including props for file, mode, locale, and base URL, and event handling for creation.

```vue
<MlCadViewer
  locale="en"
  :local-file="store.selectedFile"
  :mode="selectedMode"
  base-url="https://cdn.jsdelivr.net/gh/mlightcad/cad-data@main/"
  @create="initialize"
/>
```

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

### Get Point with Keywords - TypeScript

Source: https://github.com/mlightcad/cad-viewer/wiki/User-Input

Prompts the user for a point input, allowing for keyword responses like 'Yes' or 'No'. Handles both successful point selection and keyword input.

```typescript
const opts = new AcEdPromptPointOptions('Pick point or [Yes/No]:')
opts.keywords.add('Yes', 'Yes', 'Y')
opts.keywords.add('No', 'No', 'N')

const result = await editor.getPoint(opts)
if (result.status === AcEdPromptStatus.Keyword) {
  console.log('Keyword:', result.stringResult)
} else if (result.status === AcEdPromptStatus.OK) {
  console.log('Point:', result.value)
}
```

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

### Eager Plugin Loading via createInstance (Instances/Factories)

Source: https://github.com/mlightcad/cad-viewer/wiki/Plugin-System

Passes plugin instances or factory functions directly to `createInstance` for asynchronous loading during application startup. This method is suitable for plugins that should be available early.

```typescript
AcApDocManager.createInstance({
  container: el,
  plugins: {
    fromConfig: [
      new AcApExamplePlugin(),
      () => new AcApAnotherPlugin()
    ]
  }
})
```

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

### Get AcEditor Instance within Command Execution

Source: https://github.com/mlightcad/cad-viewer/wiki/Command

Retrieves the editor instance from the provided context object. This is the recommended way to access the editor when inside a command's execution scope.

```typescript
const editor = context.view.editor
```

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

### Register Plugins

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-simple-viewer-example/README.md

Demonstrates lazy registration of plugins using the @mlightcad/*/register pattern. Only necessary plugins need to be registered.

```typescript
src/register.ts
```

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

### Worker URL Resolution Comparison

Source: https://github.com/mlightcad/cad-viewer/wiki/Configure-Worker-URLs

Compares how different `workerUrl` values are resolved relative to the current page URL and site root, showing example resolved URLs for a given page URL.

```plaintext
| workerUrl value                       | Resolution base      | Example resolved URL   |
| ------------------------------------- | -------------------- | ---------------------- |
| 'workers/worker.js'                   | The current page URL | /app/workers/worker.js |
| './workers/worker.js'                 | The current page URL | /app/workers/worker.js |
| '/workers/worker.js'                  | Site root            | /workers/worker.js     |
| 'https://localhost/workers/worker.js' | Absolute             | /workers/worker.js     |
```

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

### Integrating Jig with Prompt Options

Source: https://github.com/mlightcad/cad-viewer/wiki/Jig-System

Demonstrates how to attach a jig instance directly to prompt options in CAD-Viewer. This automatically links user input to live preview and eliminates manual drag-loop management.

```typescript
const opts = new AcEdPromptDistanceOptions('Specify radius:')
opts.jig = new CircleJig(view, center)
const radius = await editor.getDistance(opts)
```

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

### Define Editor Events for Command Lifecycle

Source: https://github.com/mlightcad/cad-viewer/wiki/Command

Exposes event managers for system variable changes, and for events fired just before a command starts and just after it ends. These events provide arguments containing command details.

```typescript
public readonly events = {
  sysVarChanged: new AcCmEventManager<AcDbSysVarEventArgs>(),
  /** Fired just before the command starts executing */
  commandWillStart: new AcCmEventManager<AcEdCommandEventArgs>(),
  /** Fired after the command finishes executing */
  commandEnded: new AcCmEventManager<AcEdCommandEventArgs>()
}
```

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

### Add Keywords to Prompt Options

Source: https://github.com/mlightcad/cad-viewer/wiki/User-Input

Demonstrates how to add keywords to prompt options using the `add` method. Keywords can have distinct display, global, and local names.

```typescript
const opts = new AcEdPromptPointOptions('Pick point')
opts.keywords.add('Yes', 'Yes', 'Y')
opts.keywords.add('No', 'No', 'N')
```

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

### Configure Custom Base URL for CAD Viewer

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-viewer/README.md

Set a custom baseUrl to load fonts, templates, and example files from your own server or CDN. This is useful for self-hosted resources, corporate environments, or offline deployments.

```vue
<template>
  <MlCadViewer 
    :base-url="'https://my-company.com/cad-resources/'"
    :url="'https://my-company.com/drawings/project.dwg'"
  />
</template>
```

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

### Build and Run Upstream Dependencies

Source: https://github.com/mlightcad/cad-viewer/wiki/Debugging-with-Multiple-Repo-Changes

These commands are used to build and potentially run upstream packages in watch mode when debugging. Repeat for each repository that contains dependencies you need to test.

```bash
cd ../realdwg-web
pnpm install
pnpm build
```

```bash
pnpm dev
```

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

### Plugin Manager Sequence Diagram

Source: https://github.com/mlightcad/cad-viewer/wiki/Plugin-System

Illustrates the interaction between the application, document manager, plugin manager, and a plugin during loading and command execution, including lazy registration.

```mermaid
sequenceDiagram
  participant App
  participant DocManager as AcApDocManager
  participant PM as AcApPluginManager
  participant Plugin as AcApPlugin

  App->>DocManager: createInstance()
  App->>PM: registerLazyPlugin() or loadPlugin()
  Note over App,PM: Lazy: only metadata registered

  App->>DocManager: sendStringToExecute("chtml")
  DocManager->>PM: loadByTrigger("chtml")
  PM->>Plugin: loader() dynamic import
  PM->>Plugin: onLoad(context, commandManager)
  DocManager->>Plugin: execute command
```

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

### Build Cad-SVG-Plugin

Source: https://github.com/mlightcad/cad-viewer/blob/main/packages/cad-svg-plugin/README.md

Build the CAD SVG plugin using pnpm. This generates the main library and the lazy-registration entry point.

```bash
pnpm --filter @mlightcad/cad-svg-plugin build
```

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

### Creating a Circle Jig Class

Source: https://github.com/mlightcad/cad-viewer/wiki/Jig-System

Example of creating a custom jig class by extending `AcEdPreviewJig<T>` for a circle entity. The `update` method dynamically modifies the circle's radius based on user input.

```typescript
import { AcDbCircle, AcGePoint3dLike } from '@mlightcad/data-model'
import { AcEdPreviewJig, AcEdBaseView } from '@mlightcad/cad-simple-viewer'

export class AcApCircleJig extends AcEdPreviewJig<number> {
  private _circle: AcDbCircle

  constructor(view: AcEdBaseView, center: AcGePoint3dLike) {
    super(view)
    this._circle = new AcDbCircle(center, 0)
  }

  get entity(): AcDbCircle {
    return this._circle
  }

  update(radius: number) {
    this._circle.radius = radius
  }
}
```