@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/runtime/editor/features/analyze/analyzers/readability.js

@@ -1,5 +1,6 @@
 import { defineAnalyzer } from "./defineAnalyzer.js";
 import { collectTextElements } from "./helpers/collectTextElements.js";
+import { hashString } from "./helpers/hashString.js";
 function summarizeImpact(nodes) {
   const order = ["minor", "moderate", "serious", "critical"];
   let maxIdx = -1;
@@ -10,10 +11,7 @@ function summarizeImpact(nodes) {
   }
   return maxIdx >= 0 ? order[maxIdx] : void 0;
 }
-function format(n, d = 1) {
-  return typeof n === "number" && Number.isFinite(n) ? n.toFixed(d) : "\u2014";
-}
-function buildDescription(score, scoreLabel, lang, band, $t) {
+function buildDescription(lang, band, $t) {
   const parts = [];
   if (band === "hard") {
     parts.push(
@@ -30,7 +28,6 @@ function buildDescription(score, scoreLabel, lang, band, $t) {
       ).replace("@lang", lang.toUpperCase())
     );
   }
-  parts.push(`${scoreLabel} ${format(score)}`);
   parts.push(
     $t(
       "analyzerReadabiliyShorterSentences",
@@ -60,15 +57,12 @@ async function analyzeViaProvider(readabilityProvider, langcode, $t) {
         targets.push(textElement.element);
       }
       const node = {
-        description: buildDescription(
-          chunk.score,
-          analyzer.scoreLabel,
-          langcode,
-          chunk.band,
-          $t
-        ),
+        description: buildDescription(langcode, chunk.band, $t),
         impact: analyzer.impactForScore(chunk.score),
         score: chunk.score,
+        scoreLabel: analyzer.scoreLabel,
+        uuid,
+        identifier: hashString(chunk.text),
         targets
       };
       if (chunk.band === "hard") {

package/dist/runtime/editor/features/analyze/analyzers/types.d.ts

@@ -17,6 +17,25 @@ export type AnalyzeNode = {
      * Optional numeric score for this node (e.g. readability index).
      */
     score?: number;
+    /**
+     * Optional UUID of the block this node belongs to.
+     * Used to determine block hierarchy for highlight rendering.
+     */
+    uuid?: string;
+    /**
+     * Content-based identifier for this finding. When set, the user can ignore
+     * this node. Combined with the parent result's `id` to form the stored key:
+     * `${result.id}:${node.identifier}`.
+     *
+     * Not a unique ID — it's a hash of the analyzed content. If the content
+     * changes, the identifier changes and the finding reappears.
+     */
+    identifier?: string;
+    /**
+     * Label for the score metric (e.g., "FRE", "LIX", "WSTF").
+     * Shown as a badge in the results UI when both score and scoreLabel are set.
+     */
+    scoreLabel?: string;
     /**
      * An array of either:
      * - string: a valid selector
@@ -27,6 +46,7 @@ export type AnalyzeNode = {
 };
 export type AnalyzeNodeMapped = Omit<AnalyzeNode, 'targets'> & {
     targets: AnalyzeNodeTargetMapped[];
+    ignored: boolean;
 };
 export type AnalyzeResult = {
     id: string;

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

@@ -70,3 +70,461 @@ export default {
   name: "Analyze"
 };
 </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 {
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding-top: 20px;
+    padding-bottom: 20px
+}
+  .bk.bk-analyze .bk-analyze-results-item:first-child {
+    padding-top: 0px
+}
+  .bk.bk-analyze .bk-analyze-results-item:last-child {
+    border-bottom-width: 0
+}
+  .bk.bk-analyze .bk-analyze-results-item > h3 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600
+}
+  .bk.bk-analyze .bk-analyze-results-item > p {
+    margin-top: 5px;
+    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-analyze .bk-analyze-results-item:hover .bk-analyze-results-item-help span {
+    opacity: 1
+}
+  .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>

package/dist/runtime/editor/features/analyze/types.d.ts

@@ -6,4 +6,16 @@ declare module '#blokkli/editor/adapter' {
     interface AdapterExtensionMethods<T> {
         getAnalyzers?: () => Analyzer | Analyzer[] | Promise<Analyzer> | Promise<Analyzer[]>;
     }
+    interface BlokkliAdapter<T> {
+        /**
+         * Ignore one or more analyze findings.
+         * Each identifier is a composite key: `${resultId}:${nodeIdentifier}`.
+         */
+        ignoreAnalyzeIdentifiers?: (identifiers: string[]) => Promise<MutationResponseLike<T>>;
+        /**
+         * Restore one or more previously ignored analyze findings.
+         * Each identifier is a composite key: `${resultId}:${nodeIdentifier}`.
+         */
+        unignoreAnalyzeIdentifiers?: (identifiers: string[]) => Promise<MutationResponseLike<T>>;
+    }
 }

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

@@ -8,11 +8,19 @@
     @mousedown.stop
     @mousemove.stop
   >
-    <div ref="overviewArtboardEl" class="bk-artboard-overview-artboard">
-      <canvas ref="canvas" />
+    <div
+      ref="overviewArtboardEl"
+      class="_bk_bg-white _bk_absolute _bk_top-0 _bk_left-0 _bk_outline-mono-400 _bk_outline-1 _bk_outline _bk_pointer-events-none _bk_overflow-hidden"
+    >
+      <canvas ref="canvas" class="_bk_absolute _bk_top-0 _bk_left-0 _bk_size-full" />
     </div>
-    <div class="bk-artboard-overview-visible">
-      <button ref="overviewVisibleEl" />
+    <div
+      class="_bk_absolute _bk_top-0 _bk_left-0 _bk_size-full _bk_bg-mono-900/60 _bk_mix-blend-multiply"
+    >
+      <button
+        ref="overviewVisibleEl"
+        class="_bk_relative _bk_top-0 _bk_left-0 _bk_bg-white _bk_cursor-move _bk_will-change-transform _bk_rounded"
+      />
     </div>
   </ViewportBlockingRect>
 </template>
@@ -120,3 +128,28 @@ defineOptions({
   name: "ArtboardOverview"
 });
 </script>
+
+<style>
+.bk.bk-artboard-overview {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  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));
+  pointer-events: auto;
+  overflow: hidden;
+  border-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 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
+}
+</style>