@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/analyze/index.vue

@@ -72,459 +72,8 @@ export default {
 };
 </script>
 
-<style>
-.bk.bk-analyze {
-    user-select: text
-}
-  .bk.bk-analyze .bk-analyze-button {
-    display: grid;
-    gap: 10px;
-    padding: 20px
-}
-  .bk.bk-analyze .bk-analyze-button button {
-    width: 100%
-}
-  .bk.bk-analyze .bk-analyze-button .bk-message-info {
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500
-}
-  .bk.bk-analyze .bk-analyze-last-run {
-    border-radius: 4px;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-    padding: 10px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 600;
-    text-transform: uppercase;
-    --bk-tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--bk-tw-ordinal) var(--bk-tw-slashed-zero) var(--bk-tw-numeric-figure) var(--bk-tw-numeric-spacing) var(--bk-tw-numeric-fraction);
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-form {
-    border-top-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding: 20px
-}
-  .bk.bk-analyze .bk-analyze-statuses {
-    display: grid;
-    gap: 5px
-}
-  .bk.bk-analyze .bk-analyze-status-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    line-height: 20px
-}
-  .bk.bk-analyze .bk-analyze-status-item .bk-analyze-status-title {
-    font-weight: 500;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-status-item .bk-analyze-status-label {
-    border-radius: 4px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-    padding-left: 5px;
-    padding-right: 5px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 600;
-    text-transform: uppercase;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-status-item .bk-analyze-status-label.bk-is-stale {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-orange-light) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-orange-dark) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-progress label {
-    margin-bottom: 10px;
-    display: block;
-    font-weight: 600
-}
-  .bk.bk-analyze .bk-analyze-progress .bk-analyze-progress-bar {
-    overflow: hidden;
-    border-radius: 4px
-}
-  .bk.bk-analyze .bk-analyze-progress progress {
-    display: block;
-    width: 100%;
-    appearance: none
-}
-  .bk.bk-analyze .bk-analyze-progress progress::-webkit-progress-bar {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-progress progress::-webkit-progress-value {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-accent-600) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-wrapper {
-    position: relative
-}
-  .bk.bk-analyze .bk-analyze-wrapper.bk-is-loading {
-    opacity: 0.3
-}
-  .bk.bk-analyze .bk-analyze-summary {
-    padding: 20px;
-    padding-top: 0px
-}
-  .bk.bk-analyze .bk-analyze-summary-chart {
-    display: flex;
-    align-items: center;
-    gap: 20px
-}
-  .bk.bk-analyze .bk-analyze-summary-chart > ul {
-    display: flex;
-    flex: 1 1 0%;
-    flex-direction: column;
-    gap: 7px
-}
-  .bk.bk-analyze .bk-analyze-summary-chart > ul > li {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    line-height: 1
-}
-  .bk.bk-analyze .bk-analyze-summary-chart > ul > li > div:first-child {
-    width: 0.75em;
-    height: 0.75em;
-    flex-shrink: 0;
-    border-radius: 9999px
-}
-  .bk.bk-analyze .bk-analyze-summary-chart > ul > li > div:last-child {
-    display: flex;
-    flex: 1 1 0%;
-    justify-content: space-between;
-    font-weight: 600
-}
-  .bk.bk-analyze .bk-analyze-summary-chart svg text {
-    font-weight: 700;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-tags {
-    margin-bottom: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px
-}
-  .bk.bk-analyze .bk-analyze-results-item-tags .bk-pill {
-    margin-left: 0px;
-    white-space: nowrap;
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk.bk-analyze .bk-analyze-status.bk-is-pass {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-status.bk-is-incomplete {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-yellow-normal) / 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-analyze .bk-analyze-status.bk-is-violation {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results:first-child {
-    border-top-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results > summary {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: 700
-}
-  .bk.bk-analyze .bk-analyze-results > summary:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results > summary {
-    padding-top: 18px;
-    padding-bottom: 18px;
-    padding-left: 20px;
-    padding-right: 20px
-}
-  .bk.bk-analyze .bk-analyze-results > summary > div {
-    display: flex;
-    gap: 3px
-}
-  .bk.bk-analyze .bk-analyze-results > summary svg {
-    width: 15px;
-    height: 15px
-}
-  .bk.bk-analyze .bk-analyze-results:open > summary {
-    background-color: transparent !important
-}
-  .bk.bk-analyze .bk-analyze-results:open > summary svg {
-    --bk-tw-rotate: 180deg;
-    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))
-}
-  .bk.bk-analyze .bk-analyze-results > ul {
-    padding-left: 20px;
-    padding-right: 20px
-}
-  .bk.bk-analyze .bk-analyze-results > ul.bk-is-always-open {
-    padding-top: 20px
-}
-  .bk.bk-analyze .bk-analyze-results-item-help {
-    margin-left: auto
-}
-  .bk.bk-analyze .bk-analyze-results-item-help > a {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    line-height: 1;
-    text-underline-offset: 4px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-help > a:hover {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-accent-600) / var(--bk-tw-text-opacity, 1));
-    text-decoration-line: underline
-}
-  .bk.bk-analyze .bk-analyze-results-item-help > a span {
-    opacity: 0
-}
-  .bk.bk-analyze .bk-analyze-results-item-help > a svg {
-    width: 18px;
-    height: 18px;
-    fill: currentColor
-}
-  .bk.bk-analyze .bk-analyze-results-item:hover .bk-analyze-results-item-help span {
-    opacity: 1
-}
-  .bk.bk-analyze .bk-analyze-results-item-description ul {
-    margin-left: 15px;
-    list-style-type: disc
-}
-  .bk.bk-analyze .bk-analyze-results-item-description ol {
-    margin-left: 15px;
-    list-style-type: decimal
-}
-  .bk.bk-analyze .bk-analyze-results-item-description ul,
-    .bk.bk-analyze .bk-analyze-results-item-description ol,
-    .bk.bk-analyze .bk-analyze-results-item-description p {
-    margin-top: 8px;
-    margin-bottom: 8px
-}
-  .bk.bk-analyze .bk-analyze-results-item-description ul:first-child,
-    .bk.bk-analyze .bk-analyze-results-item-description ol:first-child,
-    .bk.bk-analyze .bk-analyze-results-item-description p:first-child {
-    margin-top: 0px
-}
-  .bk.bk-analyze .bk-analyze-results-item-description ul:last-child,
-    .bk.bk-analyze .bk-analyze-results-item-description ol:last-child,
-    .bk.bk-analyze .bk-analyze-results-item-description p:last-child {
-    margin-bottom: 0px
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes {
-    margin-top: 10px;
-    overflow: hidden;
-    border-radius: 4px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes:open > summary {
-    background-color: transparent !important;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes:open > summary svg {
-    --bk-tw-rotate: 180deg;
-    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))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > summary {
-    display: flex;
-    cursor: pointer;
-    list-style-type: none;
-    appearance: none;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > summary:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > summary::marker,
-      .bk.bk-analyze .bk-analyze-results-item-nodes > summary::-webkit-details-marker {
-    display: none
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > summary svg {
-    width: 15px;
-    height: 15px;
-    fill: currentColor
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > div > ul > li > p {
-    margin-bottom: 3px;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1))
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > div > ul > li > p.bk-is-single {
-    padding-top: 10px
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes > div > ul > li > ul > li {
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk.bk-analyze .bk-analyze-results-item-nodes-list > ul + ul {
-    border-top-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding-top: 10px
-}
-
-.bk.bk-analyze-overlay {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%
-}
-
-.bk.bk-analyze-overlay > div {
-    position: absolute;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1))
-}
-
-.bk.bk-analyze-tooltip {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    z-index: calc(var(--bk-z-index-base) + 40000) /* "analyze-tooltip" */;
-    cursor: pointer;
-    margin-top: -25px;
-    display: flex;
-    height: 25px;
-    align-items: center;
-    gap: 5px;
-    padding-left: 8px;
-    padding-right: 8px;
-    white-space: nowrap;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-bg-opacity, 1));
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px 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.bk-analyze-tooltip:hover {
-    background-color: rgb(var(--bk-theme-mono-950) / 0.9)
-}
-
-.bk.bk-analyze-tooltip .bk-icon {
-    position: absolute;
-    top: 100%;
-    left: 0px;
-    display: flex;
-    width: 25px;
-    height: 25px;
-    align-items: center;
-    justify-content: center
-}
-
-.bk.bk-analyze-tooltip svg {
-    width: 15px;
-    height: 15px;
-    fill: currentColor
-}
-
-.bk.bk-analyze-tooltip.bk-is-violation {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1))
-}
-
-.bk.bk-analyze-tooltip.bk-is-violation .bk-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-
-.bk.bk-analyze-tooltip.bk-is-violation .bk-icon:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-bg-opacity, 1))
-}
-
-.bk.bk-analyze-tooltip.bk-is-incomplete {
-    --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-analyze-tooltip.bk-is-incomplete .bk-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-yellow-normal) / 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-analyze-tooltip.bk-is-incomplete .bk-icon:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1))
-}
-
-.bk.bk-analyze-tooltip .bk-analyze-tooltip-score {
-    opacity: 0.7
-}
-
-.bk-is-analyzing .bk,
-  .bk-is-analyzing .bk-sidebar {
-    display: none !important
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-is-analyzing .bk,.bk-is-analyzing .bk-sidebar {
+  display: none !important;
 }
 </style>

package/dist/runtime/editor/features/anchors/Overlay/index.vue

@@ -13,10 +13,9 @@
 <script setup>
 import { useBlokkli, useRoute, ref, onMounted } from "#imports";
 import { PluginBlockIndicator } from "#blokkli/editor/plugins";
-import { emitMessage } from "#blokkli/editor/events";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const route = useRoute();
-const { $t, adapter, ui } = useBlokkli();
+const { adapter, ui } = useBlokkli();
 function getAnchorItems() {
   const anchorItems = [];
   const nodes = [...ui.providerElement.querySelectorAll("[id]")];
@@ -52,15 +51,8 @@ function getLinkForClipboard(item) {
   return route.path + "#" + item.id;
 }
 function onClick(item) {
-  if (navigator.clipboard?.writeText) {
-    const link = getLinkForClipboard(item);
-    navigator.clipboard.writeText(link);
-    const message = $t(
-      "copiedToClipboardMessage",
-      '"@text" has been copied to your clipboard'
-    ).replace("@text", link);
-    emitMessage(message, "success", void 0, true);
-  }
+  const link = getLinkForClipboard(item);
+  ui.copyTextToClipboard(link);
 }
 onBlokkliEvent("state:reloaded", () => {
   items.value = getAnchorItems();

package/dist/runtime/editor/features/artboard/Overview/index.vue

@@ -19,7 +19,7 @@
     >
       <button
         ref="overviewVisibleEl"
-        class="_bk_relative _bk_top-0 _bk_left-0 _bk_bg-white _bk_cursor-move _bk_will-change-transform _bk_rounded"
+        class="_bk_relative _bk_top-0 _bk_left-0 _bk_bg-white _bk_cursor-move _bk_will-change-transform"
       />
     </div>
   </ViewportBlockingRect>
@@ -129,7 +129,7 @@ defineOptions({
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-artboard-overview {
   position: absolute;
   top: 0px;
@@ -137,19 +137,17 @@ defineOptions({
   z-index: calc(var(--bk-z-index-base) + 90000) /* "artboard-overview" */;
   height: 500px;
   width: 180px;
-  border-radius: 4px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
   pointer-events: auto;
   overflow: hidden;
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
   contain: strict;
   margin-top: var(--bk-viewport-padding);
   margin-right: var(--bk-viewport-padding);
   grid-area: viewport;
   align-self: self-start;
-  justify-self: self-end
+  justify-self: self-end;
 }
 </style>

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -344,6 +344,15 @@ onBlokkliEvent("scrollIntoView", (e) => {
       behavior: e.immediate ? "instant" : "auto",
       area: "blocking"
     });
+  } else if ("rect" in e) {
+    artboard.scrollIntoView(e.rect, {
+      scale: "none",
+      axis: "both",
+      block: "center",
+      inline: "center",
+      area: "viewport",
+      behavior: e.immediate ? "instant" : "auto"
+    });
   } else {
     if (artboardElement.contains(e.element)) {
       const elRect = e.element.getBoundingClientRect();
@@ -406,35 +415,38 @@ onBlokkliEvent("scrollSelectionIntoView", (e) => {
 });
 </script>
 
-<style>
-.bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-      pointer-events: none;
-      position: fixed;
-      top: 0px;
-      left: 50%;
-      z-index: 10;
-      width: 100vw;
-      max-width: 1920px;
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: calc(1 / 2 * 100%);
+  z-index: 10;
+  width: 100vw;
+  max-width: 1920px;
 }
-@media (min-width: 1024px) {
-      .bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-            width: 100%;
-            min-width: 1280px;
-      }
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 100%;
+  }
 }
-@media (min-width: 1280px) {
-      .bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-            width: 80vw;
-      }
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    min-width: 1280px;
+  }
+}
+@media (width >= 80rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 80vw;
+  }
+}
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  background: white;
+  user-select: none;
+  image-rendering: crisp-edges;
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+  transform: translateX(-50%) translateY(100px);
+  contain: layout paint inline-size style;
 }
-.bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-      background: white;
-      user-select: none;
-      image-rendering: crisp-edges;
-      backface-visibility: hidden;
-      transform-origin: 0 0;
-      /* Set initial position to be centered. The artboard feature will update it on mount. */
-      transform: translateX(-50%) translateY(100px);
-      contain: layout paint inline-size style;
-    }
 </style>