npm - tweak-ui - Versions diffs - 0.4.3 → 0.5.0 - Mend

tweak-ui 0.4.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

package/LICENSE +7 -7
package/README.md +32 -32
package/dist/lib/builder.d.ts +166 -162
package/dist/lib/builder.d.ts.map +1 -1
package/dist/lib/builder.js +250 -0
package/dist/lib/builder.js.map +1 -0
package/dist/lib/color-formats/array-format.d.ts +8 -8
package/dist/lib/color-formats/array-format.js +18 -0
package/dist/lib/color-formats/array-format.js.map +1 -0
package/dist/lib/color-formats/converter.d.ts +18 -18
package/dist/lib/color-formats/converter.js +85 -0
package/dist/lib/color-formats/converter.js.map +1 -0
package/dist/lib/color-formats/css-string-format.d.ts +7 -7
package/dist/lib/color-formats/css-string-format.js +28 -0
package/dist/lib/color-formats/css-string-format.js.map +1 -0
package/dist/lib/color-formats/formatter.d.ts +8 -8
package/dist/lib/color-formats/formatter.js +35 -0
package/dist/lib/color-formats/formatter.js.map +1 -0
package/dist/lib/color-formats/hex-string-format.d.ts +7 -7
package/dist/lib/color-formats/hex-string-format.js +28 -0
package/dist/lib/color-formats/hex-string-format.js.map +1 -0
package/dist/lib/color-formats/index.d.ts +3 -3
package/dist/lib/color-formats/index.js +4 -0
package/dist/lib/color-formats/index.js.map +1 -0
package/dist/lib/color-formats/number-format.d.ts +8 -8
package/dist/lib/color-formats/number-format.js +23 -0
package/dist/lib/color-formats/number-format.js.map +1 -0
package/dist/lib/color-formats/object-format.d.ts +14 -14
package/dist/lib/color-formats/object-format.js +23 -0
package/dist/lib/color-formats/object-format.js.map +1 -0
package/dist/lib/color-formats/types.d.ts +101 -101
package/dist/lib/color-formats/types.js +2 -0
package/dist/lib/color-formats/types.js.map +1 -0
package/dist/lib/components/button.d.ts +28 -28
package/dist/lib/components/button.d.ts.map +1 -1
package/dist/lib/components/button.js +15 -0
package/dist/lib/components/button.js.map +1 -0
package/dist/lib/components/content.d.ts +21 -21
package/dist/lib/components/content.d.ts.map +1 -1
package/dist/lib/components/content.js +10 -0
package/dist/lib/components/content.js.map +1 -0
package/dist/lib/components/controls/angle.d.ts +51 -51
package/dist/lib/components/controls/angle.d.ts.map +1 -1
package/dist/lib/components/controls/angle.js +201 -0
package/dist/lib/components/controls/angle.js.map +1 -0
package/dist/lib/components/controls/checkbox.d.ts +28 -28
package/dist/lib/components/controls/checkbox.d.ts.map +1 -1
package/dist/lib/components/controls/checkbox.js +31 -0
package/dist/lib/components/controls/checkbox.js.map +1 -0
package/dist/lib/components/controls/color-picker.d.ts +56 -56
package/dist/lib/components/controls/color-picker.d.ts.map +1 -1
package/dist/lib/components/controls/color-picker.js +267 -0
package/dist/lib/components/controls/color-picker.js.map +1 -0
package/dist/lib/components/controls/color.d.ts +51 -51
package/dist/lib/components/controls/color.d.ts.map +1 -1
package/dist/lib/components/controls/color.js +77 -0
package/dist/lib/components/controls/color.js.map +1 -0
package/dist/lib/components/controls/index.d.ts +10 -10
package/dist/lib/components/controls/index.js +11 -0
package/dist/lib/components/controls/index.js.map +1 -0
package/dist/lib/components/controls/number.d.ts +47 -47
package/dist/lib/components/controls/number.d.ts.map +1 -1
package/dist/lib/components/controls/number.js +142 -0
package/dist/lib/components/controls/number.js.map +1 -0
package/dist/lib/components/controls/point.d.ts +47 -47
package/dist/lib/components/controls/point.d.ts.map +1 -1
package/dist/lib/components/controls/point.js +137 -0
package/dist/lib/components/controls/point.js.map +1 -0
package/dist/lib/components/controls/position.d.ts +55 -55
package/dist/lib/components/controls/position.d.ts.map +1 -1
package/dist/lib/components/controls/position.js +36 -0
package/dist/lib/components/controls/position.js.map +1 -0
package/dist/lib/components/controls/select.d.ts +59 -59
package/dist/lib/components/controls/select.d.ts.map +1 -1
package/dist/lib/components/controls/select.js +132 -0
package/dist/lib/components/controls/select.js.map +1 -0
package/dist/lib/components/controls/spherical.d.ts +74 -74
package/dist/lib/components/controls/spherical.d.ts.map +1 -1
package/dist/lib/components/controls/spherical.js +302 -0
package/dist/lib/components/controls/spherical.js.map +1 -0
package/dist/lib/components/controls/text.d.ts +35 -35
package/dist/lib/components/controls/text.d.ts.map +1 -1
package/dist/lib/components/controls/text.js +24 -0
package/dist/lib/components/controls/text.js.map +1 -0
package/dist/lib/components/groups/accordion.d.ts +21 -21
package/dist/lib/components/groups/accordion.d.ts.map +1 -1
package/dist/lib/components/groups/accordion.js +34 -0
package/dist/lib/components/groups/accordion.js.map +1 -0
package/dist/lib/components/groups/container.d.ts +24 -24
package/dist/lib/components/groups/container.d.ts.map +1 -1
package/dist/lib/components/groups/container.js +19 -0
package/dist/lib/components/groups/container.js.map +1 -0
package/dist/lib/components/groups/group.d.ts +48 -48
package/dist/lib/components/groups/group.d.ts.map +1 -1
package/dist/lib/components/groups/group.js +50 -0
package/dist/lib/components/groups/group.js.map +1 -0
package/dist/lib/components/groups/index.d.ts +4 -4
package/dist/lib/components/groups/index.js +5 -0
package/dist/lib/components/groups/index.js.map +1 -0
package/dist/lib/components/groups/tabs.d.ts +21 -21
package/dist/lib/components/groups/tabs.d.ts.map +1 -1
package/dist/lib/components/groups/tabs.js +31 -0
package/dist/lib/components/groups/tabs.js.map +1 -0
package/dist/lib/components/image.d.ts +36 -36
package/dist/lib/components/image.d.ts.map +1 -1
package/dist/lib/components/image.js +46 -0
package/dist/lib/components/image.js.map +1 -0
package/dist/lib/components/index.d.ts +5 -5
package/dist/lib/components/index.js +6 -0
package/dist/lib/components/index.js.map +1 -0
package/dist/lib/core/index.d.ts +4 -4
package/dist/lib/core/index.js +5 -0
package/dist/lib/core/index.js.map +1 -0
package/dist/lib/core/registry.d.ts +17 -17
package/dist/lib/core/registry.js +30 -0
package/dist/lib/core/registry.js.map +1 -0
package/dist/lib/core/render.d.ts +9 -9
package/dist/lib/core/render.d.ts.map +1 -1
package/dist/lib/core/render.js +19 -0
package/dist/lib/core/render.js.map +1 -0
package/dist/lib/core/types.d.ts +87 -87
package/dist/lib/core/types.d.ts.map +1 -1
package/dist/lib/core/types.js +2 -0
package/dist/lib/core/types.js.map +1 -0
package/dist/lib/core/utils.d.ts +93 -93
package/dist/lib/core/utils.d.ts.map +1 -1
package/dist/lib/core/utils.js +193 -0
package/dist/lib/core/utils.js.map +1 -0
package/dist/lib/core/value-accessor.d.ts +17 -17
package/dist/lib/core/value-accessor.js +52 -0
package/dist/lib/core/value-accessor.js.map +1 -0
package/dist/lib/index.d.ts +21 -27
package/dist/lib/index.d.ts.map +1 -1
package/dist/lib/index.js +29 -0
package/dist/lib/index.js.map +1 -0
package/dist/lib/mount.d.ts +45 -45
package/dist/lib/mount.js +85 -0
package/dist/lib/mount.js.map +1 -0
package/dist/tweak-ui.css +133 -138
package/dist/tweak-ui.css.map +1 -1
package/dist/tweak-ui.min.css +1 -1
package/dist/tweak-ui.min.css.map +1 -1
package/dist/tweak-ui.module.js +2733 -2396
package/dist/tweak-ui.module.js.map +1 -1
package/dist/tweak-ui.umd.js +1 -4419
package/dist/tweak-ui.umd.js.map +1 -1
package/package.json +25 -42
package/dist/index.html +0 -1063
package/dist/lib/color-formats/array-format.spec.d.ts +0 -2
package/dist/lib/color-formats/array-format.spec.d.ts.map +0 -1
package/dist/lib/color-formats/converter.spec.d.ts +0 -2
package/dist/lib/color-formats/converter.spec.d.ts.map +0 -1
package/dist/lib/color-formats/css-string-format.spec.d.ts +0 -2
package/dist/lib/color-formats/css-string-format.spec.d.ts.map +0 -1
package/dist/lib/color-formats/formatter.spec.d.ts +0 -2
package/dist/lib/color-formats/formatter.spec.d.ts.map +0 -1
package/dist/lib/color-formats/hex-string-format.spec.d.ts +0 -2
package/dist/lib/color-formats/hex-string-format.spec.d.ts.map +0 -1
package/dist/lib/color-formats/number-format.spec.d.ts +0 -2
package/dist/lib/color-formats/number-format.spec.d.ts.map +0 -1
package/dist/lib/color-formats/object-format.spec.d.ts +0 -2
package/dist/lib/color-formats/object-format.spec.d.ts.map +0 -1
package/dist/scss/_style.scss +0 -120
package/dist/scss/_themes.scss +0 -23
package/dist/scss/_utils.scss +0 -24
package/dist/scss/_variables.scss +0 -30
package/dist/scss/controls/_angle.scss +0 -64
package/dist/scss/controls/_button.scss +0 -0
package/dist/scss/controls/_checkbox.scss +0 -19
package/dist/scss/controls/_color-picker.scss +0 -124
package/dist/scss/controls/_color.scss +0 -14
package/dist/scss/controls/_container.scss +0 -13
package/dist/scss/controls/_group.scss +0 -69
package/dist/scss/controls/_image.scss +0 -27
package/dist/scss/controls/_number.scss +0 -38
package/dist/scss/controls/_point.scss +0 -36
package/dist/scss/controls/_position.scss +0 -9
package/dist/scss/controls/_select.scss +0 -0
package/dist/scss/controls/_spherical.scss +0 -87
package/dist/scss/controls/_tabs.scss +0 -38
package/dist/scss/controls/_text.scss +0 -0
package/dist/scss/index.scss +0 -21
package/dist/tweak-ui.umd.min.js +0 -17
package/dist/tweak-ui.umd.min.js.map +0 -1

package/dist/index.html DELETED Viewed

@@ -1,1063 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta charset="utf-8">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="Tweak Ui">
-  <meta property="og:site_name" content="Tweak Ui">
-  <meta property="og:url" content="https://tweakui.ginie.eu/">
-  <meta property="og:description" content="a lightweight js library for building input controls with data binding">
-  <title>Tweak UI</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="https://unpkg.com/prismjs@1.16.0/themes/prism.css">
-  <script src="https://unpkg.com/prismjs@1.16.0/prism.js" type="text/javascript"></script>
-  <style>
-    pre[class*="language-"], .token {
-      margin: 0;
-      background: none !important;
-    }
-    .container-xxl > section {
-      padding-top: 56px;
-    }
-  </style>
-</head>
-<body data-bs-spy="scroll" data-bs-target="nav.navbar" data-bs-offset="56">
-  <div class="bg-dark text-light text-center p-4 mb-0">
-    <div class="container">
-      <h1 class="display-4">Tweak UI</h1>
-      <p class="lead">a lightweight js library for building input controls with data binding.</p>
-    </div>
-  </div>
-  <nav class="navbar navbar-expand navbar-dark bg-dark sticky-top" style="z-index: 1021;">
-    <div class="container-xxl"><a class="navbar-brand" href="#"></a>
-      <ul class="navbar-nav">
-        <li class="nav-item dropdown d-none d-sm-block"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">How to</a>
-          <ul class="dropdown-menu dropdown-menu-dark">
-            <li><a class="dropdown-item" href="#install-npm">Install (NPM)</a></li>
-            <li><a class="dropdown-item" href="#install-cdn">Install (CDN)</a></li>
-            <li><a class="dropdown-item" href="#usage">Usage</a></li>
-          </ul>
-        </li>
-        <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Components</a>
-          <ul class="dropdown-menu dropdown-menu-dark">
-            <li><a class="dropdown-item" href="#control-number">Number</a></li>
-            <li><a class="dropdown-item" href="#control-slider">Slider</a></li>
-            <li><a class="dropdown-item" href="#control-text">Text</a></li>
-            <li><a class="dropdown-item" href="#control-checkbox">Checkbox</a></li>
-            <li><a class="dropdown-item" href="#control-select">Select</a></li>
-            <li><a class="dropdown-item" href="#control-angle">Angle</a></li>
-            <li><a class="dropdown-item" href="#control-spherical">Spherical</a></li>
-            <li><a class="dropdown-item" href="#control-point">Point</a></li>
-            <li><a class="dropdown-item" href="#control-position">Position</a></li>
-            <li><a class="dropdown-item" href="#control-color">Color</a></li>
-            <li><a class="dropdown-item" href="#control-color-picker">Color picker</a></li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
-            <li><a class="dropdown-item" href="#control-button">Button</a></li>
-            <li><a class="dropdown-item" href="#control-image">Image</a></li>
-            <li><a class="dropdown-item" href="#control-content">Content</a></li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
-            <li><a class="dropdown-item" href="#control-group">Group</a></li>
-            <li><a class="dropdown-item" href="#control-tabs">Tabs</a></li>
-            <li><a class="dropdown-item" href="#control-accordion">Accordion</a></li>
-            <li><a class="dropdown-item" href="#control-container">Container</a></li>
-          </ul>
-        </li>
-        <li class="nav-item dropdown d-none d-sm-block"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Concepts</a>
-          <ul class="dropdown-menu dropdown-menu-dark">
-            <li><a class="dropdown-item" href="#concept-layout">Layout & Labels</a></li>
-            <li><a class="dropdown-item" href="#concept-input">Input Values</a></li>
-            <li><a class="dropdown-item" href="#concept-mithril">Mithril</a></li>
-            <li><a class="dropdown-item" href="#custom-controls">Custom controls</a></li>
-            <li><a class="dropdown-item" href="#custom-colors">Theme colors</a></li>
-          </ul>
-        </li>
-        <li class="nav-item"><a class="nav-link" href="#" onclick="openPlayground();">Playground</a></li>
-        <li class="nav-item"><a class="nav-link" href="https://github.com/giniedp/tweak-ui" target="_blank">Github</a></li>
-      </ul>
-    </div>
-  </nav>
-  <div class="container-xxl">
-    <section id="install-npm">
-      <h2>Installation (NPM)</h2>
-      <p>Install library from NPM</p>
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <button class="nav-link active" type="button" data-bs-toggle="tab" data-bs-target="#install-with-npm">NPM</button>
-        </li>
-        <li class="nav-item">
-          <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#install-with-yarn">Yarn</button>
-        </li>
-      </ul>
-      <div class="tab-content">
-        <div class="tab-pane fade active show" id="install-with-npm">
-          <pre class="language-shell"><code>$ npm install tweak-ui
-</code></pre>
-        </div>
-        <div class="tab-pane fade" id="install-with-yarn">
-          <pre class="language-shell"><code>$ yarn add tweak-ui
-</code></pre>
-        </div>
-      </div>
-      <p class="mt-3">Then import it in your source code</p>
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <button class="nav-link active" type="button" data-bs-toggle="tab" data-bs-target="#tab-import-es6">ES6</button>
-        </li>
-        <li class="nav-item">
-          <button class="nav-link" type="button" data-bs-toggle="tab" data-bs-target="#tab-import-require">require</button>
-        </li>
-      </ul>
-      <div class="tab-content">
-        <div class="tab-pane fade active show" id="tab-import-es6">
-          <pre class="language-javascript"><code>import * as TweakUi from "tweak-ui"
-</code></pre>
-        </div>
-        <div class="tab-pane fade" id="tab-import-require">
-          <pre class="language-javascript"><code>var TweakUi = require("tweak-ui")
-</code></pre>
-        </div>
-      </div>
-      <p class="mt-3"><span>The stylesheet is located at</span><br><code> node_modules/tweak-ui/tweak-ui.css</code></p>
-      <p class="mt-3"><span>If you are building a custom stylesheet then finde the</span><code> SCSS</code><span> files at</span><br><code> node_modules/tweak-ui/scss</code></p>
-    </section>
-    <section id="install-cdn">
-      <h2>Installation (CDN)</h2>
-      <p>Reference the library and style sheet</p>
-      <aside class="language-html">
-        <script src="https://unpkg.com/tweak-ui@x.x.x/dist/tweak-ui.umd.js"></script>
-        <link href="https://unpkg.com/tweak-ui@x.x.x/dist/tweak-ui.css" rel="stylesheet">
-      </aside>
-      <p class="mt-3">Then in your javascript simply use the<code> TweakUI</code> global</p>
-    </section>
-    <section id="install-cdn">
-      <h2>Usage</h2>
-      <p class="mt-3">Create an HTML container where Tweak UI should render.</p>
-      <aside class="language-html">
-        <div class="my-element"></div>
-      </aside>
-      <p class="mt-3">Mount the controls. Either by using a builder function</p>
-      <pre class="language-javascript"><code>TweakUi.mount(".my-element", (b) => {
-  // ... builder function
-})
-</code></pre>
-      <p class="mt-3">or an array of control definitions</p>
-      <pre class="language-javascript"><code>TweakUi.mount(".my-element", [
-  // ... array of control definitions
-])
-</code></pre>
-      <p class="mt-3">or a single control definition</p>
-      <pre class="language-javascript"><code>TweakUi.mount(".my-element", {
-  // ... control definition
-})</code></pre>
-    </section>
-    <h2 id="controls">Controls</h2>
-    <section id="control-number">
-      <h3>Number</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-number-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { a: 10, b: 5 }
-            TweakUi.mount("#example-number-1", (ui) => {
-              ui.number(context, 'a')
-              ui.number(context, 'b', { min: 1, max: 100, step: 0.5 })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-slider">
-      <h3>Slider</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-slider-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { a: 10, b: 5 }
-            TweakUi.mount("#example-slider-1", (ui) => {
-              ui.slider(context, 'a', { min: 1, max: 100, step: 0.5 })
-              ui.slider(context, 'b', { min: 1, max: 100, step: 0.5 })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-text">
-      <h3>Text</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-text-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: 'Helloo World' }
-            TweakUi.mount("#example-text-1", (ui) => {
-              ui.text(context, 'value', {
-                label: "Text",
-                onInput: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-checkbox">
-      <h3>Checkbox</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-checkbox"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: true }
-            TweakUi.mount("#example-checkbox", (ui) => {
-              ui.checkbox({ value: true, onChange: console.log })
-              ui.checkbox(context, 'value')
-              ui.checkbox(context, 'value', { label: 'Label' })
-              ui.checkbox(context, 'value', { label: '' })
-              ui.checkbox(context, 'value', { label: null, text: 'Annotation' })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-select">
-      <h3>Select</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-select-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-select-1", [{
-              type: "select",
-              label: "Array",
-              value: "foo",
-              options: ["foo", "bar", "baz", { label: "a label", value: {} }],
-              onInput: console.log
-            }, {
-              type: "select",
-              label: "Key Value",
-              value: "foo",
-              options: { Foo: "foo", Bar: "bar", Baz: "baz", "A Label": {} },
-              onInput: console.log
-            }])
-          </script>
-        </div>
-      </div>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-select-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-select-2", [{
-              type: "select",
-              label: "Key Value",
-              value: "foo",
-              options: { Foo: "foo", Bar: "bar", Baz: "baz", "A Label": {} },
-              onInput: console.log
-            }])
-          </script>
-        </div>
-      </div>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-select-3"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-select-3", [{
-              type: "select",
-              label: "Groups",
-              value: "foo",
-              options: [{
-                label: "Group 1",
-                options: { Foo: "foo", Bar: "bar", Baz: "baz" }
-              }, {
-                label: "Group 2",
-                options: [0, 1, 2, 3]
-              }, {
-                label: "Group 3",
-                options: ["A", "B", "C"]
-              }, {
-                label: "Group 4",
-                options: [
-                  { label: "X", value: { foo: "x" } },
-                  { label: "Y", value: { foo: "y" } },
-                  { label: "Z", value: { foo: "z" }, disabled: true }
-                ]
-              }],
-              onInput: console.log
-            }])
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-angle">
-      <h3>Angle</h3>
-      <p></p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-angle-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: 0 }
-            TweakUi.mount("#example-angle-1", (ui) => {
-              ui.angle(context, 'value')
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-spherical">
-      <h3>Spherical</h3>
-      <p>an object with spherical coordinates</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-spherical-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: { phi: 0, theta: 0 } }
-            TweakUi.mount("#example-spherical-1", (ui) => {
-              ui.spherical(context, 'value', {
-                label: 'Spherical',
-                // degree: true,
-                onInput: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>use a codec to map into 3d vector</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-spherical-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: [0, 0, -1] }
-            TweakUi.mount("#example-spherical-2", (ui) => {
-              ui.spherical(context, 'value', {
-                label: 'Spherical',
-                codec: TweakUi.sphericalCodec({
-                  axes: { 0: 'right', 1: 'up', 2: 'back'},
-                  length: -1,
-                  result: () => []
-                }),
-                onInput: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-point">
-      <h3>Point</h3>
-      <p>an object with 2d coordinates</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-point-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: { x: 0, y: 0 } }
-            TweakUi.mount("#example-point-1", (ui) => {
-              ui.point(context, 'value', {
-                xRange: [-1, 1],
-                yRange: [-1, 1],
-                reset: [0, 0],
-                snap: 0.1,
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-position">
-      <h3>Position</h3>
-      <p>Object with x, y, z components (default)</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-position-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: { x: 0, y: 1, z: 0 } }
-            TweakUi.mount("#example-position-1", (ui) => {
-              ui.position(context, 'value', {
-                label: 'Vector',
-                min: -1, max: 1, step: 0.125,
-                onInput: console.log, onChange: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>2D Vector</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-position-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: { x: 0, y: 1 } }
-            TweakUi.mount("#example-position-2", (ui) => {
-              ui.position(context, 'value', {
-                label: 'Vector',
-                keys: ['x', 'y'],
-                min: -1, max: 1, step: 0.125,
-                onInput: console.log, onChange: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>Array</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-position-4"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: [3, 2, 1] }
-            TweakUi.mount("#example-position-4", (ui) => {
-              ui.position(context, 'value', {
-                label: 'Vector',
-                keys: [0, 1, 2],
-                min: -1, max: 1, step: 0.125,
-                onInput: console.log, onChange: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-color">
-      <h3>Color</h3>
-      <p>
-        The Color control has a <code>format</code> option which describes how the color value
-        should be parsed and encoded. It consists of 2 sections. The prefix specifies whether the color value is a
-      </p>
-      <ul>
-        <li><code>#</code> hex string</li>
-        <li><code>0x</code> a number</li>
-        <li><code>[]</code> an array</li>
-        <li><code>{}</code> an object</li>
-      </ul>
-      <p>
-        The suffix specifies the order of the color components. It may be any combinarion of
-        <code>r</code>, <code>g</code>, <code>b</code> and <code>a</code> Here are some examples
-      </p>
-      <table class="table table-borderless table-sm">
-        <thead>
-          <tr>
-            <th>format</th>
-            <th>value (r: 255, g: 128, b: 0, a: 1)</th>
-            <th>description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>"#rgb"</code></td>
-            <td><code>"#FF8000"</code></td>
-            <td>Hex string with red green and blue coded from left to right</td>
-          </tr>
-          <tr>
-            <td><code>"#bgr"</code></td>
-            <td><code>"#0080FF"</code></td>
-            <td>Hex string with red green and blue coded from right to left</td>
-          </tr>
-          <tr>
-            <td><code>"0xrgb"</code></td>
-            <td><code>16744448</code></td>
-            <td>number Hex string with red green and blue coded from right to left</td>
-          </tr>
-          <tr>
-            <td><code>"[]rgb"</code></td>
-            <td><code>[255, 128, 0]</code></td>
-            <td>number array with red green and blue coded from right to left</td>
-          </tr>
-          <tr>
-            <td><code>"{}rgb"</code></td>
-            <td><code>{ r: 255, g: 128, b: 0 }</code></td>
-            <td>object red green and blue components</td>
-          </tr>
-          <tr>
-            <td><code>"[n]rgb"</code></td>
-            <td><code>[1, 0.5, 0]</code></td>
-            <td>number array with all components normalized to range [0:1]</td>
-          </tr>
-          <tr>
-            <td><code>"{n}rgb"</code></td>
-            <td><code>{ r: 1, g: 0.5, b: 0 }</code></td>
-            <td>object red green and blue components normalized to range [0:1]</td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-color"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: [1, 0, 0] }
-            TweakUi.mount("#example-color", (ui) => {
-              ui.color(context, 'value', {
-                label: 'Color',
-                format: '[n]rgb',
-                onInput: console.log
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-color">
-      <h3-picker>Color picker</h3-picker>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-color-picker"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var context = { value: '#fff' }
-            TweakUi.mount("#example-color-picker", (ui) => {
-              ui.colorPicker(context, 'value', {
-                label: 'Color',
-                onInput: console.log,
-                onChange: console.log,
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-button">
-      <h3>Button</h3>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-button"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-button", (ui) => {
-              ui.button('Button', { onClick: console.log })
-              ui.button('Button', { label: 'With Label' })
-              ui.button('Button', { label: '' })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-image">
-      <h3>Image</h3>
-      <p>Display the image as is</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-image-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-image-1", (ui) => {
-              ui.image("Image", {
-                src: "https://picsum.photos/id/893/400/300",
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>Constrain the aspect ratio</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-image-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-image-2", (ui) => {
-              ui.image("Image", {
-                src: "https://picsum.photos/id/893/400/300",
-                aspect: "16x9"
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>Constrain the display width</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-image-3"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-image-3", (ui) => {
-              ui.image("Image", {
-                src: "https://picsum.photos/id/893/400/300",
-                aspect: "16x9",
-                width: 100
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-content">
-      <h3>Content</h3>
-      <p>simple text or html output</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-content-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-content-1", (ui) => {
-              ui.content("Text", `
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-              `)
-              ui.content("HTML", TweakUi.h.trust(`
-                <i onclick="alert('hijacked')">Dont do this for untrusted input</i>
-              `))
-              ui.content("Mithril", TweakUi.h('a', {
-                target: "_blank",
-                href: "https://mithril.js.org/"
-              }, 'this is a mithril link'))
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-group">
-      <h3>Group</h3>
-      <p>A group with a title header</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-group-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-group-1", (ui) => {
-              ui.group("A Group", () => {
-                ui.button("Button")
-                ui.button("Button")
-                ui.button("Button")
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>Groups may be collapsible</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-group-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-group-2", (ui) => {
-              ui.group("A Group", { collapsible: true }, () => {
-                ui.button("Button")
-                ui.button("Button")
-                ui.button("Button")
-              })
-            })
-          </script>
-        </div>
-      </div>
-      <p>Nested groups</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-group-3"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-group-3", (ui) => {
-              ui.group("A Group", { collapsible: true }, () => {
-                ui.group("Sub group", { collapsible: true }, () => {
-                  ui.button("Button")
-                  ui.button("Button")
-                  ui.button("Button")
-                })
-                ui.group("Sub group", { collapsible: true }, () => {
-                  ui.button("Button")
-                  ui.button("Button")
-                  ui.button("Button")
-                })
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-tabs">
-      <h3>Tabs</h3>
-      <p>Renders sub groups as tabs</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-tabs-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-tabs-1", (ui) => {
-              ui.tabs((tabs) => {
-                ui.group("Tab 1", () => {
-                  ui.button("Button")
-                })
-                ui.group("Tab 2", () => {
-                  ui.number({ label: "Number" })
-                })
-                ui.group("Tab 3", () => {
-                  ui.text({ label: "Text" })
-                })
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-accordion">
-      <h3>Accordion</h3>
-      <p>Automatically handles the collapse state of sub groups</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-accordion-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            var person = { name: "John Doe", age: 42, eyes: '#4F8' }
-            TweakUi.mount("#example-accordion-1", (ui) => {
-              ui.accordion({ expand: 0 }, () => {
-                ui.group("Group 1", () => {
-                  ui.text(person, 'name')
-                  ui.number(person, 'age')
-                })
-                ui.group("Group 2", () => {
-                  ui.color(person, 'eyes')
-                })
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="control-container">
-      <h3>Container</h3>
-      <p>A simple flexbox container. Can be either horizontal or vertical. For more flexibility combine nested containers with custom style rules.</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-container-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-container-1", (ui) => {
-              ui.container({ horizontal: true }, () => {
-                ui.container({ style: { flex: 'none' } }, () => {
-                  ui.image("Image", {
-                    src: "https://picsum.photos/300/300",
-                    width: '4rem'
-                  })
-                })
-                ui.container(() => {
-                  ui.button("Button", { label: "Label" })
-                  ui.button("Button", { label: "Label" })
-                  ui.button("Button", { label: "Label" })
-                })
-              })
-            })
-          </script>
-        </div>
-      </div>
-    </section>
-    <h2 id="concepts">Concepts</h2>
-    <section id="concept-layout">
-      <h3>Layout & Labels</h3>
-      <p>
-        The main container has a fixed width of <code>20rem</code> which is <code>320px</code> on this page.
-        All controlls are stacked vertically. The default stylesheet uses the <code>flex-box</code> layout model
-        which should render just fine on <a href="https://caniuse.com/#feat=flexbox" target="_blank"> all modern browsers </a>
-      </p>
-      <p>
-        Almost all controls have a label to their left side. Hhowever this is only rendered if the <code>label</code> option
-        is actually set. If you want to alignt the controls vertically you have to set the <code>label</code> option
-        at least to an empty string.
-      </p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-labels-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-labels-1", [
-              { type: "text",                   value: "i dont have a label" },
-              { type: "text", label: "My text", value: "i do have a label" },
-              { type: "text", label: "",        value: "i have an empty label" }
-            ])
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="concept-input">
-      <h3>Input values</h3>
-      <p>There are several ways how to provide and retreive input values.</p>
-      <p>Use the <code>value</code> property to set the inital value and then listen for change</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-values-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-values-1", [{
-              type: "text",
-              label: "My text",
-              value: "i have a label",
-              onInput: (it, value) => { console.log(it, value) }
-            }])
-          </script>
-        </div>
-      </div>
-      <p class="mt-3">Use getters and setters (ECMAScript 5 and above)</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-values-2"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-values-2", [{
-              type: "text",
-              label: "Page Title",
-              get value() { return window.document.title },
-              set value(v) { window.document.title = v },
-              onInput: (it, value) => { console.log(it, value) }
-            }])
-          </script>
-        </div>
-      </div>
-      <p class="mt-3">Use a <code>target</code> object and provide a <code>property</code> name to get and set the value</p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-values-3"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.mount("#example-values-3", [{
-              type: "text",
-              label: "Page Title",
-              target: window.document,
-              property: "title"
-            }])
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="concept-mithril">
-      <h3>Mithril</h3>
-      <p>
-        This library is based on <a href="https://mithril.js.org/">mithril</a>. All key concepts of mithril
-        also apply to this library. So if you are about to write your own controls for Tweak UI dont forget
-        to check mithrils documentation.
-      </p>
-    </section>
-    <section id="custom-controls">
-      <h3>Custom controls</h3>
-      <p>
-        Register your custom controls by using the <code>component</code> function.
-        The argument must be a unique name and a component class or component factory.
-        Consult the documentation of <a href="https://mithril.js.org/components.html" target="_blank">mithriljs</a>
-        for how the components work. Take a look at the source code for how Tweak Ui components are
-        implemented.
-      </p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-register-1"></div>
-        <div class="col">
-          <script class="language-javascript" type="text/javascript">
-            TweakUi.component("embed", (node) => {
-              return {
-                view: () => {
-                  return TweakUi.h('embed', {
-                    src: node.attrs.data.src,
-                    width: node.attrs.data.width,
-                    height: node.attrs.data.height
-                  })
-                }
-              }
-            })
-            TweakUi.mount("#example-register-1", [{
-              type: "embed",
-              label: "Youtube",
-              width: 220,
-              src: [
-                "https://www.youtube.com/embed/QH2-TGUlwu4",
-                "?rel=0&amp;autoplay=0&mute=1"
-              ].join("")
-            }])
-          </script>
-        </div>
-      </div>
-    </section>
-    <section id="custom-colors">
-      <h3>Change Theme colors</h3>
-      <p>
-        Tweak ui comes with a default theme and the alternatives <code>.twui-dark</code> and <code>.twui-light</code>.
-        Add one of these classes to the root element to change the look.
-      </p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-theme-1"></div>
-        <div class="col"><span>this is default</span>
-          <script type="text/javascript">
-            TweakUi.mount("#example-theme-1", [{
-              type: "button",
-              text: "Button",
-              label: ""
-            }, {
-              type: "number",
-              label: "Number",
-              value: 0
-            }, {
-              type: "text",
-              label: "Text",
-              value: "Hello World"
-            }, {
-              type: "color",
-              label: "Color",
-              value: "#ff00ff"
-            }])
-          </script>
-        </div>
-      </div>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last twui-dark" id="example-theme-2"></div>
-        <div class="col"><code>.twui-dark</code>
-          <script type="text/javascript">
-            TweakUi.mount("#example-theme-2", [{
-              type: "button",
-              text: "Button",
-              label: ""
-            }, {
-              type: "number",
-              label: "Number",
-              value: 0
-            }, {
-              type: "text",
-              label: "Text",
-              value: "Hello World"
-            }, {
-              type: "color",
-              label: "Color",
-              value: "#ff00ff"
-            }])
-          </script>
-        </div>
-      </div>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last twui-light" id="example-theme-3"></div>
-        <div class="col"><code>.twui-light</code>
-          <script type="text/javascript">
-            TweakUi.mount("#example-theme-3", [{
-              type: "button",
-              text: "Button",
-              label: ""
-            }, {
-              type: "number",
-              label: "Number",
-              value: 0
-            }, {
-              type: "text",
-              label: "Text",
-              value: "Hello World"
-            }, {
-              type: "color",
-              label: "Color",
-              value: "#ff00ff"
-            }])
-          </script>
-        </div>
-      </div>
-      <p>
-        Another quick and easy way is to change the CSS variables for the root element.
-        However <a href="https://caniuse.com/#feat=css-variables" target="_blank">not all browsers</a> support that.
-        Read more about CSS variables
-        <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">here </a>,
-        <a target="_blank" href="https://www.w3schools.com/css/css3_variables.asp">here </a> or
-        <a target="_blank" href="https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d">here </a>
-      </p>
-      <div class="row justify-content-center mb-3">
-        <div class="col gui flex-grow-0 order-last" id="example-theme-4"></div>
-        <div class="col">
-          <style class="language-css">
-            #example-theme-4 {
-              --twui-color-primary: #263238;
-              --twui-color-primary-dark: #000a12;
-              --twui-color-primary-light: #4f5b62;
-              --twui-color-secondary: #37474f;
-              --twui-color-secondary-dark: #102027;
-              --twui-color-secondary-light: #62727b;
-              --twui-color-on-primary: #fff;
-              --twui-color-on-secondary: #fff;
-              --twui-color-accent: #f9AA33;
-            }
-          </style>
-          <script type="text/javascript">
-            TweakUi.mount("#example-theme-4", [{
-              type: "button",
-              text: "Button",
-              label: ""
-            }, {
-              type: "number",
-              label: "Number",
-              value: 0
-            }, {
-              type: "text",
-              label: "Text",
-              value: "Hello World"
-            }, {
-              type: "color",
-              label: "Color",
-              value: "#ff00ff"
-            }])
-          </script>
-        </div>
-      </div>
-    </section>
-    <script type="text/javascript">function formatText(text) {
-  var lines = text.split(/\n/gi).filter((it) => it.trim())
-  var indent = Number.MAX_VALUE
-  for (var i = 0; i < lines.length; i++) {
-    if (lines[i].trim()) {
-      indent = Math.min(indent, lines[i].match(/^\s*/)[0].length)
-    }
-  }
-  for (var i = 0; i < lines.length; i++) {
-    if (lines[i].trim()) {
-      lines[i] = lines[i].substr(indent)
-    }
-  }
-  return lines.join("\n")
-}
-document.querySelectorAll("aside.language-html,script.language-javascript,style.language-css").forEach((node) => {
-  let pre = document.createElement('pre')
-  let code = document.createElement('code')
-  pre.appendChild(code)
-  code.textContent = formatText(node.innerHTML)
-  code.setAttribute("class", node.getAttribute("class"))
-  node.parentNode.insertBefore(pre, node.nextSibling)
-})
-    </script>
-    <section id="comments">
-      <h3>Comments</h3>
-      <section id="disqus_thread"></section>
-      <script type="text/javascript">
-        var disqus_shortname = 'tweak-ui';
-        var disqus_url = 'https://tweak-ui.ginie.eu';
-        (function(){
-          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-          dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
-          (document.getElementsByTagName('body')[0]).appendChild(dsq);
-        })();
-      </script>
-    </section>
-    <section>
-      <script src="https://unpkg.com/@stackblitz/sdk/bundles/sdk.umd.js" async></script>
-      <script type="text/javascript">
-        function openPlayground() {
-          StackBlitzSDK.openProject({
-            files: {
-              "index.ts": formatText(document.querySelector('script.playground-ts').text),
-              "index.html": formatText(document.querySelector('script.playground-html').text)
-            },
-            title: "Tweak UI Playground",
-            description: "Tweak UI Playground",
-            template: "typescript",
-            tags: ["tweakui"],
-            dependencies: {
-              "tweak-ui": "*"
-            }
-          });
-        }
-      </script>
-      <script class="playground-html" type="text/plain">
-        <div class="tweak-ui"></div>
-      </script>
-      <script class="playground-ts" type="text/plain">
-        import 'tweak-ui/dist/tweak-ui.css'
-        import * as TweakUI from 'tweak-ui'
-        TweakUI.mount('.tweak-ui', (t) => {
-          t.button('Hello World')
-        })
-      </script>
-    </section>
-  </div>
-</body>