@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

package/dist/runtime/editor/components/Form/Toggle/index.vue

@@ -1,7 +1,7 @@
 <template>
   <label class="bk-checkbox-toggle">
     <slot />
-    <input v-model="value" type="checkbox" class="peer" :disabled />
+    <input v-model="value" type="checkbox" class="_bk_peer" :disabled />
     <div class="bk-checkbox-toggle-toggle" />
     <div v-if="label || description" class="bk-checkbox-toggle-label">
       <div v-if="label" class="bk-checkbox-toggle-label-label">{{ label }}</div>
@@ -24,3 +24,207 @@ defineProps({
 });
 const value = defineModel({ type: Boolean });
 </script>
+
+<style>
+.bk .bk-checkbox-toggle {
+
+    position: relative;
+
+    display: flex;
+
+    height: 100%;
+
+    cursor: pointer;
+
+    line-height: 1;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-checkbox-toggle:has(input[disabled]) {
+
+    cursor: not-allowed !important;
+
+    --bk-tw-text-opacity: 1 !important;
+
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1)) !important
+}
+
+    .bk .bk-checkbox-toggle:has(input[disabled]) .bk-checkbox-toggle-toggle {
+
+    --bk-tw-bg-opacity: 1 !important;
+
+    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1)) !important
+}
+
+    .bk .bk-checkbox-toggle:has(input[disabled]) .bk-checkbox-toggle-label-description {
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-checkbox-toggle .bk-form-disabled-reason {
+
+    margin-top: 8px
+}
+
+    .bk .bk-checkbox-toggle:focus-within input + .bk-checkbox-toggle-toggle {
+
+    outline-style: solid;
+
+    outline-offset: 2px;
+
+    outline-color: rgb(var(--bk-theme-accent-950) / 0.8)
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label .bk-checkbox-toggle-label-label {
+
+    font-weight: 600
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label .bk-checkbox-toggle-label-description {
+
+    max-width: 500px;
+
+    text-wrap: pretty;
+
+    font-size: 14px;
+
+    line-height: 20px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-label {
+
+    display: inline-block;
+
+    padding-right: 10px;
+
+    font-size: 16px;
+
+    line-height: 24px
+}
+
+    @media not all and (hover: none) {
+.bk .bk-checkbox-toggle:hover {
+
+        --bk-tw-text-opacity: 1;
+
+        color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1))
+    }
+    }
+
+    .bk .bk-checkbox-toggle input {
+
+    position: absolute;
+
+    width: 1px;
+
+    height: 1px;
+
+    padding: 0;
+
+    margin: -1px;
+
+    overflow: hidden;
+
+    clip: rect(0, 0, 0, 0);
+
+    white-space: nowrap;
+
+    border-width: 0
+}
+
+    .bk .bk-checkbox-toggle input:checked + .bk-checkbox-toggle-toggle {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1))
+}
+
+    .bk .bk-checkbox-toggle input:checked + .bk-checkbox-toggle-toggle::after {
+
+    --bk-tw-translate-x: 100%;
+
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+
+    content: var(--bk-tw-content);
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(255 255 255 / var(--bk-tw-border-opacity, 1))
+}
+
+    @media not all and (hover: none) {
+      .bk .bk-checkbox-toggle input:not(:checked):hover + .bk-checkbox-toggle-toggle {
+
+        --bk-tw-bg-opacity: 1;
+
+        background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1))
+    }
+      .bk .bk-checkbox-toggle input:checked:hover + .bk-checkbox-toggle-toggle {
+
+        --bk-tw-bg-opacity: 1;
+
+        background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1))
+    }
+    }
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle {
+
+    position: relative;
+
+    height: 20px;
+
+    width: 36px;
+
+    flex-shrink: 0;
+
+    border-radius: 9999px;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-bg-opacity, 1))
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle::after {
+
+    position: absolute;
+
+    top: 2px;
+
+    left: 2px;
+
+    height: 16px;
+
+    width: 16px;
+
+    border-radius: 9999px;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-content: '';
+
+    content: var(--bk-tw-content)
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle {
+
+    margin-right: 5px;
+
+    margin-top: 0px
+}
+
+    .bk .bk-checkbox-toggle .bk-checkbox-toggle-toggle:last-child {
+
+    margin-right: 0px
+}
+</style>

package/dist/runtime/editor/components/FormOverlay/index.vue

@@ -53,3 +53,93 @@ export default {
   name: "FormOverlay"
 };
 </script>
+
+<style>
+.bk.bk-form-overlay-footer {
+  position: sticky;
+  bottom: 0px;
+  z-index: 50;
+  display: flex;
+  gap: 20px;
+  border-top-width: 1px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  padding: 20px;
+}
+  .bk.bk-form-overlay-footer .bk-button {
+  width: 100%;
+}
+
+.bk-vars .bk-form-overlay-content {
+  position: relative;
+  flex: 1 1 0%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+}
+
+@media (min-width: 768px) {
+  .bk-vars .bk-form-overlay-content {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+}
+
+.bk-vars .bk-form-overlay-content {
+  container-type: inline-size;
+}
+
+.bk-vars.bk-form-overlay {
+  pointer-events: none;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: calc(var(--bk-z-index-base) + 350000) /* "form-overlay" */;
+  height: 100%;
+  width: 100%;
+}
+
+.bk-vars.bk-form-overlay .bk-form-overlay-resizable {
+  pointer-events: auto;
+  margin-left: auto;
+  height: 100%;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+}
+
+.bk-vars.bk-form-overlay .bk-resizable-inner {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.bk-vars.bk-form-overlay .bk.bk-overlay-header {
+  z-index: calc(var(--bk-z-index-base) + 360000) /* "form-overlay-header" */;
+}
+
+@media (min-width: 768px) {
+
+.bk-vars.bk-form-overlay .bk.bk-overlay-header {
+    height: 50px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+    padding-left: 15px;
+  }
+
+      .bk-vars.bk-form-overlay .bk.bk-overlay-header > button {
+    aspect-ratio: 1 / 1;
+    height: 100%;
+  }
+
+      .bk-vars.bk-form-overlay .bk.bk-overlay-header > button:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  }
+    }
+</style>

package/dist/runtime/editor/components/Icon/index.vue

@@ -33,3 +33,9 @@ export default {
   name: "Icon"
 };
 </script>
+
+<style>
+.bk-icon svg {
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/components/Indicators/index.vue

@@ -131,3 +131,164 @@ watch(selection.uuids, function() {
   highlighted.value = null;
 });
 </script>
+
+<style>
+.bk.bk-indicators {
+
+    pointer-events: none;
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    z-index: calc(var(--bk-z-index-base) + 50000) /* "interaction-overlay" */;
+
+    transform-origin: top left
+}
+
+    .bk.bk-indicators #bk-indicators-left {
+
+    position: absolute;
+
+    right: 100%;
+
+    top: 0px;
+
+    height: 100%;
+
+    white-space: nowrap
+}
+
+    .bk.bk-indicators #bk-indicators-left .bk-indicator-item {
+
+    right: 0px;
+
+    padding-right: 10px
+}
+
+    .bk.bk-indicators .bk-indicator-item {
+
+    pointer-events: auto;
+
+    position: absolute;
+
+    top: 0px;
+
+    display: flex;
+
+    height: 30px;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk.bk-indicators .bk-indicator-item .bk-icon {
+
+    width: 20px;
+
+    height: 20px;
+
+    border-radius: 9999px;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+
+    padding: 2px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk.bk-indicators .bk-indicator-item .bk-icon svg {
+
+    fill: white
+}
+
+    .bk.bk-indicators .bk-indicator-item:hover {
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk.bk-indicators .bk-indicator-item:hover .bk-icon {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-bg-opacity, 1))
+}
+
+    .bk.bk-indicators .bk-indicator-item-inner {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 5px;
+
+    font-size: 12px;
+
+    line-height: 16px;
+
+    font-weight: 500
+}
+
+    .bk.bk-indicators .bk-indicators-hovered {
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    border-radius: 4px;
+
+    border-width: 3px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+
+    background-color: rgb(var(--bk-theme-red-normal) / 0.3)
+}
+
+    .bk.bk-indicators .bk-indicators-highlighted {
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    border-radius: 4px;
+
+    border-width: 3px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+
+    outline-style: solid;
+
+    outline-color: white;
+
+    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color);
+
+    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(4px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
+
+    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000);
+
+    --bk-tw-ring-opacity: 1;
+
+    --bk-tw-ring-color: rgb(var(--bk-theme-accent-300) / var(--bk-tw-ring-opacity, 1))
+}
+</style>

package/dist/runtime/editor/components/InfoBox/index.vue

@@ -17,3 +17,68 @@ defineProps({
   color: { type: String, required: false, default: "yellow" }
 });
 </script>
+
+<style>
+.bk .bk-info-box {
+
+    border-radius: 6px;
+
+    padding: 15px;
+
+    font-weight: 500;
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 10px
+}
+
+  .bk .bk-info-box.bk-is-yellow {
+
+    border-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-border-opacity, 1));
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-info-box.bk-is-accent {
+
+    border-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-border-opacity, 1));
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-info-box .bk-icon {
+
+    width: 30px;
+
+    height: 30px;
+
+    flex-shrink: 0
+}
+
+  .bk .bk-info-box .bk-icon svg {
+
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/components/Konami/index.vue

@@ -40,3 +40,122 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 </script>
+
+<style>
+.bk.bk-konami {
+  --bg: #859018;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 9999999999999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+  .bk.bk-konami .bk-konami-game {
+  position: relative;
+  padding: 60px;
+  --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  outline-style: solid;
+  outline-width: 5px;
+  outline-color: rgb(var(--bk-theme-mono-900) / 1);
+  overflow: hidden;
+  border-radius: 2vw;
+    background: var(--bg);
+}
+
+  .bk.bk-konami .bk-konami-game:before {
+      content: '';
+      position: absolute;
+      inset: 0px;
+      z-index: 999;
+      box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
+    }
+
+  .bk.bk-konami .bk-konami-game canvas {
+  display: block;
+}
+
+  .bk.bk-konami .bk-konami-game canvas.bk-is-pixel-grid {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+        image-rendering: pixelated;
+}
+
+  .bk.bk-konami .bk-konami-game canvas.bk-is-display {
+        image-rendering: pixelated;
+      }
+
+  .bk.bk-konami .bk-konami-game-canvas {
+  position: relative;
+    outline: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+  .bk.bk-konami .bk-konami-game-block-icon {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+    transition: all 0.1s ease;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+  .bk.bk-konami .bk-konami-game-block-icon svg {
+  width: 60%;
+  height: 60%;
+  fill: currentColor;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-konami .bk-konami-score {
+  text-align: center;
+  font-size: 24px;
+  line-height: 32px;
+    color: #0f0;
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
+}
+
+  .bk.bk-konami .bk-konami-game-over {
+  margin-top: 5px;
+  text-align: center;
+  font-size: 30px;
+  line-height: 36px;
+    color: #f00;
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+}
+
+  .bk.bk-konami .bk-konami-instructions {
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+  opacity: 0.7;
+    color: #0f0;
+    font-family: 'Courier New', monospace;
+}
+
+  .bk.bk-konami .bk-konami-debug-canvas {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+}
+
+  .bk.bk-konami .bk-konami-debug-canvas canvas {
+      image-rendering: pixelated;
+    }
+</style>

package/dist/runtime/editor/components/Loading/index.d.vue.ts

@@ -1,9 +1,12 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
+    theme?: "white" | "light" | "dark";
     screen?: boolean;
-    white?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    theme?: "white" | "light" | "dark";
     screen?: boolean;
-    white?: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}> & Readonly<{}>, {
+    theme: "white" | "light" | "dark";
+    screen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/Loading/index.vue

@@ -1,17 +1,22 @@
 <template>
   <div
-    class="bk bk-loading-overlay"
-    :class="{ 'bk-is-screen': screen, 'bk-is-white': white }"
+    class="bk _bk_absolute _bk_top-0 _bk_left-0 _bk_size-full _bk_z-init-overlay _bk_flex _bk_items-center _bk_justify-center"
+    :class="{
+  '_bk_!fixed _bk_!size-screen _bk_bg-mono-100': screen,
+  '_bk_bg-mono-100/90 _bk_text-mono-500': theme === 'light',
+  '_bk_bg-white/90 _bk_text-mono-500': theme === 'white',
+  '_bk_bg-mono-900/90 _bk_text-mono-200': theme === 'dark'
+}"
   >
-    <Icon name="spinner" />
+    <Icon name="spinner" class="_bk_size-100 _bk_animate-spin" />
   </div>
 </template>
 
 <script setup>
 import { Icon } from "#blokkli/editor/components";
 defineProps({
-  screen: { type: Boolean, required: false },
-  white: { type: Boolean, required: false }
+  theme: { type: String, required: false, default: "light" },
+  screen: { type: Boolean, required: false, default: false }
 });
 </script>