### Install Charsm with pnpm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Instructions on how to install the Charsm library using the pnpm package manager. This command adds Charsm as a dependency to your project.

```bash
pnpm add charsm
```

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

### Rendering Markdown Content with Charsm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Demonstrates how to render a multi-line Markdown string into a formatted terminal output using `lip.RenderMD`. It includes an example Markdown string with headings, tables, lists, and text, and specifies a theme ('tokyo-night') for rendering.

```javascript

  const content = `
# Today’s Menu

## Appetizers

| Name        | Price | Notes                           |
| ---         | ---   | ---                             |
| Tsukemono   | $2    | Just an appetizer               |
| Tomato Soup | $4    | Made with San Marzano tomatoes  |
| Okonomiyaki | $4    | Takes a few minutes to make     |
| Curry       | $3    | We can add squash if you’d like |

## Seasonal Dishes

| Name                 | Price | Notes              |
| ---                  | ---   | ---                |
| Steamed bitter melon | $2    | Not so bitter      |
| Takoyaki             | $3    | Fun to eat         |
| Winter squash        | $3    | Today it's pumpkin |

## Desserts

| Name         | Price | Notes                 |
| ---          | ---   | ---                   |
| Dorayaki     | $4    | Looks good on rabbits |
| Banana Split | $5    | A classic             |
| Cream Puff   | $3    | Pretty creamy!        |

All our dishes are made in-house by Karen, our chef. Most of our ingredients
are from our garden or the fish market down the street.

Some famous people that have eaten here lately:

* [x] René Redzepi
* [x] David Chang
* [ ] Jiro Ono (maybe some day)

Bon appétit!
`

  // technically not part of lip(lipgloss)
  console.log(lip.RenderMD(content, "tokyo-night"))


```

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

### Initialize Charsm Lipgloss Instance

Source: https://github.com/sklyt/charsm/blob/main/README.md

Demonstrates how to initialize the Charsm WebAssembly module using `initLip` and then create a new `Lipgloss` instance. It's crucial to await `initLip` to ensure the WASM module is loaded successfully before proceeding with style operations.

```javascript
import {initLip, Lipgloss} from "charsm"

(async function() {
    const isInit = await initLip(); // returns false if WASM fails to load, otherwise true

    if (!isInit) return; // handle failure case
})();
```

```javascript
(async function() {
    const lip = new Lipgloss();
})();
```

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

### Bundle Application with `nexe` and WASM Resource

Source: https://github.com/sklyt/charsm/blob/main/README.md

This `nexe` command bundles the `index.js` application into `myApp.exe`, specifying `lip.wasm` as a resource to be included. The `--resource` flag ensures the WASM file is embedded within the executable.

```bash
nexe -i index.js -o myApp.exe --resource node_modules/charsm/dist/lip.wasm
```

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

### Bundle Application with `pkg` and WASM Asset

Source: https://github.com/sklyt/charsm/blob/main/README.md

This bash command executes `pkg` to bundle the application, explicitly passing the path to `lip.wasm` as an asset. This ensures the WASM file is packaged alongside the main application.

```bash
pkg . --assets node_modules/charsm/dist/lip.wasm
```

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

### Configure `electron-builder` to Include WASM File

Source: https://github.com/sklyt/charsm/blob/main/README.md

This `electron-builder` configuration snippet, typically found in `package.json` or a dedicated build configuration, specifies that `lip.wasm` should be included in the Electron application's `files` array. This ensures the WASM file is packaged correctly for distribution.

```json
{
  "files": [
    "dist/**/*",
    "node_modules/charsm/dist/lip.wasm"
  ]
}
```

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

### Go WASM Wrapper: Implementing Lipgloss Join Function

Source: https://github.com/sklyt/charsm/blob/main/README.md

This Go function demonstrates how the `lipgloss.Join` functionality is exposed to JavaScript via WebAssembly. It handles different join directions (vertical/horizontal) and position arguments (`pc` or `position`), converting JavaScript values to Go types and calling the underlying `lipgloss` functions. The verbose implementation avoids Go's `reflect` package for performance.

```Go
func (l *lipWrapper) Join(this js.Value, args []js.Value) interface{} {
	direction := args[0].Get("direction").String()

	var elements []string
	e := args[0].Get("elements")
	for i := 0; i < e.Length(); i++ {
		elements = append(elements, e.Index(i).String())
	}

	if CheckTruthy(args, "pc") {
		if direction == "vertical" {
			return lipgloss.JoinVertical(lipgloss.Position(args[0].Get("pc").Int()), elements...)
		} else {
			return lipgloss.JoinHorizontal(lipgloss.Position(args[0].Get("pc").Int()), elements...)
		}
	}

	if CheckTruthy(args, "position") {
		pos := args[0].Get("position").String()
		var apos lipgloss.Position

		if pos == "bottom" {
			apos = lipgloss.Bottom
		} else if pos == "top" {
			apos = lipgloss.Top
		} else if pos == "right" {
			apos = lipgloss.Right
		} else {
			apos = lipgloss.Left
		}

		if direction == "vertical" {
			return lipgloss.JoinVertical(apos, elements...)
		} else {
			return lipgloss.JoinHorizontal(apos, elements...)
		}
	}

	return ""
}
```

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

### Creating Formatted Tables with Charsm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Shows how to construct and display a formatted table using `lip.newTable`. It defines table `headers` and `rows`, then configures table-wide styles (`border`, `color`, `width`), `header` styles (`color`, `bold`), and `rows` specific styles (e.g., `even` row colors).

```javascript
const rows = [
    ["Chinese", "您好", "你好"],
    ["Japanese", "こんにちは", "やあ"],
    ["Arabic", "أهلين", "أهلا"],
    ["Russian", "Здравствуйте", "Привет"],
    ["Spanish", "Hola", "¿Qué tal?"]
];

const tableData = { headers: ["LANGUAGE", "FORMAL", "INFORMAL"], rows: rows };

const t = lip.newTable({
    data: tableData,
    table: { border: "rounded", color: "99", width: 100 },
    header: { color: "212", bold: true },
    rows: { even: { color: "246" } }
});

console.log(t);
```

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

### Go WASM Application: Main Function for JavaScript Exports

Source: https://github.com/sklyt/charsm/blob/main/README.md

This Go `main` function initializes the `lipWrapper` and exports various `lipgloss` related functions to the JavaScript global scope using `js.Global().Set`. It shows how Go functions are made available for invocation from JavaScript, serving as the entry point for the WASM module.

```Go
func main() {

	lip := &lipWrapper{}
	lip.styles = make(map[string]string)
	lip.styles2o = make(map[string]lipgloss.Style)

	// Export the `add` function to JavaScript
	// js.Global().Set("add", js.FuncOf(add))
	// js.Global().Set("greet", js.FuncOf(greet))
	// js.Global().Set("multiply", js.FuncOf(multiply))
	// js.Global().Set("processUser", js.FuncOf(processUser))
	// js.Global().Set("asyncAdd", js.FuncOf(asyncAdd))
	// js.Global().Set("lipprint", js.FuncOf(printWithGloss))
	// js.Global().Set("lipgloss", js.Func(lipgloss.NewStyle))
	js.Global().Set("createStyle", js.FuncOf(lip.createStyle))
	js.Global().Set("apply", js.FuncOf(lip.apply))
	// js.Global().Set("canvasColor", js.FuncOf(lip.canvasColor))
	// js.Global().Set("padding", js.FuncOf(lip.canvasColor))
	// js.Global().Set("render", js.FuncOf(lip.render))
	// js.Global().Set("margin", js.FuncOf(lip.margin))
	// js.Global().Set("place", js.FuncOf(lip.place))
	// js.Global().Set("size", js.FuncOf(lip.size))
	// js.Global().Set("JoinHorizontal", js.FuncOf(lip.JoinHorizontal))
	// js.Global().Set("JoinVertical", js.FuncOf(lip.JoinVertical))
	// js.Global().Set("border", js.FuncOf(lip.border))
	// js.Global().Set("width", js.FuncOf(lip.width))
	// js.Global().Set("height", js.FuncOf(lip.height))
	js.Global().Set("newTable", js.FuncOf(lip.newTable))
	// js.Global().Set("tableStyle", js.FuncOf(lip.tableStyle))
	js.Global().Set("join", js.FuncOf(lip.Join))

	// Example user input
	// input := "lipgloss.NewStyle().Foreground(lipgloss.Color(fg)).Background(lipgloss.Color(bg))"

	// // Assuming user provides these values
	// fg := "#FF0000" // red
	// bg := "#00FF00" // green

	// // style := buildStyleFromInput(input, fg, bg)

	// // Print styled text to see the result
	// styledText := style.Render("Hello, Styled World!")
	// fmt.Println(styledText)
	// // Keep the program running (WebAssembly runs until manually stopped)
	select {} // loop
}
```

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

### Configure `pkg` to Include WASM Asset

Source: https://github.com/sklyt/charsm/blob/main/README.md

This JSON configuration snippet for `package.json` instructs `pkg` to include `lip.wasm` as an asset during the bundling process. It ensures the WASM file is available within the final executable.

```json
{
  "pkg": {
    "assets": [
      "node_modules/charsm/dist/lip.wasm"
    ]
  }
}
```

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

### Creating and Applying Styles with Charsm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Demonstrates how to define custom styles using `lip.createStyle` for text elements, specifying properties like `canvasColor`, `border`, `padding`, `margin`, `bold`, `align`, `width`, and `height`. It also shows how to apply these defined styles to text content using `lip.apply`.

```javascript
    lip.createStyle({
        id: "primary",
        canvasColor: { color: "#7D56F4" },
        border: { type: "rounded", background: "#0056b3", sides: [true] },
        padding: [6, 8, 6, 8],
        margin: [0, 2, 8, 2],
        bold: true,
        align: 'center',
        width: 10,
        height: 12,
    });;

 lip.createStyle({
    id: "secondary",
  canvasColor: {color: "#7D56F4" },
  border: { type: "rounded", background: "#0056b3", sides: [true, false] },
  padding: [6, 8, 6, 8],
   margin: [0, 0, 8, 1],
    bold: true,
    // alignH: "right",

   alignV: "bottom",
   width: 10, 
   height: 12,

  });


const a = lip.apply({ value: "Charsmmm", id: "secondary" });
const b = lip.apply({ value: "🔥🦾🍕", id: "primary" });
const c = lip.apply({ value: 'Charsmmm', id: "secondary" });
```

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

### Reference WASM Path in `nexe` Bundled App

Source: https://github.com/sklyt/charsm/blob/main/README.md

This JavaScript line demonstrates how to dynamically construct the path to `lip.wasm` at runtime when the application is bundled with `nexe`. It uses `process.cwd()` to resolve the file's location relative to the current working directory of the executable.

```javascript
const wasmPath = path.join(process.cwd(), 'node_modules/charsm/dist/lip.wasm');
```

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

### JavaScript: Loading WASM File for Node.js Application

Source: https://github.com/sklyt/charsm/blob/main/README.md

This JavaScript snippet illustrates how the `lip.wasm` file is loaded into a Node.js application. It uses Node's `fs` module to synchronously read the WASM binary from a resolved path, emphasizing the need for bundlers to include this file.

```JavaScript
const wasmPath = path.resolve(dir, './lip.wasm');
const wasmfile = fs.readFileSync(wasmPath);
```

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

### Define and Apply Styles in Charsm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Illustrates how to define custom styles using `lip.createStyle` with various options like canvas color, border, padding, margin, and bold text. It also shows how to apply these defined styles to text using `lip.apply`, either generally or by referencing a specific style ID.

```javascript
(async function() {
    // Define a style
    lip.createStyle({
        id: "primary",
        canvasColor: { color: "#7D56F4" },
        border: { type: "rounded", background: "#0056b3", sides: [true] },
        padding: [6, 8, 6, 8],
        margin: [0, 0, 8, 0],
        bold: true,
        width: 10,
        height: 12,
    });

    // Apply the style
    const result = lip.apply({ value: "🔥🦾🍕" });
    console.log(result); // Output styled result

    // Apply a specific style by ID
    const custom = lip.apply({ value: "🔥🦾🍕", id: "primary" });
    console.log(custom);
})();
```

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

### Using Adaptive Colors for Dynamic Styling

Source: https://github.com/sklyt/charsm/blob/main/README.md

Shows a simpler way to define adaptive colors using `adaptiveColor` for `canvasColor`, providing a `Light` and `Dark` hex value. This allows the style to automatically adjust its color based on the terminal's theme.

```javascript
 const highlight = { Light: "#874BFD", Dark: "#7D56F4" }
 canvasColor: { color:{ adaptiveColor: highlight } , background:  "#FAFAFA" },
```

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

### Specifying Complete Static Colors in Charsm

Source: https://github.com/sklyt/charsm/blob/main/README.md

Demonstrates how to use `completeColor` to define a static color with specific `TrueColor`, `ANSI256`, and `ANSI` values. This provides precise color control without adaptation.

```javascript
 canvasColor: {color: {completeColor: {TrueColor: "#d7ffae", ANSI256: "193", ANSI: "11"}}}
```

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

### Reference WASM Path in `electron-builder` App

Source: https://github.com/sklyt/charsm/blob/main/README.md

This JavaScript line shows how to reference the `lip.wasm` file's path within an Electron application bundled by `electron-builder`. It uses `__dirname` to resolve the path relative to the current module's directory, which is reliable in bundled Electron apps.

```javascript
const wasmPath = path.join(__dirname, 'node_modules/charsm/dist/lip.wasm');
```

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

### Defining Complete Adaptive Colors in Charsm Styles

Source: https://github.com/sklyt/charsm/blob/main/README.md

Illustrates how to use `completeAdaptiveColor` within `canvasColor` to define distinct color schemes for light and dark terminal themes. It specifies `TrueColor`, `ANSI256`, and `ANSI` values for both `Light` and `Dark` modes, allowing for dynamic color adaptation.

```javascript
 lip.createStyle({
       id: "primary",
     canvasColor: {color: "#7D56F4", background:{completeAdaptiveColor: {  Light:{TrueColor: "#d7ffae", ANSI256: "193", ANSI: "11"}, Dark: {TrueColor: "#d75fee", ANSI256: "163", ANSI: "5"}}}},
   

     });
```

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

### Joining Elements Horizontally with Charsm Layout

Source: https://github.com/sklyt/charsm/blob/main/README.md

Illustrates how to combine multiple styled elements horizontally using `lip.join`. It specifies the `direction` as 'horizontal', provides an array of `elements` to join, and sets their `position`.

```javascript
const res = lip.join({ direction: "horizontal", elements: [a, b, c], position: "left" });
console.log(res);
```

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

### Charsm Style Interface Definition

Source: https://github.com/sklyt/charsm/blob/main/README.md

Defines the `Style` interface used for configuring visual properties in Charsm. It details available properties such as `id`, `canvasColor`, `border`, `padding`, `margin`, `bold`, alignment options, and dimensions, along with their respective types and notes on functionality.

```APIDOC
type LipglossPos = "bottom" | "top" | "left" | "right" | "center";
type BorderType = "rounded" | "block" | "thick" | "double";

interface Style {
    id: string;
    canvasColor?: { color?: string, background?: string };
    border?: { type: BorderType, foreground?: string, background?: string, sides: Array<boolean> };
    padding?: Array<number>;
    margin: Array<number>;
    bold?: boolean;
    alignV?: LipglossPos;
    alignH?: LipglossPos;   // buggy don't work
    width?: number;
    height?: number;
    maxWidth?: number;
    maxHeight?: number;
}
```

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