From aad9ecb02c34946621d8fff7f443f95627387ab8 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 05:59:06 +0200
Subject: [PATCH 01/14] init vue repl

---
 packages/docs/components/Play.vue             | 119 +++++++++++++++++
 packages/docs/package.json                    |   2 +
 packages/docs/pages/play.vue                  |   5 +
 .../ui/src/composables/useForm/useForm.ts     |   1 +
 yarn.lock                                     | 124 +++++++++++++++++-
 5 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 packages/docs/components/Play.vue
 create mode 100644 packages/docs/pages/play.vue

diff --git a/packages/docs/components/Play.vue b/packages/docs/components/Play.vue
new file mode 100644
index 0000000000..429375843c
--- /dev/null
+++ b/packages/docs/components/Play.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { Repl, ReplStore, File, ReplProps } from '@vue/repl'
+import CodeMirror from '@vue/repl/codemirror-editor'
+import '@vue/repl/style.css'
+
+const store = new ReplStore({
+  showOutput: false,
+})
+
+// eslint-disable-next-line no-useless-escape
+const code = '<script setup>\r\nimport { ref } from \'vue\'\r\n  import { VaButton } from \'vuestic-ui\'\r\n\r\nconst msg = ref(\'Hello World!\')\r\n<\/script>\r\n\r\n<template>\r\n  <VaButton>{{ msg }}</VaButton>\r\n  <input v-model="msg" />\r\n</template>'
+
+store.state.activeFile.code = code
+
+const fetchDependecies = async (packageName: string, version: string) => {
+  const json: { dependencies: Record<string, string> } = await (await fetch(`https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`)).json()
+
+  const imports: Record<string, any> = {}
+
+  if (!json.dependencies) return imports
+
+  await Promise.all(Object.entries(json.dependencies).map(async ([packageName, version]) => {
+    version = version.replace('^', '')
+    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
+    const json = await (await fetch(url)).json()
+    const { module, main } = json
+    const path = module || main
+    imports[packageName] = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${path}`
+
+    Object.entries(await fetchDependecies(packageName, version as string)).forEach(([v, k]) => imports[v] = k)
+  }))
+
+  return imports
+}
+
+store.setFiles({
+  ...store.getFiles(),
+  'import-map.json': JSON.stringify({
+    imports: {
+      ...store.getImportMap().imports,
+      ...await fetchDependecies('vuestic-ui', '1.8.0'),
+      'vuestic-ui': 'https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/esm-node/main.mjs',
+      'vuestic-ui/css': 'https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/vuestic-ui.css'
+    },
+  }, null, 2),
+  'App.vue': code,
+})
+
+const previewOptions: ReplProps['previewOptions'] = {
+  headHTML: `
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/vuestic-ui.css">
+  `,
+  customCode: {
+    importCode: `
+      import { createVuestic } from "vuestic-ui";
+    `,
+    useCode: `
+      app.use(createVuestic({}))
+    `
+  }
+}
+</script>
+
+<template>
+  <Repl
+    class="vuestic-repl"
+    :editor="CodeMirror"
+    :store="store"
+    :preview-options="previewOptions"
+    :clear-console="false"
+  />
+</template>
+
+<style lang="scss">
+  .vue-repl {
+    height: 80vh !important;
+
+    .tab-buttons, .file-selector {
+      display: none;
+    }
+
+    .editor-container .wrapper {
+      display: none;
+    }
+
+    &.vuestic-repl {
+      --bg: var(--va-background-primary);
+      --bg-soft: var(--va-background-secondary);
+      --border: var(--va-background-border);
+      --color-branding: var(--va-primary);
+
+      .output-container {
+        height: 100%;
+      }
+
+      .CodeMirror {
+        // TODO: Change to Vuestic color scheme
+        --symbols: #777;
+        --base: var(--va-text-primary);
+        --comment: hsl(210, 25%, 60%);
+        --keyword: #af4ab1;
+        --variable: var(--va-text-primary);
+        --function: #c25205;
+        --string: var(--va-success);
+        --number: #c25205;
+        --tags: var(--va-danger);
+        --brackets: var(--comment);
+        --qualifier: #ff6032;
+        --important: var(--va-success);
+        --attribute: #9c3eda;
+        --property: #6182b8;
+        --selected-bg: #d7d4f0;
+        --selected-bg-non-focus: #d9d9d9;
+        --cursor: var(--va-text-primary);
+      }
+    }
+  }
+</style>
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 33d98d6044..6f7d39ac4d 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -34,6 +34,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "vitest": "^0.18.1",
+    "vue": "3.3.8",
     "vue-component-meta": "^1.8.8",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.2.0"
@@ -43,6 +44,7 @@
     "@funken-studio/sitemap-nuxt-3": "^4.0.4",
     "@nuxtjs/google-fonts": "^3.0.1",
     "@types/acorn": "^6.0.0",
+    "@vue/repl": "^2.8.0",
     "acorn": "^8.8.1",
     "codesandbox": "^2.2.3",
     "highlight.js": "^11.7.0",
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
new file mode 100644
index 0000000000..431b5d915b
--- /dev/null
+++ b/packages/docs/pages/play.vue
@@ -0,0 +1,5 @@
+<template>
+  <ClientOnly>
+    <Play />
+  </ClientOnly>
+</template>
diff --git a/packages/ui/src/composables/useForm/useForm.ts b/packages/ui/src/composables/useForm/useForm.ts
index a2fc0e4fa8..074ea6d597 100644
--- a/packages/ui/src/composables/useForm/useForm.ts
+++ b/packages/ui/src/composables/useForm/useForm.ts
@@ -27,6 +27,7 @@ export const useForm = <Names extends string = string>(ref: string | Ref<typeof
     : ref
 
   return {
+    immediate: computed(() => form.value?.immediate || false),
     isValid: computed(() => form.value?.isValid || false),
     isLoading: computed(() => form.value?.isLoading || false),
     isDirty: computed(() => form.value?.isDirty || false),
diff --git a/yarn.lock b/yarn.lock
index a296c39bf8..2631177044 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -779,6 +779,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
   integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
 
+"@babel/parser@^7.23.0":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
+  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -2803,7 +2808,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -6299,6 +6304,16 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz#301bb60d0245265a88ed5b30e200fbf223acb313"
+  integrity sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.2.47", "@vue/compiler-dom@^3.0.1", "@vue/compiler-dom@^3.2.0":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
@@ -6307,6 +6322,14 @@
     "@vue/compiler-core" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-dom@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz#09d832514b9b8d9415a3816b065d69dbefcc7e9b"
+  integrity sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==
+  dependencies:
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/compiler-dom@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
@@ -6331,6 +6354,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz#40b18e48aa00260950964d1d72157668521be0e1"
+  integrity sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/reactivity-transform" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+    postcss "^8.4.31"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-ssr@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
@@ -6339,6 +6378,14 @@
     "@vue/compiler-dom" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/compiler-ssr@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz#136eed54411e4694815d961048a237191063fbce"
+  integrity sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -6401,6 +6448,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity-transform@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz#6d07649013b0be5c670f0ab6cc7ddd3150ad03f2"
+  integrity sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+
 "@vue/reactivity@3.2.47", "@vue/reactivity@^3.2.0":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.47.tgz#1d6399074eadfc3ed35c727e2fd707d6881140b6"
@@ -6408,6 +6466,13 @@
   dependencies:
     "@vue/shared" "3.2.47"
 
+"@vue/reactivity@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.8.tgz#cce8a03a3fd3539c3eeda53e277ba365d160dd4d"
+  integrity sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==
+  dependencies:
+    "@vue/shared" "3.3.8"
+
 "@vue/reactivity@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
@@ -6415,6 +6480,11 @@
   dependencies:
     "@vue/shared" "3.3.4"
 
+"@vue/repl@^2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-2.8.0.tgz#e14d9a30c70436170d875cc84858b9a395564a93"
+  integrity sha512-coXgyoga7+G7BO2ENlfe/0b0vqrT8FasFguaksjrQzpEVC28r6S7+YDhhS6GZnuNhnS8gDqZx7yrXsTOqXsDFg==
+
 "@vue/runtime-core@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.47.tgz#406ebade3d5551c00fc6409bbc1eeb10f32e121d"
@@ -6423,6 +6493,14 @@
     "@vue/reactivity" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/runtime-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb"
+  integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==
+  dependencies:
+    "@vue/reactivity" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/runtime-dom@3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz#93e760eeaeab84dedfb7c3eaf3ed58d776299382"
@@ -6432,6 +6510,15 @@
     "@vue/shared" "3.2.47"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4"
+  integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==
+  dependencies:
+    "@vue/runtime-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    csstype "^3.1.2"
+
 "@vue/server-renderer@3.2.47", "@vue/server-renderer@^3.0.1":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.47.tgz#8aa1d1871fc4eb5a7851aa7f741f8f700e6de3c0"
@@ -6440,6 +6527,14 @@
     "@vue/compiler-ssr" "3.2.47"
     "@vue/shared" "3.2.47"
 
+"@vue/server-renderer@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.8.tgz#9b1779010e75783edeed8fcfb97d9c95fc3ac5d2"
+  integrity sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/shared@3.2.47", "@vue/shared@^3.2.0", "@vue/shared@^3.2.47":
   version "3.2.47"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
@@ -6450,6 +6545,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@vue/shared@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.8.tgz#f044942142e1d3a395f24132e6203a784838542d"
+  integrity sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==
+
 "@vue/test-utils@2.0.0-beta.14":
   version "2.0.0-beta.14"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-beta.14.tgz#9300d48789b334b52c5514efdc4648f704a7e94b"
@@ -9395,7 +9495,7 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -14793,6 +14893,13 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
+magic-string@^0.30.5:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -17830,7 +17937,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.1.10, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.23:
+postcss@^8.1.10, postcss@^8.2.1, postcss@^8.2.15, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.19, postcss@^8.4.23, postcss@^8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -22101,6 +22208,17 @@ vue@*, vue@^3.0.0, vue@^3.0.4, vue@^3.2.47:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
+vue@3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.8.tgz#532ff071af24f6a69e5ecc53a66858a9ee874ffc"
+  integrity sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-sfc" "3.3.8"
+    "@vue/runtime-dom" "3.3.8"
+    "@vue/server-renderer" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

From 778fba7b073326efc32e4d8cd11ac36ef0df385f Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 06:44:14 +0200
Subject: [PATCH 02/14] fix(sandbox): vite dev

---
 packages/sandbox/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
index a7e3cef586..90cf84c4a8 100644
--- a/packages/sandbox/package.json
+++ b/packages/sandbox/package.json
@@ -9,7 +9,7 @@
     "build:vue-cli": "vue-cli-service build",
     "build:nuxt": "nuxt build",
     "build:web-components": "vue-tsc --noEmit && vite build --config ./web-components/vite.config.ts",
-    "dev:vite": "vite",
+    "dev:vite": "vite --config ./configs/vite/vite.base.ts",
     "dev:web-components": "vite --config ./web-components/vite.config.ts",
     "dev:vue-cli": "vue-cli-service serve",
     "dev:nuxt": "nuxt dev",

From 9692850926cf0d13b9a31acc2ab463768068c85a Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 06:44:54 +0200
Subject: [PATCH 03/14] fix(build#4019): v-bind fix plugin minified and used in
 all builds

---
 packages/ui/build/common-config.ts            |  2 +-
 .../ui/build/plugins/component-v-bind-fix.ts  | 22 ++++++-------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/ui/build/common-config.ts b/packages/ui/build/common-config.ts
index 5712cd2812..d6cd0d6e50 100644
--- a/packages/ui/build/common-config.ts
+++ b/packages/ui/build/common-config.ts
@@ -97,7 +97,7 @@ export default function createViteConfig (format: BuildFormat) {
   isEsm && config.plugins.push(chunkSplitPlugin({ strategy: 'unbundle' }))
   isEsm && !isNode && config.plugins.push(appendComponentCss())
   isEsm && config.plugins.push(removeSideEffectedChunks())
-  isEsm && config.plugins.push(componentVBindFix())
+  config.plugins.push(componentVBindFix())
 
   if (isNode) {
     config.build.rollupOptions = { ...external, ...rollupMjsBuildOptions }
diff --git a/packages/ui/build/plugins/component-v-bind-fix.ts b/packages/ui/build/plugins/component-v-bind-fix.ts
index 2584683e73..93056db83c 100644
--- a/packages/ui/build/plugins/component-v-bind-fix.ts
+++ b/packages/ui/build/plugins/component-v-bind-fix.ts
@@ -67,29 +67,21 @@ const getRootNodesOpenTags = (sfc: SFCParseResult) => {
   })
 }
 
-const renderCssVariablesAsStringCode = (vBinds: string[]) => {
-  return vBinds.map((vBind, index) => {
-    return `--va-${index}-${kebabCase(vBind)}: \${String(${vBind})}`
-  }, '').join(';')
+const renderCSSVariableName = (vBind: string) => {
+  return `--va-${kebabCase(vBind)}`
 }
 
-const renderCssVariablesAsObjectPropertiesCode = (vBinds: string[]) => {
+const renderCssVariablesAsStringCode = (vBinds: string[]) => {
   return vBinds.map((vBind, index) => {
-    return `'--va-${index}-${kebabCase(vBind)}': String(${vBind})`
-  }, '').join(',')
+    return `${renderCSSVariableName(vBind)}: \${String(${vBind})}`
+  }, '').join(';')
 }
 
 const renderObjectGuardCode = (existingContent: string, binds: string[]) => {
   const renderedAsString = renderCssVariablesAsStringCode(binds)
-  const renderedAsObjectProperties = renderCssVariablesAsObjectPropertiesCode(binds)
-
-  // Merge existing style with rendered css variables
-  const arrayStyle = `[...${existingContent}, \`${renderedAsString}\`]`
-  const objectStyle = `{ ...${existingContent}, ${renderedAsObjectProperties} }`
-  const stringStyle = `${existingContent} + \`;${renderedAsString}\``
 
   // Handle if style is an object, array or string
-  return `typeof ${existingContent} === 'object' ? (Array.isArray(${existingContent}) ? ${arrayStyle} : ${objectStyle}) : ${stringStyle}`
+  return `[${existingContent}, \`${renderedAsString}\`]`
 }
 
 const addStyleAttrToTag = (rootNode: string, vBinds: string[]) => {
@@ -136,7 +128,7 @@ export const transformVueComponent = (code: string) => {
     const locs = getStyleVBindLocs(s.original, vBind)
 
     locs.forEach((loc) => {
-      s.overwrite(loc.start, loc.end, `var(--va-${index}-${kebabCase(vBind)})`)
+      s.overwrite(loc.start, loc.end, `var(${renderCSSVariableName(vBind)})`)
     })
   })
 

From ec2617869ef72a5d08e38af029b10b0da2548937 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 07:55:38 +0200
Subject: [PATCH 04/14] docs(repl): use vuestic build from packages/ui isntead
 of jsdlvr

---
 packages/docs/.gitignore            |   1 +
 packages/docs/components/Play.vue   | 131 ++++++++++++++++++----------
 packages/docs/modules/repl/index.ts |  41 +++++++++
 packages/docs/nuxt.config.ts        |   1 +
 packages/docs/pages/play.vue        |  14 ++-
 5 files changed, 139 insertions(+), 49 deletions(-)
 create mode 100644 packages/docs/modules/repl/index.ts

diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
index 9ffd1aef9d..22d86c753b 100644
--- a/packages/docs/.gitignore
+++ b/packages/docs/.gitignore
@@ -7,3 +7,4 @@ node_modules
 .env
 dist
 page-config/getting-started/tree-shaking/tree-shaking.md
+public/vuestic-out
\ No newline at end of file
diff --git a/packages/docs/components/Play.vue b/packages/docs/components/Play.vue
index 429375843c..16fe9b1305 100644
--- a/packages/docs/components/Play.vue
+++ b/packages/docs/components/Play.vue
@@ -1,55 +1,68 @@
 <script setup lang="ts">
-import { Repl, ReplStore, File, ReplProps } from '@vue/repl'
+import { Repl, ReplStore, ReplProps } from '@vue/repl'
 import CodeMirror from '@vue/repl/codemirror-editor'
 import '@vue/repl/style.css'
 
-const store = new ReplStore({
-  showOutput: false,
+const props = defineProps({
+  script: {
+    type: String,
+    default: '',
+  },
+  template: {
+    type: String,
+    required: true,
+  },
+  style: {
+    type: String,
+    default: '',
+  },
 })
 
-// eslint-disable-next-line no-useless-escape
-const code = '<script setup>\r\nimport { ref } from \'vue\'\r\n  import { VaButton } from \'vuestic-ui\'\r\n\r\nconst msg = ref(\'Hello World!\')\r\n<\/script>\r\n\r\n<template>\r\n  <VaButton>{{ msg }}</VaButton>\r\n  <input v-model="msg" />\r\n</template>'
+const store = new ReplStore({ showOutput: false })
 
-store.state.activeFile.code = code
+const makeCode = (script: string, template: string, style: string) => {
+  let code = ''
 
-const fetchDependecies = async (packageName: string, version: string) => {
-  const json: { dependencies: Record<string, string> } = await (await fetch(`https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`)).json()
-
-  const imports: Record<string, any> = {}
-
-  if (!json.dependencies) return imports
+  if (script.trim()) {
+    // Fix parsing error, we need \/ to escape / in script tag
+    // eslint-disable-next-line no-useless-escape
+    code += `<script setup>\n${script}\n<\/script>\n\n`
+  }
 
-  await Promise.all(Object.entries(json.dependencies).map(async ([packageName, version]) => {
-    version = version.replace('^', '')
-    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
-    const json = await (await fetch(url)).json()
-    const { module, main } = json
-    const path = module || main
-    imports[packageName] = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${path}`
+  if (template.trim()) {
+    code += `<template>\n${template}\n</template>\n\n`
+  }
 
-    Object.entries(await fetchDependecies(packageName, version as string)).forEach(([v, k]) => imports[v] = k)
-  }))
+  if (style.trim()) {
+    code += `<style lang="scss">\n${style}\n</style>\n\n`
+  }
 
-  return imports
+  return code
 }
 
-store.setFiles({
-  ...store.getFiles(),
-  'import-map.json': JSON.stringify({
-    imports: {
-      ...store.getImportMap().imports,
-      ...await fetchDependecies('vuestic-ui', '1.8.0'),
-      'vuestic-ui': 'https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/esm-node/main.mjs',
-      'vuestic-ui/css': 'https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/vuestic-ui.css'
-    },
-  }, null, 2),
-  'App.vue': code,
+const code = computed(() => {
+  return makeCode(props.script, props.template, props.style)
+})
+
+watchEffect(() => {
+  store.setFiles({
+    ...store.getFiles(),
+    'import-map.json': JSON.stringify({
+      imports: {
+        // Default path to vue to jsdlvr cdn
+        ...store.getImportMap().imports,
+        'vuestic-ui': window.location.origin + '/vuestic-out/main.js',
+      },
+    }, null, 2),
+    // Update App.vue on code change
+    'App.vue': code.value,
+  })
 })
 
 const previewOptions: ReplProps['previewOptions'] = {
   headHTML: `
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuestic-ui@1.8.0/dist/vuestic-ui.css">
+    <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
   `,
   customCode: {
     importCode: `
@@ -60,6 +73,25 @@ const previewOptions: ReplProps['previewOptions'] = {
     `
   }
 }
+
+// Syntax highlighting colors
+const { getTextColor, colors } = useColors();
+
+const codeRed = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#c02d2e", "#FF006E")
+);
+const codeGreen = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#54790d", "#7EBD00")
+);
+const codeCyan = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#015692", "#00AFFA")
+);
+const codeOrange = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#b75501", "#FC834A")
+);
+const codeGray = computed(() =>
+  getTextColor(colors.backgroundSecondary, "#656e77", "#A0A6B6")
+);
 </script>
 
 <template>
@@ -95,24 +127,27 @@ const previewOptions: ReplProps['previewOptions'] = {
       }
 
       .CodeMirror {
-        // TODO: Change to Vuestic color scheme
-        --symbols: #777;
+        --symbols: v-bind(codeGray);
         --base: var(--va-text-primary);
         --comment: hsl(210, 25%, 60%);
-        --keyword: #af4ab1;
+        --keyword: v-bind(codeRed);
         --variable: var(--va-text-primary);
-        --function: #c25205;
-        --string: var(--va-success);
-        --number: #c25205;
-        --tags: var(--va-danger);
-        --brackets: var(--comment);
-        --qualifier: #ff6032;
-        --important: var(--va-success);
-        --attribute: #9c3eda;
-        --property: #6182b8;
-        --selected-bg: #d7d4f0;
-        --selected-bg-non-focus: #d9d9d9;
+        --function: v-bind(codeOrange);
+        --string: v-bind(codeGreen);
+        --number: v-bind(codeOrange);
+        --tags: v-bind(codeRed);
+        --brackets: v-bind(codeCyan);
+        --qualifier: v-bind(codeOrange);
+        --important: v-bind(codeGreen);
+        --attribute: v-bind(codeCyan);
+        --property: v-bind(codeCyan);
+        --selected-bg: var(--va-focus);
+        --selected-bg-non-focus: var(--va-secondary);
         --cursor: var(--va-text-primary);
+
+        .CodeMirror-selected {
+          opacity: 0.2;
+        }
       }
     }
   }
diff --git a/packages/docs/modules/repl/index.ts b/packages/docs/modules/repl/index.ts
new file mode 100644
index 0000000000..caa945d5cd
--- /dev/null
+++ b/packages/docs/modules/repl/index.ts
@@ -0,0 +1,41 @@
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'pathe';
+import { defineNuxtModule } from '@nuxt/kit';
+import { build } from 'vite'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@vuestic/repl-builder',
+    compatibility: {
+      nuxt: '^3.3.0'
+    }
+  },
+
+  async setup (options, nuxt) {
+    // Builds specific ESM build for REPL, which includes all the deps, expect vue and all styles
+
+    await build({
+      logLevel: 'error',
+      root: resolve(__dirname, '../../../ui/src'),
+      build: {
+        lib: {
+          entry: resolve(__dirname, '../../../ui/src/main.ts'),
+          fileName: () => 'main.js',
+          formats: ['es'],
+        },
+        sourcemap: false,
+        minify: 'esbuild',
+        cssCodeSplit: false,
+        outDir: resolve(__dirname, './../../public/vuestic-out'),
+
+        rollupOptions: {
+          external: ['vue'],
+        }
+      },
+      plugins: [vue()],
+    })
+
+    nuxt.options.alias['#vuestic-repl-build/js'] = resolve(__dirname, './../../public/vuestic-out/main.js')
+    nuxt.options.alias['#vuestic-repl-build/style'] = resolve(__dirname, './output/styles.css')
+  }
+})
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
index b9036e0405..162db37f41 100644
--- a/packages/docs/nuxt.config.ts
+++ b/packages/docs/nuxt.config.ts
@@ -76,6 +76,7 @@ export default defineNuxtConfig({
   },
 
   modules: [
+    './modules/repl',
     './modules/google-analytics',
     './modules/banner',
     './modules/vuestic',
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
index 431b5d915b..bf17bbe345 100644
--- a/packages/docs/pages/play.vue
+++ b/packages/docs/pages/play.vue
@@ -1,5 +1,17 @@
+<script setup lang="ts">
+  const scriptText = `  import { ref } from 'vue'
+
+  const msg = ref('')`
+
+  const templateText = `  <h1 class="va-h1">{{ msg }}</h1>
+  <VaInput v-model="msg" />`
+</script>
+
 <template>
   <ClientOnly>
-    <Play />
+    <Play
+      :script="scriptText"
+      :template="templateText"
+    />
   </ClientOnly>
 </template>

From 54be6143df83003cefc6cda215d867ca10e56b53 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 14:04:30 +0200
Subject: [PATCH 05/14] docs(repl): improve playground design

---
 .../components/{Play.vue => Play.client.vue}  | 120 ++++++++++--------
 .../blocks/example/example-footer.vue         |  48 ++++++-
 packages/docs/pages/play.vue                  |  24 +++-
 3 files changed, 134 insertions(+), 58 deletions(-)
 rename packages/docs/components/{Play.vue => Play.client.vue} (54%)

diff --git a/packages/docs/components/Play.vue b/packages/docs/components/Play.client.vue
similarity index 54%
rename from packages/docs/components/Play.vue
rename to packages/docs/components/Play.client.vue
index 16fe9b1305..2c6dab635b 100644
--- a/packages/docs/components/Play.vue
+++ b/packages/docs/components/Play.client.vue
@@ -1,50 +1,22 @@
 <script setup lang="ts">
 import { Repl, ReplStore, ReplProps } from '@vue/repl'
-import CodeMirror from '@vue/repl/codemirror-editor'
+import Editor from '@vue/repl/codemirror-editor'
 import '@vue/repl/style.css'
 
 const props = defineProps({
-  script: {
+  code: {
     type: String,
-    default: '',
-  },
-  template: {
-    type: String,
-    required: true,
-  },
-  style: {
-    type: String,
-    default: '',
-  },
+    default: ''
+  }
 })
 
 const store = new ReplStore({ showOutput: false })
 
-const makeCode = (script: string, template: string, style: string) => {
-  let code = ''
-
-  if (script.trim()) {
-    // Fix parsing error, we need \/ to escape / in script tag
-    // eslint-disable-next-line no-useless-escape
-    code += `<script setup>\n${script}\n<\/script>\n\n`
-  }
-
-  if (template.trim()) {
-    code += `<template>\n${template}\n</template>\n\n`
-  }
-
-  if (style.trim()) {
-    code += `<style lang="scss">\n${style}\n</style>\n\n`
-  }
-
-  return code
-}
-
 const code = computed(() => {
-  return makeCode(props.script, props.template, props.style)
+  return props.code || '<template>\n  <div>Hello world</div>\n</template>'
 })
 
-watchEffect(() => {
+const setFiles = () => {
   store.setFiles({
     ...store.getFiles(),
     'import-map.json': JSON.stringify({
@@ -57,11 +29,17 @@ watchEffect(() => {
     // Update App.vue on code change
     'App.vue': code.value,
   })
-})
+}
+
+setFiles()
+
+watch(code, setFiles)
 
 const previewOptions: ReplProps['previewOptions'] = {
   headHTML: `
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
   `,
   customCode: {
@@ -75,6 +53,7 @@ const previewOptions: ReplProps['previewOptions'] = {
 }
 
 // Syntax highlighting colors
+// Notice: for some reason v-bind breaks the app
 const { getTextColor, colors } = useColors();
 
 const codeRed = computed(() =>
@@ -97,16 +76,35 @@ const codeGray = computed(() =>
 <template>
   <Repl
     class="vuestic-repl"
-    :editor="CodeMirror"
+    :editor="Editor"
     :store="store"
     :preview-options="previewOptions"
     :clear-console="false"
+    :style="{
+      '--symbols': codeGray,
+      '--base': codeGray,
+      '--comment': codeGray,
+      '--keyword': codeRed,
+      '--variable': codeGray,
+      '--function': codeOrange,
+      '--string': codeGreen,
+      '--number': codeOrange,
+      '--tags': codeRed,
+      '--brackets': codeCyan,
+      '--qualifier': codeOrange,
+      '--important': codeGreen,
+      '--attribute': codeCyan,
+      '--property': codeCyan,
+      '--selected-bg': colors.focus,
+      '--selected-bg-non-focus': colors.secondary,
+      '--cursor': colors.textPrimary,
+    }"
   />
 </template>
 
 <style lang="scss">
   .vue-repl {
-    height: 80vh !important;
+    height: 100%;
 
     .tab-buttons, .file-selector {
       display: none;
@@ -124,30 +122,42 @@ const codeGray = computed(() =>
 
       .output-container {
         height: 100%;
+        padding: 16px;
+      }
+
+      .editor-container {
+        background: rgba(0, 0, 0, 0.02);
+        height: 100%;
       }
 
       .CodeMirror {
-        --symbols: v-bind(codeGray);
-        --base: var(--va-text-primary);
-        --comment: hsl(210, 25%, 60%);
-        --keyword: v-bind(codeRed);
-        --variable: var(--va-text-primary);
-        --function: v-bind(codeOrange);
-        --string: v-bind(codeGreen);
-        --number: v-bind(codeOrange);
-        --tags: v-bind(codeRed);
-        --brackets: v-bind(codeCyan);
-        --qualifier: v-bind(codeOrange);
-        --important: v-bind(codeGreen);
-        --attribute: v-bind(codeCyan);
-        --property: v-bind(codeCyan);
-        --selected-bg: var(--va-focus);
-        --selected-bg-non-focus: var(--va-secondary);
-        --cursor: var(--va-text-primary);
+        word-spacing: 4px;
+        color: currentColor;
+        background: none;
+        font-family:
+          Source Code Pro,
+          Consolas,
+          Monaco,
+          "Andale Mono",
+          "Ubuntu Mono",
+          monospace;
+        font-size: 0.9rem;
+        text-align: left;
+        white-space: pre;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+        tab-size: 4;
+        hyphens: none;
+        border-radius: 0.25rem;
 
         .CodeMirror-selected {
           opacity: 0.2;
         }
+
+        .CodeMirror-line {
+          padding: 0 1rem;
+        }
       }
     }
   }
diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 06f70927b6..1685f4a138 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -46,6 +46,32 @@
       <span class="docs-navigation__button__text">Open in GitHub</span>
     </va-button>
 
+    <VaModal stateful fullscreen class="playground-modal" cancel-text="" ok-text="Close">
+      <template #anchor="{ show }">
+        <va-button
+          preset="secondary"
+          size="small"
+          class="docs-navigation__button"
+          color="secondary"
+          @click="show"
+        >
+          <va-icon
+            class="docs-navigation__button__icon"
+            name="auto_fix_high"
+            size="13px"
+          />
+          <span class="docs-navigation__button__text">Play</span>
+        </va-button>
+      </template>
+
+      <ClientOnly>
+        <Play
+          class="h-full border-b-2 border-[var(--va-background-border)]"
+          :code="code"
+        />
+      </ClientOnly>
+    </VaModal>
+<!--
     <form
       :action="sandboxDefineUrl"
       method="POST"
@@ -100,7 +126,7 @@
         </va-icon>
         <span class="docs-navigation__button__text">Open in CodeSandbox</span>
       </va-button>
-    </form>
+    </form> -->
   </div>
 </template>
 
@@ -199,4 +225,24 @@ const sandboxParams = computed(() => createCodeSandbox(props.code, props.config)
     @include sm(display, none);
   }
 }
+
+.playground-modal {
+  --va-modal-padding: 0px;
+
+  .va-modal__inner {
+    max-width: 100%;
+    height: 100vh;
+  }
+  .va-modal__message {
+    margin-bottom: 0;
+    overflow: auto;
+    flex: 1;
+  }
+  .va-modal__footer {
+    padding: 1rem;
+  }
+  .va-modal__close  {
+    display: none;
+  }
+}
 </style>
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
index bf17bbe345..3ce45c02a7 100644
--- a/packages/docs/pages/play.vue
+++ b/packages/docs/pages/play.vue
@@ -1,4 +1,24 @@
 <script setup lang="ts">
+  const makeCode = (script: string, template: string, style: string) => {
+  let code = ''
+
+  if (script.trim()) {
+    // Fix parsing error, we need \/ to escape / in script tag
+    // eslint-disable-next-line no-useless-escape
+    code += `<script setup>\n${script}\n<\/script>\n\n`
+  }
+
+  if (template.trim()) {
+    code += `<template>\n${template}\n</template>\n\n`
+  }
+
+  if (style.trim()) {
+    code += `<style lang="scss">\n${style}\n</style>\n\n`
+  }
+
+  return code
+}
+
   const scriptText = `  import { ref } from 'vue'
 
   const msg = ref('')`
@@ -10,8 +30,8 @@
 <template>
   <ClientOnly>
     <Play
-      :script="scriptText"
-      :template="templateText"
+      class="h-[80vh]"
+      :code="makeCode(scriptText, templateText, '')"
     />
   </ClientOnly>
 </template>

From 6c14004bf180a491cb66226ab2a8d87d7b6603ca Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 21 Nov 2023 14:52:20 +0200
Subject: [PATCH 06/14] docs: improve playground urls

---
 packages/docs/components/Play.client.vue      |  43 ++++---
 .../blocks/example/example-footer.vue         | 106 +++++++-----------
 packages/docs/pages/play.vue                  |  84 ++++++++++++--
 3 files changed, 148 insertions(+), 85 deletions(-)

diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index 2c6dab635b..1b5ca316e2 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -7,33 +7,48 @@ const props = defineProps({
   code: {
     type: String,
     default: ''
+  },
+  state: {
+    type: String,
+    default: ''
   }
 })
 
-const store = new ReplStore({ showOutput: false })
+
+const store = new ReplStore({
+  showOutput: false,
+  serializedState: props.state,
+})
 
 const code = computed(() => {
   return props.code || '<template>\n  <div>Hello world</div>\n</template>'
 })
 
 const setFiles = () => {
-  store.setFiles({
-    ...store.getFiles(),
-    'import-map.json': JSON.stringify({
-      imports: {
-        // Default path to vue to jsdlvr cdn
-        ...store.getImportMap().imports,
-        'vuestic-ui': window.location.origin + '/vuestic-out/main.js',
-      },
-    }, null, 2),
-    // Update App.vue on code change
-    'App.vue': code.value,
+  store.setImportMap({
+    imports: {
+      // Default path to vue to jsdlvr cdn
+      ...store.getImportMap().imports,
+      'vuestic-ui': window.location.origin + '/vuestic-out/main.js',
+    },
   })
+
+  if (props.code && !props.state) {
+    store.setFiles({
+      ...store.getFiles(),
+      'App.vue': props.code,
+    })
+  }
 }
 
+watch(code, setFiles)
+
 setFiles()
 
-watch(code, setFiles)
+const emit = defineEmits(['update:state'])
+watchEffect(() => {
+  emit('update:state', store.serialize())
+})
 
 const previewOptions: ReplProps['previewOptions'] = {
   headHTML: `
@@ -99,6 +114,8 @@ const codeGray = computed(() =>
       '--selected-bg-non-focus': colors.secondary,
       '--cursor': colors.textPrimary,
     }"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
   />
 </template>
 
diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 1685f4a138..3de5a26a75 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -46,7 +46,7 @@
       <span class="docs-navigation__button__text">Open in GitHub</span>
     </va-button>
 
-    <VaModal stateful fullscreen class="playground-modal" cancel-text="" ok-text="Close">
+    <VaModal stateful fullscreen class="playground-modal" hide-default-actions @ok="onHide">
       <template #anchor="{ show }">
         <va-button
           preset="secondary"
@@ -60,7 +60,7 @@
             name="auto_fix_high"
             size="13px"
           />
-          <span class="docs-navigation__button__text">Play</span>
+          <span class="docs-navigation__button__text">Playground</span>
         </va-button>
       </template>
 
@@ -68,75 +68,29 @@
         <Play
           class="h-full border-b-2 border-[var(--va-background-border)]"
           :code="code"
+          v-model:state="sandboxState"
         />
       </ClientOnly>
+
+      <template #footer="{ ok }">
+        <div class="flex gap-2">
+          <VaButton @click="copySandboxLink" icon="share" preset="secondary">
+            Share
+          </VaButton>
+          <VaButton @click="ok">
+            Hide
+          </VaButton>
+        </div>
+      </template>
     </VaModal>
-<!--
-    <form
-      :action="sandboxDefineUrl"
-      method="POST"
-      target="_blank"
-    >
-      <input
-        type="hidden"
-        name="parameters"
-        :value="sandboxParams"
-      >
-      <va-button
-        preset="secondary"
-        type="submit"
-        size="small"
-        class="docs-navigation__button"
-        color="secondary"
-      >
-        <va-icon
-          class="docs-navigation__button__icon"
-          size="13px"
-        >
-          <svg
-            id="IconChangeColor"
-            xmlns="http://www.w3.org/2000/svg"
-            width="13"
-            height="13"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#737373"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-codesandbox"
-          >
-            <path
-              id="mainIconPathAttribute"
-              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
-              fill="transparent"
-              stroke="#737373"
-            />
-            <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
-            <polyline points="7.5 19.79 7.5 14.6 3 12" />
-            <polyline points="21 12 16.5 14.6 16.5 19.79" />
-            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-            <line
-              x1="12"
-              y1="22.08"
-              x2="12"
-              y2="12"
-            />
-          </svg>
-        </va-icon>
-        <span class="docs-navigation__button__text">Open in CodeSandbox</span>
-      </va-button>
-    </form> -->
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, PropType, ref, Ref } from 'vue'
-import { type CodeSandboxConfig, createCodeSandbox } from '@/composables/code-sandbox'
+import { type CodeSandboxConfig, } from '@/composables/code-sandbox'
 import { getWindow } from 'vuestic-ui/src/utils/ssr'
 
-const query = '?query=file=/src/App.vue'
-
 type ButtonStates = 'active' | 'error' | 'default'
 
 const props = defineProps({
@@ -168,6 +122,20 @@ const copy = async () => {
   setTimeout(() => { copyButtonState.value = 'default' }, 1500)
 }
 
+const { init } = useToast()
+const copySandboxLink = async () => {
+  try {
+    await getWindow()?.navigator.clipboard.writeText(window.location.origin + '/play' + sandboxState.value)
+    init('Link copied to clipboard')
+  } catch (e: any) {
+    if (e.message === 'NotAllowedError') {
+      copyButtonState.value = 'error'
+    }
+  }
+
+  setTimeout(() => { copyButtonState.value = 'default' }, 1500)
+}
+
 const buttonStates = {
   active: { text: 'Copied', icon: 'fa4-check' },
   error: { text: 'Permission failure!', icon: 'fa4-times' },
@@ -175,8 +143,20 @@ const buttonStates = {
 }
 const copyButton = computed(() => buttonStates[copyButtonState.value])
 
-const sandboxDefineUrl = computed(() => `https://codesandbox.io/api/v1/sandboxes/define${query}`)
-const sandboxParams = computed(() => createCodeSandbox(props.code, props.config))
+const sandboxState = ref('')
+
+// Change URL without reloading page and updating vue-router
+watch(sandboxState, () => {
+  window.history.replaceState({}, '', '/play' + sandboxState.value)
+})
+
+const route = useRoute()
+const onHide = () => {
+  sandboxState.value = ''
+  nextTick(() => {
+    window.history.replaceState({}, '', route.path)
+  })
+}
 </script>
 
 <style lang="scss">
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
index 3ce45c02a7..15802d5f1d 100644
--- a/packages/docs/pages/play.vue
+++ b/packages/docs/pages/play.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-  const makeCode = (script: string, template: string, style: string) => {
+import { getWindow } from 'vuestic-ui/src/utils/ssr'
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
+
+definePageMeta({
+  layout: 'landing',
+})
+
+const makeCode = (script: string, template: string, style: string) => {
   let code = ''
 
   if (script.trim()) {
@@ -19,19 +26,78 @@
   return code
 }
 
-  const scriptText = `  import { ref } from 'vue'
+const scriptText = `  import { ref } from 'vue'
 
   const msg = ref('')`
 
-  const templateText = `  <h1 class="va-h1">{{ msg }}</h1>
+const templateText = `  <h1 class="va-h1">{{ msg }}</h1>
   <VaInput v-model="msg" />`
+
+const route = useRoute()
+
+const { init } = useToast()
+const sandboxState = ref(route.hash.slice(1) || '')
+const copySandboxLink = async () => {
+  try {
+    await getWindow()?.navigator.clipboard.writeText(window.location.origin + '/play' + sandboxState.value)
+    init('Link copied to clipboard')
+  } catch (e: any) {
+    init({
+      message: 'Failed to copy link to clipboard',
+      color: 'error',
+    })
+  }
+}
+
+const breakpoints = useBreakpoint()
+const isSidebarVisible = ref(false)
+const isOptionsVisible = ref(false)
+
+const isMounted = useIsMounted()
 </script>
 
 <template>
-  <ClientOnly>
-    <Play
-      class="h-[80vh]"
-      :code="makeCode(scriptText, templateText, '')"
-    />
-  </ClientOnly>
+  <VaLayout
+    v-if="isMounted"
+    class="h-[100vh]"
+    :top="{ fixed: true, order: 2 }"
+    :left="{ fixed: true, absolute: breakpoints.smDown ?? true, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
+    @left-overlay-click="isSidebarVisible = false"
+  >
+    <template #top>
+      <LayoutHeader
+        v-model:isSidebarVisible="isSidebarVisible"
+        v-model:isOptionsVisible="isOptionsVisible"
+      />
+    </template>
+
+    <template #left>
+      <LayoutSidebar
+        v-model:visible="isSidebarVisible"
+        :mobile="breakpoints.xs"
+      />
+    </template>
+
+    <template #content>
+      <main class="h-[100%] flex flex-col">
+        <ClientOnly>
+          <Play
+            v-model:state="sandboxState"
+            class="h-[100%] flex-1"
+            :code="makeCode(scriptText, templateText, '')"
+          />
+        </ClientOnly>
+
+        <div class="flex justify-end p-2">
+          <VaButton
+            icon="share"
+            preset="secondary"
+            @click="copySandboxLink"
+          >
+            Share
+          </VaButton>
+        </div>
+      </main>
+    </template>
+  </VaLayout>
 </template>

From 5aba20c6992f30e5dfddef0e8176e5f7a2ba6921 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Wed, 22 Nov 2023 06:45:33 +0200
Subject: [PATCH 07/14] fix: add missing styles to vuestic repl build

---
 packages/docs/components/Play.client.vue | 16 ++++++++++--
 packages/docs/modules/repl/index.ts      | 33 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index 1b5ca316e2..9a912090e8 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -50,19 +50,32 @@ watchEffect(() => {
   emit('update:state', store.serialize())
 })
 
+const { currentPresetName } = useColors()
+
 const previewOptions: ReplProps['previewOptions'] = {
   headHTML: `
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
+    <style>
+      body {
+        padding: 1rem;
+      }
+    </style>
   `,
   customCode: {
     importCode: `
       import { createVuestic } from "vuestic-ui";
     `,
     useCode: `
-      app.use(createVuestic({}))
+      app.use(createVuestic({
+        config: {
+          colors: {
+            currentPresetName: 'dark'
+          }
+        }
+      }))
     `
   }
 }
@@ -139,7 +152,6 @@ const codeGray = computed(() =>
 
       .output-container {
         height: 100%;
-        padding: 16px;
       }
 
       .editor-container {
diff --git a/packages/docs/modules/repl/index.ts b/packages/docs/modules/repl/index.ts
index caa945d5cd..89813311ff 100644
--- a/packages/docs/modules/repl/index.ts
+++ b/packages/docs/modules/repl/index.ts
@@ -2,6 +2,14 @@ import vue from '@vitejs/plugin-vue'
 import { resolve } from 'pathe';
 import { defineNuxtModule } from '@nuxt/kit';
 import { build } from 'vite'
+import { readFile, writeFile, rm } from 'fs/promises'
+
+const appendFileToTheEndOfFile = async (source: string, target: string) => {
+  const sourceFile = await readFile(source, 'utf-8')
+  const targetFile = await readFile(target, 'utf-8')
+  const result = targetFile + '\n' + sourceFile
+  await writeFile(target, result)
+}
 
 export default defineNuxtModule({
   meta: {
@@ -35,6 +43,31 @@ export default defineNuxtModule({
       plugins: [vue()],
     })
 
+    await build({
+      logLevel: 'error',
+      root: resolve(__dirname, '../../../ui/src'),
+
+      build: {
+        assetsDir: './',
+        sourcemap: false,
+        minify: 'esbuild',
+        cssCodeSplit: false,
+        outDir: resolve(__dirname, './../../public/vuestic-out/styles'),
+        emptyOutDir: false,
+
+        rollupOptions: {
+          input: resolve(__dirname, '../../../ui/src/styles/index.scss'),
+
+          output: {
+            assetFileNames: '[name].[ext]',
+          },
+        },
+      },
+    })
+
+    await appendFileToTheEndOfFile(resolve(__dirname, './../../public/vuestic-out/styles/style.css'), resolve(__dirname, './../../public/vuestic-out/style.css'))
+    await rm(resolve(__dirname, './../../public/vuestic-out/styles'), { recursive: true })
+
     nuxt.options.alias['#vuestic-repl-build/js'] = resolve(__dirname, './../../public/vuestic-out/main.js')
     nuxt.options.alias['#vuestic-repl-build/style'] = resolve(__dirname, './output/styles.css')
   }

From c381ce61c1034f8d2527a686a59e74a36dc6255e Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Wed, 22 Nov 2023 07:21:06 +0200
Subject: [PATCH 08/14] fix(docs): do not update url when modal opened, so
 reloading page doesn't break

---
 packages/docs/components/Play.client.vue      |  52 +++----
 packages/docs/layouts/play.vue                | 130 ++++++++++++++++++
 .../blocks/example/example-footer.vue         |  21 +--
 packages/docs/pages/play.vue                  |  75 ++++------
 4 files changed, 188 insertions(+), 90 deletions(-)
 create mode 100644 packages/docs/layouts/play.vue

diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index 9a912090e8..7f167c7cf7 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -17,7 +17,7 @@ const props = defineProps({
 
 const store = new ReplStore({
   showOutput: false,
-  serializedState: props.state,
+  serializedState: props.state.replace('#', ''),
 })
 
 const code = computed(() => {
@@ -51,8 +51,15 @@ watchEffect(() => {
 })
 
 const { currentPresetName } = useColors()
+const normalizePresetName = (presetName: string) => {
+  if (['dark', 'light'].includes(presetName)) {
+    return presetName
+  }
+
+  return 'light'
+}
 
-const previewOptions: ReplProps['previewOptions'] = {
+const previewOptions = computed<ReplProps['previewOptions']>(() => ({
   headHTML: `
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
@@ -72,16 +79,14 @@ const previewOptions: ReplProps['previewOptions'] = {
       app.use(createVuestic({
         config: {
           colors: {
-            currentPresetName: 'dark'
+            currentPresetName: ${JSON.stringify(normalizePresetName(currentPresetName.value))},
           }
         }
       }))
     `
   }
-}
+}))
 
-// Syntax highlighting colors
-// Notice: for some reason v-bind breaks the app
 const { getTextColor, colors } = useColors();
 
 const codeRed = computed(() =>
@@ -103,30 +108,12 @@ const codeGray = computed(() =>
 
 <template>
   <Repl
+    :key="currentPresetName"
     class="vuestic-repl"
     :editor="Editor"
     :store="store"
     :preview-options="previewOptions"
     :clear-console="false"
-    :style="{
-      '--symbols': codeGray,
-      '--base': codeGray,
-      '--comment': codeGray,
-      '--keyword': codeRed,
-      '--variable': codeGray,
-      '--function': codeOrange,
-      '--string': codeGreen,
-      '--number': codeOrange,
-      '--tags': codeRed,
-      '--brackets': codeCyan,
-      '--qualifier': codeOrange,
-      '--important': codeGreen,
-      '--attribute': codeCyan,
-      '--property': codeCyan,
-      '--selected-bg': colors.focus,
-      '--selected-bg-non-focus': colors.secondary,
-      '--cursor': colors.textPrimary,
-    }"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
   />
@@ -179,6 +166,21 @@ const codeGray = computed(() =>
         tab-size: 4;
         hyphens: none;
         border-radius: 0.25rem;
+        --base: var(--va-text-primary);
+        --symbols: v-bind(codeGray),
+        --comment: v-bind(codeGray);
+        --keyword: v-bind(codeRed);
+        --variable: v-bind(codeGray);
+        --function: v-bind(codeOrange);
+        --string: v-bind(codeGreen);
+        --number: v-bind(codeOrange);
+        --tags: v-bind(codeRed);
+        --brackets: v-bind(codeCyan);
+        --qualifier: v-bind(codeOrange);
+        --important: v-bind(codeGreen);
+        --attribute: v-bind(codeCyan);
+        --property: v-bind(codeCyan);
+        --cursor: v-bind(colors.textPrimary);
 
         .CodeMirror-selected {
           opacity: 0.2;
diff --git a/packages/docs/layouts/play.vue b/packages/docs/layouts/play.vue
new file mode 100644
index 0000000000..5c13263783
--- /dev/null
+++ b/packages/docs/layouts/play.vue
@@ -0,0 +1,130 @@
+<template>
+  <div
+    :key="isMounted + ''"
+  >
+    <div
+      v-if="!isMounted"
+      class="docs-layout__loader"
+    />
+    <VaLayout
+      :top="{ fixed: true, order: 2 }"
+      :left="{ fixed: true, absolute: breakpoints.smDown, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
+      class="docs-layout docs-layout--play"
+      @left-overlay-click="isSidebarVisible = false"
+    >
+      <template #top>
+        <LayoutHeader
+          v-model:isSidebarVisible="isSidebarVisible"
+          v-model:isOptionsVisible="isOptionsVisible"
+        />
+      </template>
+
+      <template #left>
+        <LayoutSidebar
+          v-model:visible="isSidebarVisible"
+          :mobile="breakpoints.xs"
+        />
+      </template>
+
+      <template #content>
+        <main class="docs-layout__main-content h-full">
+          <article class="docs-layout__page-content !p-0 !max-w-full h-full">
+            <slot />
+          </article>
+        </main>
+      </template>
+    </VaLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDocsScroll } from '../composables/useDocsScroll';
+import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
+
+const breakpoints = useBreakpoint()
+
+const isSidebarVisible = ref(false)
+const isOptionsVisible = ref(false)
+
+watch(() => breakpoints.smDown, (newValue: boolean) => {
+  isSidebarVisible.value = !newValue
+  isOptionsVisible.value = false
+})
+
+const { afterEach } = useRouter()
+const { scrollToElement } = useDocsScroll()
+afterEach(() => {
+  scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
+  isOptionsVisible.value = false
+})
+
+onMounted(() => {
+  scrollToElement()
+  isSidebarVisible.value = !breakpoints.smDown
+})
+
+useHead({
+  link: [
+    { href: 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css', rel: 'stylesheet' },
+    { href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', rel: 'stylesheet' },
+    { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css", rel: "stylesheet" },
+  ],
+  script: [
+    { src: 'https://kit.fontawesome.com/5460c87b2a.js', crossorigin: 'anonymous' },
+    { src: 'https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js', type: 'module' },
+  ],
+})
+
+const isMounted = useIsMounted()
+</script>
+
+<style lang="scss">
+@import 'vuestic-ui/styles/resources';
+@import '@/assets/fonts-imports.scss';
+@import '@/assets/smart-grid.scss';
+// Need to import tailwind in layout, because otherwise Vuestic component's css will has a higher priority
+// @import '~/assets/css/tailwind.css';
+
+html {
+  font-family: var(--va-font-family);
+  color: var(--va-text-primary);
+  background: var(--va-background-primary);
+}
+
+.docs-layout--play.docs-layout {
+  font-family: var(--va-font-family);
+  min-height: 100vh;
+
+  &__loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999999;
+    background: var(--va-background-primary);
+  }
+
+  &__main-section {
+    display: flex;
+    flex-grow: 2;
+    overflow: auto;
+    position: relative;
+  }
+
+  &__main-content {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background: var(--va-background-primary);
+  }
+
+  &__page-content {
+    width: 100%;
+    max-width: 100% !important;
+    box-sizing: border-box;
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 3de5a26a75..8509cb1b16 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -73,7 +73,8 @@
       </ClientOnly>
 
       <template #footer="{ ok }">
-        <div class="flex gap-2">
+        <div class="flex gap-2 w-full px-5">
+          <VaInput :model-value="shareLink" label="Sandbox link" inner-label class="flex-1 w-full" />
           <VaButton @click="copySandboxLink" icon="share" preset="secondary">
             Share
           </VaButton>
@@ -123,14 +124,13 @@ const copy = async () => {
 }
 
 const { init } = useToast()
+const shareLink = computed(() => getWindow()?.location.origin + '/play' + sandboxState.value)
 const copySandboxLink = async () => {
   try {
     await getWindow()?.navigator.clipboard.writeText(window.location.origin + '/play' + sandboxState.value)
     init('Link copied to clipboard')
   } catch (e: any) {
-    if (e.message === 'NotAllowedError') {
-      copyButtonState.value = 'error'
-    }
+    init('Permission failure!')
   }
 
   setTimeout(() => { copyButtonState.value = 'default' }, 1500)
@@ -144,19 +144,6 @@ const buttonStates = {
 const copyButton = computed(() => buttonStates[copyButtonState.value])
 
 const sandboxState = ref('')
-
-// Change URL without reloading page and updating vue-router
-watch(sandboxState, () => {
-  window.history.replaceState({}, '', '/play' + sandboxState.value)
-})
-
-const route = useRoute()
-const onHide = () => {
-  sandboxState.value = ''
-  nextTick(() => {
-    window.history.replaceState({}, '', route.path)
-  })
-}
 </script>
 
 <style lang="scss">
diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
index 15802d5f1d..0d38aa353a 100644
--- a/packages/docs/pages/play.vue
+++ b/packages/docs/pages/play.vue
@@ -3,7 +3,7 @@ import { getWindow } from 'vuestic-ui/src/utils/ssr'
 import { useIsMounted } from 'vuestic-ui/src/composables/useIsMounted'
 
 definePageMeta({
-  layout: 'landing',
+  layout: 'play',
 })
 
 const makeCode = (script: string, template: string, style: string) => {
@@ -49,55 +49,34 @@ const copySandboxLink = async () => {
   }
 }
 
-const breakpoints = useBreakpoint()
-const isSidebarVisible = ref(false)
-const isOptionsVisible = ref(false)
-
-const isMounted = useIsMounted()
+// Change URL without reloading page and updating vue-router
+watch(sandboxState, () => {
+  window.history.replaceState({}, '', '/play' + sandboxState.value)
+})
 </script>
 
 <template>
-  <VaLayout
-    v-if="isMounted"
-    class="h-[100vh]"
-    :top="{ fixed: true, order: 2 }"
-    :left="{ fixed: true, absolute: breakpoints.smDown ?? true, overlay: breakpoints.smDown && isSidebarVisible, order: 1 }"
-    @left-overlay-click="isSidebarVisible = false"
-  >
-    <template #top>
-      <LayoutHeader
-        v-model:isSidebarVisible="isSidebarVisible"
-        v-model:isOptionsVisible="isOptionsVisible"
-      />
-    </template>
-
-    <template #left>
-      <LayoutSidebar
-        v-model:visible="isSidebarVisible"
-        :mobile="breakpoints.xs"
+  <main class="h-[100%] flex flex-col">
+    <ClientOnly>
+      <Play
+        v-model:state="sandboxState"
+        class="h-[100%] flex-1"
+        :code="makeCode(scriptText, templateText, '')"
       />
-    </template>
-
-    <template #content>
-      <main class="h-[100%] flex flex-col">
-        <ClientOnly>
-          <Play
-            v-model:state="sandboxState"
-            class="h-[100%] flex-1"
-            :code="makeCode(scriptText, templateText, '')"
-          />
-        </ClientOnly>
-
-        <div class="flex justify-end p-2">
-          <VaButton
-            icon="share"
-            preset="secondary"
-            @click="copySandboxLink"
-          >
-            Share
-          </VaButton>
-        </div>
-      </main>
-    </template>
-  </VaLayout>
+    </ClientOnly>
+
+    <div class="flex justify-between items-center py-2 px-4 border-t-2 border-[var(--va-background-border)] bg-[var(--va-background-secondary)]">
+      <div>
+        Playground <span class="text-[var(--va-secondary)]">vuestic-ui@latest - vue@latest</span>
+      </div>
+
+      <VaButton
+        icon="share"
+        preset="secondary"
+        @click="copySandboxLink"
+      >
+        Share
+      </VaButton>
+    </div>
+  </main>
 </template>

From 0ee8fe6ddcb73dadfd3e1c54c0e8c8a7697dba7d Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 23 Nov 2023 06:19:40 +0200
Subject: [PATCH 09/14] docs(repl): fix tailwind custom classes

---
 packages/docs/components/Play.client.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index 7f167c7cf7..f2479d2082 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -59,9 +59,10 @@ const normalizePresetName = (presetName: string) => {
   return 'light'
 }
 
+// eslint-disable-next-line no-useless-escape
+const TAILWIND_CDN = '<script src="https://cdn.tailwindcss.com"><\/script>'
 const previewOptions = computed<ReplProps['previewOptions']>(() => ({
   headHTML: `
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="${window.location.origin + '/vuestic-out/style.css'}">
@@ -70,6 +71,7 @@ const previewOptions = computed<ReplProps['previewOptions']>(() => ({
         padding: 1rem;
       }
     </style>
+    ${TAILWIND_CDN}
   `,
   customCode: {
     importCode: `

From 98bf230cab3ca5073bbf1a26ebcadceca7f4707d Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 23 Nov 2023 11:58:55 +0200
Subject: [PATCH 10/14] docs: add tailwindcss as visible dependency on play
 page

---
 packages/docs/pages/play.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/pages/play.vue b/packages/docs/pages/play.vue
index 0d38aa353a..8d248dd16a 100644
--- a/packages/docs/pages/play.vue
+++ b/packages/docs/pages/play.vue
@@ -67,7 +67,7 @@ watch(sandboxState, () => {
 
     <div class="flex justify-between items-center py-2 px-4 border-t-2 border-[var(--va-background-border)] bg-[var(--va-background-secondary)]">
       <div>
-        Playground <span class="text-[var(--va-secondary)]">vuestic-ui@latest - vue@latest</span>
+        Playground <span class="text-[var(--va-secondary)]">vuestic-ui@latest - vue@latest - tailwindcss@latest</span>
       </div>
 
       <VaButton

From b36ee271777be41d5722b5d2ce404670a9a042ae Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 1 Dec 2023 11:27:28 +0200
Subject: [PATCH 11/14] chore: remove some of css from examples

---
 packages/docs/components/Play.client.vue      | 29 +++++++++++++++++--
 .../examples/components/colors-editor.vue     |  2 +-
 .../components-config/examples/va-config.vue  |  8 ++---
 .../data-table/examples/ColgroupSlots.vue     |  2 +-
 .../file-upload/examples/Slots.vue            |  2 +-
 .../scroll-container/examples/Default.vue     |  2 +-
 .../sidebar-item/examples/Components.vue      |  2 +-
 .../ui-elements/sidebar/examples/Position.vue |  2 +-
 .../ui-elements/table/examples/Clickable.vue  |  2 +-
 .../ui-elements/table/examples/Default.vue    |  2 +-
 .../ui-elements/table/examples/Hoverable.vue  |  2 +-
 .../ui-elements/table/examples/Striped.vue    |  2 +-
 .../ui-elements/value/examples/String.vue     | 21 +++++++-------
 .../ui-elements/value/examples/WithInputs.vue |  4 +--
 14 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/packages/docs/components/Play.client.vue b/packages/docs/components/Play.client.vue
index f2479d2082..7b36cb244f 100644
--- a/packages/docs/components/Play.client.vue
+++ b/packages/docs/components/Play.client.vue
@@ -2,6 +2,7 @@
 import { Repl, ReplStore, ReplProps } from '@vue/repl'
 import Editor from '@vue/repl/codemirror-editor'
 import '@vue/repl/style.css'
+import { PropType } from 'vue';
 
 const props = defineProps({
   code: {
@@ -11,6 +12,10 @@ const props = defineProps({
   state: {
     type: String,
     default: ''
+  },
+  dependencies: {
+    type: Object as PropType<Record<`${string}.${'js'|'css'|'mjs'}`, string>>,
+    default: () => ({})
   }
 })
 
@@ -20,8 +25,12 @@ const store = new ReplStore({
   serializedState: props.state.replace('#', ''),
 })
 
+const normalizeCode = (code: string) => {
+  return code.replace('<style lang="scss"', '<style')
+}
+
 const code = computed(() => {
-  return props.code || '<template>\n  <div>Hello world</div>\n</template>'
+  return normalizeCode(props.code) || '<template>\n  <div>Hello world</div>\n</template>'
 })
 
 const setFiles = () => {
@@ -33,10 +42,10 @@ const setFiles = () => {
     },
   })
 
-  if (props.code && !props.state) {
+  if (code.value && !props.state) {
     store.setFiles({
       ...store.getFiles(),
-      'App.vue': props.code,
+      'App.vue': code.value,
     })
   }
 }
@@ -59,6 +68,19 @@ const normalizePresetName = (presetName: string) => {
   return 'light'
 }
 
+const dependenciesCSSCode = computed(() => {
+  return Object.entries(props.dependencies)
+    .map(([key, url]) => {
+      const extension = url.split('.').pop()
+      if (extension === 'css') {
+        return `<link rel="stylesheet" href="${url}">`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join('\n')
+})
+
 // eslint-disable-next-line no-useless-escape
 const TAILWIND_CDN = '<script src="https://cdn.tailwindcss.com"><\/script>'
 const previewOptions = computed<ReplProps['previewOptions']>(() => ({
@@ -72,6 +94,7 @@ const previewOptions = computed<ReplProps['previewOptions']>(() => ({
       }
     </style>
     ${TAILWIND_CDN}
+    ${dependenciesCSSCode.value}
   `,
   customCode: {
     importCode: `
diff --git a/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue b/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
index 8fdc66ef93..ca5fb8ad09 100644
--- a/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
+++ b/packages/docs/page-config/services/colors-config/examples/components/colors-editor.vue
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .r {
   display: flex;
   align-items: center;
diff --git a/packages/docs/page-config/services/components-config/examples/va-config.vue b/packages/docs/page-config/services/components-config/examples/va-config.vue
index d697fe835f..96db1dc0bb 100644
--- a/packages/docs/page-config/services/components-config/examples/va-config.vue
+++ b/packages/docs/page-config/services/components-config/examples/va-config.vue
@@ -26,10 +26,8 @@
   </VaAlert>
 </template>
 
-<style lang="scss" scoped>
-.alert-content {
-  .va-button {
-    margin-right: 0.5rem;
-  }
+<style>
+.alert-content .va-button {
+  margin-right: 0.5rem;
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
index b2d2ac033e..0ddbce3848 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
@@ -59,7 +59,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .table-slots {
   background-color: var(--va-background-element);
   color: var(--va-on-background-element);
diff --git a/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue b/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
index 6164e363c6..90fdca9780 100644
--- a/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
+++ b/packages/docs/page-config/ui-elements/file-upload/examples/Slots.vue
@@ -24,7 +24,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .custom-upload-file-area {
   width: max-content;
   padding: 1rem;
diff --git a/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
index d32d5d572a..92eb6f01ec 100644
--- a/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/scroll-container/examples/Default.vue
@@ -76,7 +76,7 @@ const contacts = [
 ];
 </script>
 
-<style lang="scss" scoped>
+<style>
 .list__item + .list__item {
   margin-top: 20px;
 }
diff --git a/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue b/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
index 2bfe2da978..cc5a6b8671 100644
--- a/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
+++ b/packages/docs/page-config/ui-elements/sidebar-item/examples/Components.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .expanded {
   background-color: var(--va-background-primary);
 }
diff --git a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
index ce68714509..9938e90a9c 100644
--- a/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
+++ b/packages/docs/page-config/ui-elements/sidebar/examples/Position.vue
@@ -53,7 +53,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style>
 .content {
   width: 100%;
   height: 100%;
diff --git a/packages/docs/page-config/ui-elements/table/examples/Clickable.vue b/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
index 3b8583b3b2..71fc645efc 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Clickable.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Default.vue b/packages/docs/page-config/ui-elements/table/examples/Default.vue
index ae72ee6091..3a028f1bdb 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Default.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue b/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
index 25c27b1d51..40c4e20947 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Hoverable.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/table/examples/Striped.vue b/packages/docs/page-config/ui-elements/table/examples/Striped.vue
index 3294af30df..646782122a 100644
--- a/packages/docs/page-config/ui-elements/table/examples/Striped.vue
+++ b/packages/docs/page-config/ui-elements/table/examples/Striped.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style>
 .va-table-responsive {
   overflow: auto;
 }
diff --git a/packages/docs/page-config/ui-elements/value/examples/String.vue b/packages/docs/page-config/ui-elements/value/examples/String.vue
index c36852f45b..dc9348f07b 100644
--- a/packages/docs/page-config/ui-elements/value/examples/String.vue
+++ b/packages/docs/page-config/ui-elements/value/examples/String.vue
@@ -1,8 +1,8 @@
 <template>
   <VaValue v-slot="inputText" default-value="Vuestic">
     <div class="preview">
-      <VaValue 
-        v-for="i in 20" 
+      <VaValue
+        v-for="i in 20"
         v-slot="textPosition"
         :default-value="{
           left: Math.random() * 80 + 10,
@@ -11,7 +11,7 @@
           fontSize: Math.random() * 20 + 10,
         }"
       >
-        <span 
+        <span
           :style="{
             left: `${textPosition.value.left}%`,
             top: `${textPosition.value.top}%`,
@@ -28,15 +28,16 @@
   </VaValue>
 </template>
 
-<style lang="scss" scoped>
+<style>
   .preview {
     position: relative;
     height: 200px;
     background: var(--va-primary);
-    span {
-      position: absolute;
-      color: var(--va-on-primary);
-      font-weight: 800;
-    }
   }
-</style>
\ No newline at end of file
+
+  .preview span {
+    position: absolute;
+    color: var(--va-on-primary);
+    font-weight: 800;
+  }
+</style>
diff --git a/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue b/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
index 0177df5c65..7484dea4f6 100644
--- a/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
+++ b/packages/docs/page-config/ui-elements/value/examples/WithInputs.vue
@@ -22,7 +22,7 @@
   })
 </script>
 
-<style lang="scss" scoped>
+<style>
   .item {
     height: 2rem;
   }
@@ -33,4 +33,4 @@
     padding: 0 4px;
     margin: 0 -4px;
   }
-</style>
\ No newline at end of file
+</style>

From 1322b5b0a830bc32cf16dc971ef9c2375720c601 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 1 Dec 2023 11:27:44 +0200
Subject: [PATCH 12/14] chore(docs): hide playground for scss examples

---
 .../modules/page-config/blocks/example/example-footer.vue   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 2592978ffa..091863eaf4 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -47,11 +47,11 @@
     </VaButton>
 
     <VaModal
+      v-if="doShowPlaygroundButton"
       stateful
       fullscreen
       class="playground-modal"
       hide-default-actions
-      @ok="onHide"
     >
       <template #anchor="{ show }">
         <VaButton
@@ -150,6 +150,10 @@ const buttonStates = {
 const copyButton = computed(() => buttonStates[copyButtonState.value])
 
 const sandboxState = ref('')
+
+const doShowPlaygroundButton = computed(() => {
+  return !props.code.includes('<style lang="scss"') && !props.code.includes('@import')
+})
 </script>
 
 <style lang="scss">

From 5588c3b86d41f28ce2548662a79bf0958e53f6b1 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 1 Dec 2023 11:47:32 +0200
Subject: [PATCH 13/14] chore: bring-back codesandbox for complex examples

---
 .../blocks/example/example-footer.vue         | 61 ++++++++++++++++++-
 .../page-config/blocks/example/index.vue      |  1 +
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index 091863eaf4..c451932565 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -90,12 +90,68 @@
         </div>
       </template>
     </VaModal>
+    <form
+      v-else
+      :action="sandboxDefineUrl"
+      method="POST"
+      target="_blank"
+    >
+      <input
+        type="hidden"
+        name="parameters"
+        :value="sandboxParams"
+      >
+      <VaButton
+        preset="secondary"
+        type="submit"
+        size="small"
+        class="docs-navigation__button"
+        color="secondary"
+      >
+        <VaIcon
+          class="docs-navigation__button__icon"
+          size="13px"
+        >
+          <svg
+            id="IconChangeColor"
+            xmlns="http://www.w3.org/2000/svg"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#737373"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-codesandbox"
+          >
+            <path
+              id="mainIconPathAttribute"
+              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+              fill="transparent"
+              stroke="#737373"
+            />
+            <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
+            <polyline points="7.5 19.79 7.5 14.6 3 12" />
+            <polyline points="21 12 16.5 14.6 16.5 19.79" />
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+            <line
+              x1="12"
+              y1="22.08"
+              x2="12"
+              y2="12"
+            />
+          </svg>
+        </VaIcon>
+        <span class="docs-navigation__button__text">Open in CodeSandbox</span>
+      </VaButton>
+    </form>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, PropType, ref, Ref } from 'vue'
-import { type CodeSandboxConfig, } from '@/composables/code-sandbox'
+import { createCodeSandbox, type CodeSandboxConfig, } from '@/composables/code-sandbox'
 import { getWindow } from 'vuestic-ui/src/utils/ssr'
 
 type ButtonStates = 'active' | 'error' | 'default'
@@ -148,6 +204,9 @@ const buttonStates = {
   default: { text: 'Copy code', icon: 'fa4-files-o' },
 }
 const copyButton = computed(() => buttonStates[copyButtonState.value])
+const query = '?query=file=/src/App.vue'
+const sandboxDefineUrl = computed(() => `https://codesandbox.io/api/v1/sandboxes/define${query}`)
+const sandboxParams = computed(() => createCodeSandbox(props.code, props.config))
 
 const sandboxState = ref('')
 
diff --git a/packages/docs/modules/page-config/blocks/example/index.vue b/packages/docs/modules/page-config/blocks/example/index.vue
index 386cda64b1..a9d1788e98 100644
--- a/packages/docs/modules/page-config/blocks/example/index.vue
+++ b/packages/docs/modules/page-config/blocks/example/index.vue
@@ -93,6 +93,7 @@ const sourceComputed = computed(() => props.customCode?.source || props.source);
       :code="sourceComputed"
       :git-link="gitLink"
       :hide-show-code-button="forceShowCode || hideCode"
+      :config="codesandboxConfig"
     />
 
     <template v-if="(showCode && !hideCode) || forceShowCode">

From 5c3d99f4c46ffaf0bad72d8e8d63e6273b50ea06 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 7 Dec 2023 19:52:12 +0200
Subject: [PATCH 14/14] chore: update icons in playground

---
 .../page-config/blocks/example/example-footer.vue     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/docs/modules/page-config/blocks/example/example-footer.vue b/packages/docs/modules/page-config/blocks/example/example-footer.vue
index c451932565..db2bf1f0d2 100644
--- a/packages/docs/modules/page-config/blocks/example/example-footer.vue
+++ b/packages/docs/modules/page-config/blocks/example/example-footer.vue
@@ -80,13 +80,12 @@
 
       <template #footer="{ ok }">
         <div class="flex gap-2 w-full px-5">
-          <VaInput :model-value="shareLink" label="Sandbox link" inner-label class="flex-1 w-full" />
-          <VaButton icon="share" preset="secondary" @click="copySandboxLink">
-            Share
-          </VaButton>
-          <VaButton @click="ok">
-            Hide
+          <VaInput v-if="$vaBreakpoint.smUp" :model-value="shareLink" label="Sandbox link" inner-label class="flex-1 w-full" />
+          <VaSpacer v-else />
+          <VaButton icon="content_copy" preset="secondary" @click="copySandboxLink">
+            Copy link
           </VaButton>
+          <VaButton preset="secondary" icon="close" @click="ok" />
         </div>
       </template>
     </VaModal>