@lightningjs/blits 1.30.1 → 1.31.0

package/docs/essentials/application_root.md

@@ -1,19 +0,0 @@
-# Application root
-
-Every Blits App starts with a base Application component.
-
-Ultimately this Application is a component like any regular Blits component. But it is augmented with some extra functionality. `Blits.Application` is responsible for setting up the listeners for keyhandling for example.
-
-You can only have 1 Application component per App. By default, this file is named `App.js` and it is placed in the root of the `src`-folder.
-
-`src/App.js` will look something like this:
-
-```js
-import Blits from '@lightningjs/blits'
-
-export default Blits.Application({
-  template: `
-    <Element></Element>
-   `,
-})
-```

package/docs/essentials/components.md

@@ -1,68 +0,0 @@
-# Components
-
-Like any modern front-end framework, Blits is built around the concept of Components. Components allow you to split the UI of your App into
-reusable pieces of code and logic.
-
-As you get started building your App, you're free to put all your elements and logic right in the root Application component.
-This is great for quickly playing around with Blits and Lightning.
-
-But soon you'll find that it's beneficial to start organizing the different parts of your App into separate components. Blits Components can be nested into a tree of components.
-
-Components in Blits follow a clearly defined structure, which helps keep your code clean and guides you to quickly build your components.
-
-This universal structure is also valuable for creating drop-in components that can be easily shared across projects.
-
-## Creating a new Component
-
-Let's see how to create a new component and explore the basic anatomy of a component.
-
-A new component is created using the `Blits.Component()` function that is exported from the `@lightningjs/blits` package. This function accepts two arguments:
-
-- The first argument is the _name_ of the component. This name will be used in debug log messages, so make sure to choose a unique and descriptive name for your component, such as `Homepage`, `Loader`, or `SidebarMenuItem`.
-
-- The second argument is a _Component configuration object_, represented as an `object literal`. This Component configuration object can contain a predefined set of key-value pairs, that define how your Component looks and behaves.
-
-Some of the commonly used Component configuration options include:
-
-   - `template`: to define the template for the component.
-   - `state`: to specify the component instance's internal state.
-   - `props`: to define the props that can be passed into the component.
-   - `hooks`: allowing you to hook into different lifecycle events of the component.
-   - `input`: used to tap into user input.
-   - `methods`: used to define more complex functionality of the component
-
-A basic Blits component will then look something like this:
-
-```js
-// src/components/Loader.js
-export default Blits.Component('Loader', {
-  template: `
-    <Element x="880" y="500" :show="$active">
-      <Element x="$offset" w="40" h="40" color="#94a3b8" :alpha="$alpha" />
-    </Element>
-  `,
-  props: ['type', 'size'],
-  state() {
-    return {
-      active: false,
-      alpha: 0.4,
-      offset: 100
-    }
-  },
-  hooks: {
-    ready() {
-      this.$setTimeout(() => {
-        this.active = true
-      }, 300)
-    }
-  },
-  input: {
-    enter() {
-      this.alpha = 1
-    }
-  }
-})
-```
-
-In the next sections, we will go into the details of each of the component configuration options.
-

package/docs/essentials/displaying_images.md

@@ -1,67 +0,0 @@
-# Displaying Images
-
-Now that we've covered the basics of creating Elements, as well as styling and positioning them, it's time to move away from these boring rectangles and explore how you can incorporate _images_ into your App.
-
-In Blits, it is very easy to display an image. Simply add the `src` attribute to an Element, specifying the image's location.
-
-For local images, make sure to place them in the `public` folder of your App (e.g., `public/assets/background.jpg` or `public/images/logo.png`) and refer to them with a _relative_ path (but omitting the `public` folder as root).
-
-Remote images are also supported and can be linked directly (e.g., `http://mycdn.com/artists/jimi_hendrix/woodstock.jpg`).
-
-```xml
-<Element src="images/logo.png" w="100" h="80" />
-<Element src="http://mycdn.com/artists/jimi_hendrix/woodstock.jpg" w="1920" h="1080" />
-```
-
-## Sizing and Scaling
-
-Make sure to give your Element a width (`w` ) and a height (`h`) attribute. Images will _not_ be rendered if they don't have both attributes present. The Lightning renderer will scale the image to fit these exact dimensions.
-
-For the best performance, it's important to keep your source images as small as possible. If you're displaying an image at `200px x 200px`, make sure the image is exactly that size or _smaller_. The latter option may lead to some quality loss, but can positively impact the overall performance of your App.
-
-## Colorization
-
-You also have the option to _colorize_ an image on the fly. Just add a `color` attribute to the Element with a `src` attribute. You can use a single color, or apply a gradient.
-
-By default, all Elements with a `src` attribute get a solid white background, with the result that the actual colors of the image will be shown.
-
-```xml
-<Element
-  w="200"
-  h="300"
-  :src="$src"
-  color="{top: '#fff', bottom: '#000'}"
-/>
-```
-
-## Asynchronous Loading
-
-All images are loaded asynchronously (and can possibly fail to load), even those local to your App. Blits allows you to easily hook into the `loaded` and `error` events of image Elements.
-
-You can use this, for example, to only make something visible once an image is fully loaded. Or to display a fallback image when a remote image can't be retrieved.
-
-```xml
-<Element src="http://mycdn.com/lightning.jpg" @loaded="$revealPage" @error="$showFallback" />
-```
-
-> Note how events are prefixed with a `@` sign.
-
-Considering the template above you would do something like the following in the `methods` key of your Component configuration object:
-
-```js
-{
-  //...
-  methods: {
-    revealPage(dimensions) {
-      this.$log.info('Image dimensions', dimensions.w, dimensions.h)
-      this.show = true
-    },
-    showFallback(error) {
-      this.$log.error('Image failed to load', error)
-      this.showBackupImage()
-    }
-  }
-}
-```
-
-The `loaded` event receives image dimensions as its argument and the `error` event receives an error message explaining the failure.

package/docs/essentials/displaying_text.md

@@ -1,135 +0,0 @@
-# Displaying Text
-
-Besides displaying images, it is also very common to have _texts_ in an App.
-
-Blits comes with a built-in `<Text>`-tag for displaying and styling texts in a simple and intuitive way.
-
-```xml
-<Text
-  content="Hello world"
-  font="ComicSans"
-  size="$fontSize"
-  :color="$changingColor"
-/>
-
-```
-You can use the Text-tag anywhere in your template, without the need to explicitly import and register it in your Component.
-
-## Available attributes on the Text tag
-
-The Text-tag accepts the following attributes:
-
-- `content` - the text to be displayed. Can be a hardcoded text, a dynamic value, or a reactive value
-- `font` - the font family, defaults to `sans-serif`, or the default font specified in the launch settings
-- `size`  - the font size, defaults to `32`
-- `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (HTML, hexadecimal or rgb(a))
-- `letterspacing` - letterspacing in pixels, defaults to `0`
-- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `maxwidth` attribute to be set as well.
-- `maxwidth` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right. Previously this attribute was `wordwrap`, which has now been deprecated in favour of `maxwidth`.
-- `maxlines` - maximum number of lines that will be displayed
-- `maxheight` - maximum height of a text block, lines that don't fit within this height will not be displayed
-- `lineheight` - the spacing between lines in pixels
-- `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
-- `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow))
-
-## Text dimensions
-
-When you want to center your Text element, or properly position other Elements around your text, it is useful to know the exact dimensions of your text.
-
-Similar to the Image element (i.e. an Element with a `src`), Text elements also accept the `@loaded` attribute. This event is called, as soon as the text is rendered, and passes in the dimensions of the generated text texture.
-
-The example below shows how to use the `@loaded`-attribute to position an Element as an underline, under a piece of text.
-
-```js
-export default Blits.Component('MyComponent', {
-  template: `
-    <Element>
-      <Text :content="$myText" @loaded="$textLoaded" />
-      <!-- gray underline -->
-      <Element :w="$w" h="2" y="$y" color="#333" />
-    </Element>
-  `,
-  props: ['myText'],
-  state() {
-    return {
-      w: 0,
-      y: 0,
-    }
-  },
-  methods: {
-    textLoaded(dimensions) {
-      console.log(`The text has a width of ${dimensions.w} and a height of ${dimensions.h}`)
-      // set the underline width to the exact width of the text
-      this.w = dimensions.w
-      // position the underline 8px below the text
-      this.y = dimensions.h + 8
-    }
-  }
-```
-
-## Text overflow
-
-The text renderer offers the ability to display a _text overflow suffix_ when the text exceeds the bounds of the Text component.
-
-This functionality is automatically enabled, but requires that both a _horizontal_ boundary (using `maxwidth`) and a _vertical_ boundary (using `maxlines` or `maxheight`) are specified on the Text component.
-
-The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_.
-
-## SDF and Canvas2d
-
-Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.
-
-With the SDF text renderer, texts appear a lot _sharper_ on screen. The SDF technique also allows for better scaling of texts, without them becoming blurry - a well-known painpoint in Lightning 2 Apps.
-
- In general, it's recommended to use the SDF text renderer, but Lightning 3 still has a Canvas2d text renderer as a backup, and you can use both text renderers within the same App.
-
-## Using custom fonts
-
-The `font`-attribute on the `<Text>`-tag is used to define which font family should be used for a certain piece of text.
-
-When you create a new Blits app using the available [getting started boilerplate](../getting_started/getting_started.md) you'll be able to use the `lato` (Lato regular) and `raleway` (Raleway ExtraBold) fonts out of the box.
-
-But of course, you can also use any custom font that you want, to give your App the unique look and feel that fits with the design.
-
-Adding a custom font to a Blits App is quite straightforward. First, you'll need to place a `.ttf`, `.woff` or `.otf` version of your font in the `public` folder (i.e. `public/fonts/comic-sans.ttf`).
-
-Then you'll need to register the custom font in the Launch settings of your app (in `src/index.js`). The `fonts`-key in the settings is an `Array` that specifies all available fonts in your App.
-
-Just add a new font object with the necessary details:
-
-```js
-  fonts: [
-    // ...
-    {
-      family: 'ComicSans', // the font name used in your App
-      type: 'msdf', // type of text renderer to use (msdf or web)
-      file: 'fonts/Comic-Sans.ttf', // location of the ttf file
-    },
-    // ..
-  ],
-  ```
-
-From this moment on you'll be able to use the font `ComicSans` anywhere in your App:
-
-```xml
-<Text font="ComicSans" content="I'm Comic Sans font!" />
-```
-
-### Custom characters
-
-For MSDF font, a font atlas is created. By default this atlas includes all printable main ASCII characters. If you know beforehand that you won't need certain characters, it would be more optimal to generate only those characters that are actually needed.
-
-Similarly, if you need characters outside of the default set, like accents or other special characters, then these will need to be included in the generated font atlas.
-
-In order to control which characters are generated for a specific font, you can add a _font config file_ per font inside the `assets/fonts` folder. Its name should match the name of the font file, like so: `myfont.config.json`.
-
-The config file should look something like this:
-
-```json
-{
-  "charset": "0123456789éåaü"
-}
-```
-With the configuration above, only numbers and the specified letters with accents will be generated (i.e. the default character set is overwritten).
-
-> Please note that only special characters and accents that are part of the original font can be added to the generated font atlas. Other characters will show up as a `?`.

package/docs/essentials/element_attributes.md

@@ -1,195 +0,0 @@
-# Supported Element attributes
-
-The core building block of a Blits template is the `<Element>`-tag. The Element tag corresponds directly to a node in the Lightning 3 Renderer. You can style and position Elements via _attributes_, much like you would do in plain HTML.
-
-Blits Elements have a specific set of attributes that can be used. The available attributes are loosely modeled after the properties of a Lightning 3 renderer node. In certain cases, Blits provides more developer friendly names or accepts a wider range of values, and transparently takes care of the translation into L3 renderer instructions.
-
-## Positioning and Dimensions
-
-In order to position and set the dimensions of an Element, the following attributes can be used.
-
-  - `x` - the x position of the Element in pixels, relative to its parent - allows negative values and decimals
-  - `y` - the y position of the Element in pixels, relative to its parent - allows negative values and decimals
-  - `z` - the z index of the element (optionally `zIndex` can be used as an alias)
-  - `w` - the width of the element in pixels (optionally `width` can be used as an alias)
-  - `h` - the height of the element in pixels (optionally `height` can be used as an alias)
-
-All positioning and dimension related attributes, when not specified, will default to `0`.
-
-```xml
-<Element x="100" y="100" w="800" h="400">
-  <Element x="40" y="80" w="300" h="300" z="10" />
-  <Element x="60" y="120" w="200" h="200" z="0" />
-</Element>
-```
-
-### Using percentages
-
-Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _percentages_ for the positioning and dimensions attributes.
-
-```xml
-<Element w="400" h="100" x="800" y="900" color="#0284c7">
-  <Element w="42%" h="30%" y="5%" x="1%" color="#075985" />
-</Element>
-```
-
-The percentage value specified for `w` and `x` will be calculated as the percentage of the _width_ (`w`) of the parent element.
-And the percentage specified for `h` and `y` will use the _height_ (`h`) of the parent element as the base of the percentage calculation.
-
-### Predefined placement options
-
-In addition to the absolute positions that Blits and Lightning use, there are a few predefined placement options available. By adding the `placement`-attribute to an Element we can easily align it to the _center_, _left_, _right_, _top_, _bottom_, or even a combination like `{y: 'middle', x: 'left'}`, without having to calculate the positions yourself.
-
-
-On the `x`-axis the following _placement_ options can be used: `left` (default), `center` and `right`. On the `y`-axis the _placement_ attribute accepts `top` (default), `middle` and `bottom`.
-
-The _placement_ attribute also accepts an object with an `x` and a `y` key, to specify a placement for both axes.
-
-The placement of an Element is calculated based on the dimensions of its direct parent. This means that the containing Element _must_ have its own dimensions (i.e. a `w` and a `h` attribute).
-
-```xml
-<Element w="300" h="300">
-  <!-- x placement -->
-  <Element w="40" h="40" placement="left" color="#818cf8" />
-  <Element w="40" h="40" placement="center" color="#2563eb" />
-  <Element w="40" h="40" placement="right" color="#1e40af" />
-
-  <!-- y placement -->
-  <Element w="40" h="40" x="54" placement="top" color="#f472b6" />
-  <Element w="40" h="40" x="54" placement="middle" color="#db2777" />
-  <Element w="40" h="40" x="54" placement="bottom" color="#be185d" />
-
-  <!-- x/y placement -->
-  <Element w="40" h="40" placement="{x: 'center', y: 'bottom'}" color="#a3e635" />
-  <Element w="40" h="40" placement="{x: 'right', y: 'middle'}" color="#65a30d" />
-  <Element w="40" h="40" placement="{x: 'center', y: 'middle'}" color="#4d7c0f" />
-</Element>
-```
-
-> note: the `x` or `y` attributes on the Element are ignored for those axes defined in the `placement`-attribute
-
-## Colors
-
-By default, Elements have a transparent background color. The `color` attribute can be used to give an Element a color.
-
-If you are familiar with Lightning 2: colors have gotten a lot easier with Blits. Under the hood, the Lightning 3 renderer still uses the somewhat unfamiliar (but efficient) `0xffc0ffee` syntax. In Blits, you can specify colors as you are used to in HTML and CSS.
-
-Blits accepts the following color formats and makes sure that they are converted in a way the Lightning 3 renderer can understand.
-
-- hexadecimal (i.e. `#ff4433`)
-- hexadecimal with an alpha channel (i.e `#55553380`)
-- hexadecimal shorthands (i.e. `#333`)
-- rgb (i.e. `rgb(180, 30, 50)`)
-- rgba (i.e `rgba(40, 30, 180, 0.5)`)
-- html color names (i.e. `red`, `blue`, `skyblue`, `tomato`)
-
-_HSL and HSLA formats are planned to be added in the future._
-
-```xml
-<Element w="200" h="200" color="#ff4433" />
-<Element w="200" h="200" color="#55553380" />
-<Element w="200" h="200" color="#333" />
-<Element w="200" h="200" color="rgb(180, 30, 50)" />
-<Element w="200" h="200" color="rgba(40, 30, 180, 0.5)" />
-<Element w="200" h="200" color="black" />
-<Element w="200" h="200" color="red" />
-<Element w="200" h="200" color="skyblue" />
-```
-
-### Basic linear gradients
-
-The color attribute can also be used to specify basic linear gradients.
-
-A linear gradient can be defined by specifying an _object literal_ as the `color` attribute instead of a single color. The object can consist of a mix of `top`, `bottom`, `left`, `right` keys, with the color to use for that side as a value. If a specific side isn't specified, it defaults to `transparent`.
-
-Again, you can use "normal" notation for the colors (like hexadecimal or rgba) and you are free to mix and match formats.
-
-```xml
-<Element w="200" h="200" color="{top: 'red', bottom: 'blue'}" />
-<Element w="200" h="200" color="{left: 'rgba(255,255,255,.5)', right: '#000'}" />
-<Element w="200" h="200" color="{left: '#aaa333', top: 'aqua', 'bottom: rgb(255,100,20)'}" />
-<Element w="200" h="200" color="{bottom: 'black'}" />
-```
-
-## Alpha and visibility
-
-The opacity of an Element can be controlled by setting the `alpha` attribute. This attribute accepts a value between `0` (fully transparent) and `1` (completely visible).
-
-The value of alpha is also applied recursively to the children of the Element that has its alpha set. If you just want the background color of an Element to be semi-transparent, you should set the alpha channel in the `color` instead of applying the `alpha` attribute.
-
-```xml
-  <Element w="200" h="200" color="blue" alpha="0.8">
-    <Element w="100" h="100" color="red" alpha="0.3" />
-  </Element>
-```
-
-## Rotation and scaling
-
-If you want to rotate an Element, you can use the `rotation` attribute. The rotation attribute in Blits accepts values in _degrees_.
-
-The rotation of an Element is also automatically applied to any children down the tree.
-
-```xml
-<Element w="200" h="200" color="blue" rotation="90">
-  <Element w="100" h="100" color="red" rotation="240" />
-</Element>
-```
-
-For scaling an Element the `scale` attribute is used.
-
-This attribute either accepts a single numeric value for scaling evenly across width and height. Or an _object literal_, if you want to apply a different scaling for the `x` and the `y` axis.
-
-The value should be higher than `0` and the default value is `1`, which means no scaling.
-
-Any value below `1` will scale _down_ the element and values greater than `1` will scale the element _up_.
-
-Similar to rotation, scale is also applied recursively to children down the tree of the Element that has its `scale` attribute set.
-
-```xml
-<Element w="200" h="200" color="blue" scale="0.5" />
-<Element w="200" h="200" color="#000" scale="2.3" />
-<Element w="200" h="200" color="#000" scale="{x: 1, y: 3.14}" />
-```
-
-## Mounting point
-
-For advanced positioning, the `mount` attribute can come in handy. By default when you set the `x` and `y` position of an Element, the _top-left_ corner will be set to that position. But in some cases, you may want to align the position starting at a different corner, or even any arbitrary point in between.
-
-The `mount` attribute accepts an _object literal_ that allows you to precisely control the mount position on the _x-axis_ and the mount position on the _y-axis_. The default value is `{x: 0, y: 0}`, which refers to the _top-left_ corner.
-
-In order to align the position starting at the _bottom-right_ corner, we would set `mount` to `{x: 1, y: 1}` and `{x: 0.5, y: 0.5}` would align the position at the _center_ of the Element.
-
-If you omit either the `x` or the `y` key from the _object literal_, its value will default to `0`.
-
-In the case where the `x` and `y` values are the same (i.e. centering with `{x: 0.5, y: 0.5}`), you can also just supply a single value (`mount="0.5"`) instead of the object literal notation.
-
-```xml
-<Element w="200" h="200" x="20" y="100" color="#333" mount="{x: 0.5, y: 0.8}" />
-<Element w="200" h="200" x="800" y="400" color="#333" mount="{y: 1}" />
-<Element w="200" h="200" x="800" y="700" color="#333" mount="0.5" />
-```
-
-## Pivot point
-
-The pivot point of an Element comes into play when it's rotated or scaled. The pivot point defaults to the _center_ of the Element, which means that when setting `rotation` it rotates around the middle. And when the Element is scaled it scales from the center out.
-
-But sometimes you may want to rotate around the left corner, or scale from the right side out. This can be controlled by adding the `pivot` attribute to the Element and, similar to the `mount` attribute, specify an _object literal_ with an `x` and a `y` key.
-
-Both `y` and `x` values should be anything between `0` and `1`, where `{x: 0, y: 0}` sets the pivot point to the _top-left_ corner and `{x: 1, y: 1}` refers to the _bottom-right_ corner. The default pivot value is `{x: 0.5, y: 0.5}` (i.e. the center) and if you omit `x` or `y` in your pivot object, it will default to `0.5`.
-
-In the case where the `x` and `y` values are the same, you can also just supply a single value (`pivot="0.9"`) instead of the object literal notation.
-
-
-```xml
-<Element w="200" h="200" x="20" y="100" pivot="{x: 0.5, y: 0.8}" rotation="69" />
-<Element w="200" h="200" x="800" y="400" pivot="{y: 1}" scale="3" />
-<Element w="200" h="200" x="800" y="700" pivot="0.9" rotation="42" />
-```
-
-## Clipping / overflow
-
-By default contents inside an Element (i.e. child Elements) will overflow the boundaries of the parent, even when you give the parent Element fixed dimensions.
-
-In order to contain / cut off the content inside an Element's `w` and `h`, you can add the `clipping="true"`-attribute. Setting `clipping` to `false` restores the default behaviour of content overflowing.
-
-Alternatively you can also use the `overflow`-attribute (and pass it `true` or `false`), which works similar to clipping just mapped inversly (i.e. `overflow="false"` ensures content that surpasses the parent dimensions is clipped-off).

package/docs/essentials/settings.md

@@ -1,117 +0,0 @@
-# Application Settings
-
-Blits provides a flexible and performant way to configure your application at launch using the settings object passed to `Blits.Launch`. These settings allow you to fine-tune rendering, performance, input, fonts, and more.
-
-Below is a comprehensive overview of the available settings you can provide to a Blits Application:
-
-## Basic Settings
-
-| Setting         | Type                | Description |
-|----------------|---------------------|-------------|
-| `w`            | `number`            | Width of the application (canvas) |
-| `h`            | `number`            | Height of the application (canvas) |
-| `debugLevel`   | `number \| string[]`| Debug level for console log messages |
-| `multithreaded`| `boolean`           | Enable multithreaded rendering |
-
-## Fonts & Text
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `fonts`        | `Font[]`  | Array of font objects to register |
-| `defaultFont`  | `string`  | Default font family to use |
-
-Example font object:
-```js
-{
-  family: 'lato',
-  type: 'msdf', // or 'web'
-  file: 'fonts/Lato-Regular.ttf',
-}
-```
-
-## Rendering & Performance
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `renderQuality` | `'low' \| 'medium' \| 'high' \| 'retina' \| number` | Controls render quality (1 = 100%) |
-| `screenResolution` | `'hd' \| 'fhd' \| '4k' \| number` | Sets device screen resolution |
-| `pixelRatio`    | `number`  | Custom pixel ratio (overrides screenResolution) |
-| `canvasColor`   | `string`  | Background color of the canvas |
-| `fpsInterval`   | `number`  | Interval (ms) for FPS updates (0 disables) |
-| `webWorkersLimit` | `number`| Max number of web workers for image handling |
-| `gpuMemory`     | `object`  | GPU memory management (see below) |
-| `gpuMemoryLimit`| `number`  | (Deprecated) Use `gpuMemory` instead |
-| `textureProcessingTimeLimit` | `number` | Max ms per frame for texture processing |
-| `viewportMargin`| `number \| [number,number,number,number]` | Extra margin for preloading elements |
-| `advanced`      | `object`  | Advanced renderer settings (use with care) |
-
-### GPU Memory Example
-```js
-{
-  max: 200, // MB
-  target: 0.8, // 80% of max
-  cleanupInterval: 5000, // ms
-  baseline: 25, // MB
-  strict: false
-}
-```
-
-## Input & Focus
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `keymap`       | `object`  | Custom key mapping for input events |
-| `holdTimeout`  | `number`  | Time (ms) to consider a key press as hold |
-
-## Renderer
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `renderMode`   | `'webgl' \| 'canvas'` | Renderer mode (default: 'webgl') |
-| `canvas`       | `HTMLCanvasElement` | Custom canvas to render to |
-
-## Effects & Shaders
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `effects`      | `ShaderEffect[]` | Effects for DynamicShader |
-| `shaders`      | `Shader[]` | Custom shaders |
-
-## Inspector & Debugging
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `inspector`    | `boolean` | Enable the inspector tool |
-
-## Accessibility
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `announcer`    | `boolean` | Enable/disable text-to-speech announcer |
-
-## Example Usage
-
-```js
-Blits.Launch(App, 'app', {
-  w: 1920,
-  h: 1080,
-  debugLevel: 1,
-  renderQuality: 'high',
-  fonts: [
-    { family: 'lato', type: 'msdf', file: 'fonts/Lato-Regular.ttf' },
-  ],
-  keymap: {
-    ArrowLeft: 'left',
-    ArrowRight: 'right',
-  },
-  gpuMemory: {
-    max: 200,
-    target: 0.8,
-    cleanupInterval: 5000,
-    baseline: 25,
-    strict: false,
-  },
-  inspector: false,
-  announcer: true,
-})
-```