@kitn.ai/ui 0.18.2 → 0.20.0

package/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 78 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 80 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -37,7 +37,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kai-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitn.ai/ui'`):
-All 78 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 80 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -99,7 +99,7 @@ For Tailwind builds: `@import "@kitn.ai/ui/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 78 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 80 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitn.ai/ui/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/ui/tree/main/examples
 - Storybook: https://storybook.kitn.dev
@@ -173,7 +173,7 @@ The same rule applies to every array/object property (`models`, `context`, `sugg
 
 ---
 
-## Element reference (78 elements, generated from custom-elements.json)
+## Element reference (80 elements, generated from custom-elements.json)
 
 Every element also accepts the `theme` attribute. Array/object properties are marked with a `—` attribute: they must be set as JS properties.
 
@@ -267,6 +267,42 @@ Every element also accepts the `theme` attribute. Array/object properties are ma
 
 ---
 
+### `kai-audio-visualizer` / `AudioVisualizer`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `variant` | `variant` | `undefined \| string` | Look to render: `bar` (default), `grid`, `radial`, `wave`, `aurora`, `custom`. `aura` is accepted as a LiveKit-markup alias for `aurora`. Attribute: `variant`. |
+| `state` | `state` | `undefined \| string` | `idle` (default), `connecting`, `listening`, `thinking`, `speaking`, `disconnected` (connection down: the dead, flat look). LiveKit's room-lifecycle state names are accepted as aliases. Attribute: `state`. |
+| `size` | `size` | `undefined \| string` | `icon` \| `sm` \| `md` (default) \| `lg` \| `xl`. Attribute: `size`. |
+| `barCount` | `bar-count` | `undefined \| number` | Bars to draw. Bar and radial only. Attribute: `bar-count`. |
+| `count` | `count` | `undefined \| number` | Grid only: rows and columns of the (always square) grid. Attribute: `count`. |
+| `radius` | `radius` | `undefined \| number` | Radial only: ring distance from center, in px. Attribute: `radius`. |
+| `spread` | `spread` | `undefined \| number` | Grid only: ring distance for the connecting animation, in cells. Attribute: `spread`. |
+| `interval` | `interval` | `undefined \| number` | Grid only: ms between scripted frames. Attribute: `interval`. |
+| `color` | `color` | `undefined \| string` | CSS color for the geometry, overriding the inherited `currentColor`. Attribute: `color`. |
+| `complexity` | `complexity` | `undefined \| number` | Shader variants only: pattern density, 0..1. Attribute: `complexity`. |
+| `label` | `label` | `undefined \| string` | Setting this makes the element an announced image (`role="img"`) instead of decorative (`aria-hidden`). Attribute: `label`. |
+| `stream` | — | `undefined \| MediaStream` | Live microphone or WebRTC audio to analyze. JS property only. |
+| `audioElement` | — | `undefined \| HTMLMediaElement` | An `<audio>` or `<video>` element to tap for its audio. JS property only. |
+| `bands` | — | `undefined \| number[]` | Pre-computed levels, 0..1. Set this and no AudioContext is ever built, which is what keeps headless/SSR rendering and browser-speech-synthesis playback (which exposes no audio node) free of Web Audio entirely. JS property only. A new array reference is required for each update; mutating the existing array in place will not re-render. |
+| `shader` | — | `undefined \| { fragment: string; uniforms?: undefined \| Record<string, { type: "1f" \| "1i" \| "1fv" \| "2f" \| "3f" \| "3fv" \| "4f" \| "4fv" \| "Matrix2fv" \| "Matrix3fv" \| "Matrix4fv"; value: number \| number[] }> }` | Custom fragment shader for `variant="custom"`. JS property only. |
+| `animateWhenNotVisible` | `animate-when-not-visible` | `undefined \| false \| true` | Shader variants only: keep animating while scrolled off screen. Off by default, which stops drawing and releases the WebGL context until the element comes back (browsers ration contexts to roughly 16 a page). Does not override `prefers-reduced-motion`. Attribute: `animate-when-not-visible`. |
+
+_No events._
+
+**Styleable parts** (restyle from outside via `kai-audio-visualizer::part(name)`):
+
+| Part | Description |
+|---|---|
+| `::part(bar)` | A single bar in the `bar` variant, or a single spoke in the `radial` variant. Also carries `data-kai-index` and `data-kai-highlighted` ("true"/"false") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector. — `kai-audio-visualizer::part(bar) { border-radius: 2px } kai-audio-visualizer::part(bar highlighted) { background: var(--brand) }` |
+| `::part(cell)` | A single dot in the `grid` variant. Also carries `data-kai-index` and `data-kai-highlighted` ("true"/"false") for use inside the shadow root; to style the lit state from OUTSIDE, combine with the `highlighted` part below rather than an attribute selector. — `kai-audio-visualizer::part(cell) { border-radius: 9999px } kai-audio-visualizer::part(cell highlighted) { background: var(--brand) }` |
+| `::part(highlighted)` | A second part TOKEN present on a `bar` or `cell` exactly when the sequencer or live audio has it lit, not a standalone styleable element. Combine it in the same `::part()` argument: `::part(bar highlighted)` or `::part(cell highlighted)`. This is the external equivalent of the internal `data-kai-highlighted="true"` attribute, which a `::part()` selector cannot reach (an attribute selector cannot follow a pseudo-element). — `kai-audio-visualizer::part(bar highlighted) { background: var(--brand) } kai-audio-visualizer::part(cell highlighted) { background: var(--brand) }` |
+| `::part(canvas)` | The WebGL canvas backing the `wave` and `aurora` variants. Restyle its size or radius, or layer a mask/filter, from outside. — `kai-audio-visualizer::part(canvas) { border-radius: 0.75rem }` |
+
+---
+
 ### `kai-avatar` / `Avatar`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
@@ -1487,6 +1523,7 @@ _No events._
 |---|---|---|---|
 | `orientation` | `orientation` | `undefined \| "vertical" \| "horizontal"` | Layout axis: `horizontal` (row, default) or `vertical` (column). |
 | `maximizedIndex` | — | `undefined \| null \| number` | Which item index is maximized (null = none). Declarative source of truth. |
+| `handle` | `handle` | `undefined \| "none" \| "line" \| "grip"` | Divider affordance drawn inside each draggable handle's 8px grab zone: - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag. - `grip` — a dotted grip handle. - `none` — no visible divider, just the invisible hit-area. The full grab zone and keyboard/ARIA behavior are identical for all three. |
 
 **Events** (non-bubbling `CustomEvent`s — listen directly on the element):
 
@@ -1963,6 +2000,35 @@ _No events._
 
 ---
 
+### `kai-thread` / `Thread`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `messages` | — | `undefined \| { id: string; role: "user" \| "assistant"; content: string; reasoning?: undefined \| { text: string; label?: undefined \| string }; tools?: undefined \| { type: string; state: "input-streaming" \| "input-available" \| "output-available" \| "output-error"; input?: undefined \| Record<string, unknown>; output?: undefined \| Record<string, unknown>; toolCallId?: undefined \| string; errorText?: undefined \| string }[]; attachments?: undefined \| { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[]; actions?: undefined \| ("copy" \| "like" \| "dislike" \| "regenerate" \| "edit" \| { id: string; label: string; icon?: undefined \| string; tooltip?: undefined \| string })[]; avatar?: undefined \| { src?: undefined \| string; fallback?: undefined \| string; alt?: undefined \| string }; feedback?: undefined \| "like" \| "dislike" }[]` | The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions/avatar. Set as a JS property (`el.messages = [...]`); a NEW array reference per streaming chunk re-renders (mutating in place does not). |
+| `loading` | `loading` | `undefined \| false \| true` | Show a typing indicator on the pending assistant turn — set while awaiting the assistant's reply. |
+| `proseSize` | `prose-size` | `undefined \| "sm" \| "lg" \| "xs" \| "base"` | Body/prose font scale for rendered markdown (`'xs' \| 'sm' \| 'base' \| 'lg'`). Defaults to `'sm'`. |
+| `codeTheme` | `code-theme` | `undefined \| string` | Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`). |
+| `codeHighlight` | `code-highlight` | `undefined \| false \| true` | Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true. |
+| `actionsReveal` | `actions-reveal` | `undefined \| "always" \| "hover"` | Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`). |
+| `scrollButton` | `scroll-button` | `undefined \| false \| true` | Show the scroll-to-bottom button inside the scroll area. Default true. |
+| `class` | `class` | `undefined \| string` | Extra classes applied to the thread's inner root. |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `kai-message-action` | `CustomEvent<{ messageId: string; action: string; state?: undefined \| "on" \| "off" }>` | A message's action button was clicked. `action` is the built-in name (`copy` / `like` / `dislike` / `regenerate` / `edit`) or a custom id. `state` is present only for the toggleable feedback votes: `'on'` when a like/dislike is set, `'off'` when re-tapped to clear. |
+
+**Slots** (project your own markup via `slot="name"` on a light-DOM child):
+
+| Slot | Mode | Description |
+|---|---|---|
+| `empty` | replace | Custom zero-state rendered in the message area while the thread is empty; replaces the built-in default. |
+
+---
+
 ### `kai-toast-region` / `ToastRegion`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):

package/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @kitn.ai/ui
 
-> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 78 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 80 custom elements, every one prefixed `kai-` (e.g. `<kai-chat>`, `<kai-artifact>`): streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -35,7 +35,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kai-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitn.ai/ui'`):
-All 78 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 80 elements are also exported individually. Use them for custom layouts or features `<kai-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -97,7 +97,7 @@ For Tailwind builds: `@import "@kitn.ai/ui/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 78 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 80 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitn.ai/ui/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/ui/tree/main/examples
 - Storybook: https://storybook.kitn.dev

package/package.json

@@ -1,13 +1,36 @@
 {
   "name": "@kitn.ai/ui",
-  "version": "0.18.2",
+  "version": "0.20.0",
   "nx": {
-    "name": "ui"
+    "name": "ui",
+    "targets": {
+      "build-storybook": {
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "dev": {
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:storybook": {
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:storybook:ci": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
   },
   "type": "module",
   "sideEffects": [
     "**/*.css",
     "./dist/kai.es.js",
+    "./dist/register-impl-*.js",
     "./dist/elements/*.js"
   ],
   "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
@@ -95,31 +118,33 @@
     "frameworks",
     "theme.css",
     "llms.txt",
-    "llms-full.txt"
+    "llms-full.txt",
+    "NOTICE"
   ],
   "scripts": {
     "prepublishOnly": "npm run build",
     "prebuild": "npm run build:css",
-    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts && vite build --config vite.config.react.ts && vite build --config vite.config.barrel.ts && vite build --config vite.config.state.ts && vite build --config vite.config.mcp.ts && npm run build:elements && node scripts/verify-elements-bundle.mjs && node scripts/verify-react-wrappers.mjs",
+    "build": "vite build --config vite.config.ts && vite build --config vite.config.provider.ts && vite build --config vite.config.react.ts && vite build --config vite.config.barrel.ts && vite build --config vite.config.state.ts && vite build --config vite.config.mcp.ts && npm run build:elements && node scripts/verify-elements-bundle.mjs && node scripts/verify-react-wrappers.mjs && node scripts/verify-shader-lazy.mjs",
     "build:elements": "node scripts/gen-elements-manifest.mjs && vite build --config vite.config.elements.ts && node scripts/gen-element-dts.mjs",
     "postbuild": "npm run build:theme && npm run build:api && npm run build:schemas",
     "build:theme": "node scripts/build-theme-tokens.mjs",
     "build:api": "node scripts/gen-element-api.mjs",
     "build:schemas": "node scripts/copy-card-schemas.mjs",
+    "verify:consumer": "node scripts/verify-consumer-sideeffects.mjs",
     "test": "vitest run",
     "test:react": "vitest run --config vitest.react.config.ts",
     "test:storybook": "vitest run --project=storybook",
     "test:storybook:ci": "node scripts/run-storybook-tests.mjs",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.react.json && tsc --noEmit -p tsconfig.react.test.json && tsc --noEmit -p tsconfig.mcp.json",
-    "examples": "echo 'Serving repo root on http://localhost:8000 — open http://localhost:8000/examples/composable/index.html' && python3 -m http.server 8000",
+    "examples": "echo 'Serving repo root on http://localhost:8000 — open http://localhost:8000/examples/demos/composable/index.html' && python3 -m http.server 8000",
     "dev": "npm run build:css && storybook dev -p 6006",
     "storybook": "npm run build:css && storybook dev -p 6006",
     "build-storybook": "npm run build:css && storybook build",
     "build:css": "tailwindcss -i src/elements/styles.css -o src/elements/compiled.css --minify",
     "build:css:watch": "tailwindcss -i src/elements/styles.css -o src/elements/compiled.css --watch",
-    "dev:provider": "vite ../../examples/remote-provider --port 6007 --strictPort",
-    "dev:host": "vite ../../examples/remote-host --port 6006 --strictPort",
+    "dev:provider": "vite ../../examples/internal/remote-provider --port 6007 --strictPort",
+    "dev:host": "vite ../../examples/internal/remote-host --port 6006 --strictPort",
     "test:e2e": "playwright test",
     "test:composer-ivp": "playwright test --config playwright.composer.config.ts",
     "test:slots-ivp": "playwright test --config playwright.slots.config.ts",

package/src/components/audio-visualizer/audio-visualizer.voice-fixture.ts

@@ -0,0 +1,257 @@
+/**
+ * A real recorded voice, baked into a short seamless loop for the
+ * `speaking` tiles in the stories -- the genuine article, not a generator.
+ *
+ * Real voice, recorded by the project owner: "This is a test, testing one
+ * two three, hello world." Captured mono at 44.1kHz, then extracted through
+ * the component's ALIGNED analysis chain -- the same values upstream
+ * LiveKit's components run: AnalyserNode fftSize 2048 / smoothing 0.8,
+ * window bins 100-200 (the components' own loPass/hiPass; see DEFAULTS in
+ * primitives/use-audio-analysis.ts), `reduceToBands`' linear-proportional
+ * split as it exists in THIS tree, ~32ms cadence. Third bake of this
+ * fixture: the first was 5 linear bands over a wide raw-mic window
+ * (bins 4-120), the second 3 geometric bands over the same wide window;
+ * both predate the pipeline realignment that reverted window and split to
+ * upstream's.
+ *
+ * GAIN: the raw take is boosted 8x (+18dB) through a GainNode before the
+ * analysers -- an honest approximation of capture-side AGC, which every
+ * real input to the aligned window gets (LiveKit captures local mics with
+ * autoGainControl on; the mic stories request the same) but this recording,
+ * made raw, never had. Un-gained, quiet natural-volume speech sits at or
+ * under the -100dB floor across bins 100-200 and the loop's time-averaged
+ * band profile comes out flat-to-inverted (edges louder than centre);
+ * measured at +18dB the bake hits the live-AGC targets: speech-active
+ * volume through the aligned byte path (minDecibels -100 / maxDecibels
+ * -80) averages 0.73, no speech frame reads all-zero bands, and the
+ * time-averaged mirrored md profile is centre-strictly-max --
+ * [0.41, 0.42, 0.44, 0.42, 0.41]. The trade, recorded honestly: +18dB also
+ * lifts part of the room tone over the floor, so rest frames idle near
+ * [0.2, 0.04, 0] instead of the exact zeros an un-gained bake would show
+ * -- which is also what a real AGC mic does between words.
+ *
+ * 3 bands per frame is HALF width on purpose: `Math.ceil(count / 2)`, the
+ * exact band count the component itself requests at `md` before mirroring
+ * (see `bandCount()` in index.tsx). The `bands` prop is a raw passthrough
+ * by contract, so the stories mirror these half bands out to the full
+ * element count themselves through `mirrorBandsCenterOut` /
+ * `mirrorBandsAroundRing` -- the same primitives the live-audio path runs.
+ * See `useVoiceBands` in the stories file.
+ *
+ * Trimmed to the same 196-frame window (~6.4s) as the previous bake:
+ * about half a second of rest before the first word, just under a second
+ * after the last, and BOTH natural pauses in the middle -- one short gap
+ * around "test," / "testing", the longer one after "three," before
+ * "hello" -- since those are what prove the visualizer falls back to rest
+ * and recovers. Loops by wrapping frame 195 back to frame 0. Re-verified
+ * at the aligned values: the endpoints differ by 0.034 pre-quantization
+ * ([0.22,0.05,0] vs [0.2,0.03,0] after it), which sits between the median
+ * (0.025) and p90 (0.053) of ADJACENT quiet frames' natural motion at this
+ * gain -- the wrap step is indistinguishable from ordinary idle flicker.
+ * (The previous bake's endpoints quantized identical, but only because its
+ * un-gained rest frames were all zeros -- trivial, not preserved here.)
+ *
+ * Quantized to 2 decimals. Playback treats the cadence as a flat
+ * `VOICE_FRAME_MS`; the capture's real ticks land at 32-33ms (setTimeout
+ * jitter), a ~2% difference nobody can see. Body is ~3.8KB.
+ */
+export const VOICE_FRAME_MS = 32;
+
+export const VOICE_BANDS: readonly (readonly number[])[] = [
+  [0.22,0.05,0],
+  [0.21,0.04,0],
+  [0.2,0.04,0],
+  [0.22,0.03,0],
+  [0.23,0.03,0],
+  [0.22,0.02,0],
+  [0.21,0.02,0],
+  [0.22,0.02,0],
+  [0.22,0.11,0.01],
+  [0.22,0.14,0.02],
+  [0.23,0.13,0.01],
+  [0.45,0.45,0.57],
+  [0.52,0.52,0.61],
+  [0.62,0.61,0.64],
+  [0.64,0.62,0.65],
+  [0.64,0.63,0.65],
+  [0.63,0.63,0.66],
+  [0.62,0.62,0.65],
+  [0.61,0.61,0.65],
+  [0.61,0.61,0.65],
+  [0.65,0.63,0.67],
+  [0.67,0.63,0.67],
+  [0.66,0.62,0.66],
+  [0.65,0.61,0.65],
+  [0.64,0.59,0.64],
+  [0.63,0.58,0.62],
+  [0.62,0.59,0.61],
+  [0.61,0.61,0.6],
+  [0.62,0.62,0.59],
+  [0.61,0.62,0.59],
+  [0.59,0.61,0.57],
+  [0.59,0.61,0.59],
+  [0.59,0.62,0.64],
+  [0.59,0.62,0.66],
+  [0.61,0.62,0.66],
+  [0.61,0.61,0.65],
+  [0.61,0.6,0.64],
+  [0.6,0.59,0.63],
+  [0.59,0.57,0.62],
+  [0.58,0.56,0.6],
+  [0.61,0.59,0.6],
+  [0.62,0.59,0.6],
+  [0.61,0.58,0.58],
+  [0.59,0.57,0.57],
+  [0.58,0.56,0.55],
+  [0.6,0.57,0.56],
+  [0.62,0.58,0.56],
+  [0.63,0.58,0.57],
+  [0.64,0.58,0.56],
+  [0.64,0.58,0.55],
+  [0.63,0.57,0.54],
+  [0.63,0.56,0.54],
+  [0.62,0.54,0.52],
+  [0.61,0.53,0.51],
+  [0.59,0.51,0.49],
+  [0.58,0.49,0.47],
+  [0.56,0.47,0.45],
+  [0.54,0.46,0.43],
+  [0.53,0.48,0.42],
+  [0.52,0.47,0.4],
+  [0.5,0.45,0.37],
+  [0.48,0.43,0.35],
+  [0.46,0.41,0.32],
+  [0.45,0.39,0.3],
+  [0.43,0.37,0.26],
+  [0.41,0.35,0.23],
+  [0.4,0.34,0.22],
+  [0.38,0.33,0.18],
+  [0.37,0.31,0.16],
+  [0.38,0.32,0.21],
+  [0.37,0.31,0.19],
+  [0.36,0.28,0.16],
+  [0.46,0.41,0.37],
+  [0.5,0.49,0.52],
+  [0.51,0.53,0.58],
+  [0.51,0.54,0.6],
+  [0.51,0.55,0.62],
+  [0.52,0.56,0.63],
+  [0.51,0.56,0.63],
+  [0.51,0.56,0.63],
+  [0.5,0.56,0.64],
+  [0.51,0.56,0.64],
+  [0.53,0.59,0.64],
+  [0.55,0.6,0.64],
+  [0.55,0.6,0.63],
+  [0.53,0.58,0.61],
+  [0.54,0.59,0.62],
+  [0.56,0.59,0.65],
+  [0.61,0.63,0.68],
+  [0.63,0.64,0.69],
+  [0.63,0.65,0.68],
+  [0.63,0.64,0.67],
+  [0.62,0.63,0.66],
+  [0.61,0.61,0.65],
+  [0.6,0.61,0.65],
+  [0.59,0.6,0.65],
+  [0.58,0.59,0.66],
+  [0.56,0.58,0.65],
+  [0.55,0.57,0.64],
+  [0.54,0.58,0.65],
+  [0.54,0.57,0.65],
+  [0.53,0.56,0.64],
+  [0.52,0.54,0.62],
+  [0.5,0.52,0.61],
+  [0.48,0.51,0.59],
+  [0.47,0.49,0.58],
+  [0.46,0.47,0.56],
+  [0.44,0.46,0.55],
+  [0.42,0.44,0.53],
+  [0.4,0.41,0.51],
+  [0.39,0.39,0.49],
+  [0.37,0.37,0.47],
+  [0.36,0.35,0.45],
+  [0.34,0.34,0.43],
+  [0.36,0.37,0.42],
+  [0.35,0.37,0.4],
+  [0.33,0.35,0.38],
+  [0.32,0.33,0.36],
+  [0.3,0.3,0.33],
+  [0.29,0.28,0.31],
+  [0.27,0.26,0.28],
+  [0.26,0.24,0.26],
+  [0.25,0.21,0.22],
+  [0.24,0.19,0.19],
+  [0.25,0.23,0.21],
+  [0.35,0.38,0.36],
+  [0.39,0.5,0.46],
+  [0.39,0.52,0.48],
+  [0.4,0.53,0.49],
+  [0.47,0.6,0.55],
+  [0.52,0.62,0.58],
+  [0.55,0.63,0.58],
+  [0.56,0.63,0.58],
+  [0.54,0.62,0.57],
+  [0.53,0.6,0.55],
+  [0.52,0.59,0.54],
+  [0.5,0.57,0.52],
+  [0.49,0.56,0.5],
+  [0.47,0.55,0.49],
+  [0.46,0.53,0.47],
+  [0.44,0.52,0.45],
+  [0.43,0.51,0.46],
+  [0.51,0.54,0.54],
+  [0.54,0.55,0.55],
+  [0.53,0.56,0.54],
+  [0.52,0.57,0.54],
+  [0.51,0.57,0.53],
+  [0.53,0.59,0.56],
+  [0.52,0.58,0.56],
+  [0.51,0.57,0.55],
+  [0.49,0.55,0.54],
+  [0.48,0.54,0.52],
+  [0.46,0.52,0.51],
+  [0.44,0.5,0.49],
+  [0.43,0.49,0.47],
+  [0.41,0.47,0.45],
+  [0.39,0.46,0.43],
+  [0.37,0.44,0.41],
+  [0.36,0.42,0.39],
+  [0.34,0.4,0.36],
+  [0.32,0.37,0.34],
+  [0.31,0.35,0.32],
+  [0.3,0.33,0.29],
+  [0.28,0.31,0.26],
+  [0.27,0.29,0.23],
+  [0.27,0.27,0.22],
+  [0.26,0.25,0.18],
+  [0.25,0.23,0.15],
+  [0.24,0.2,0.13],
+  [0.23,0.18,0.09],
+  [0.23,0.16,0.07],
+  [0.23,0.14,0.04],
+  [0.22,0.11,0.03],
+  [0.22,0.09,0.02],
+  [0.2,0.07,0.01],
+  [0.2,0.04,0.01],
+  [0.18,0.03,0.01],
+  [0.18,0.02,0.01],
+  [0.19,0.02,0],
+  [0.19,0.01,0],
+  [0.19,0.01,0],
+  [0.17,0.01,0],
+  [0.19,0.01,0],
+  [0.18,0.07,0],
+  [0.21,0.06,0],
+  [0.21,0.06,0],
+  [0.22,0.05,0],
+  [0.2,0.03,0],
+  [0.2,0.02,0],
+  [0.19,0.01,0],
+  [0.19,0.01,0],
+  [0.2,0.01,0],
+  [0.2,0,0],
+  [0.19,0,0],
+  [0.18,0,0],
+  [0.2,0.03,0],
+];