@revenexx/editor 0.1.0

package/dist/runtime/editor/components/AppMenu/Inner.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/AppMenu/Inner.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="bk _bk_fixed _bk_inset-y-0 _bk_left-0 _bk_bg-white _bk_shadow-lg _bk_max-w-[480px] _bk_lg:min-w-[400px] _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-menu _bk_w-[calc(100vw-40px)]"
+    @wheel.passive.stop
+    @touchstart.stop.passive
+    @touchmove.stop.passive
+  >
+    <button
+      class="_bk_h-40 _bk_md:h-50 _bk_flex _bk_items-center _bk_text-base _bk_font-bold _bk_pl-15 _bk_md:pl-25 _bk_bg-white _bk_text-mono-950"
+      @click="$emit('close')"
+    >
+      <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
+    </button>
+    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col _bk_bg-mono-200">
+      <div
+        id="bk-menu-primary"
+        class="_bk_grid _bk_border-t _bk_border-t-mono-200 _bk_bg-white"
+      >
+        <MenuButton
+          v-for="button in primaryButtons"
+          :id="button.id"
+          :key="button.id"
+          :title="button.title"
+          :description="button.description"
+          :icon="button.icon"
+          :type="button.type"
+          :disabled="button.disabled"
+          @click="onClick(button)"
+        />
+      </div>
+      <div id="bk-menu-secondary" class="_bk_mt-auto _bk_grid _bk_grid-cols-2">
+        <MenuButton
+          v-for="button in secondaryButtons"
+          :id="button.id"
+          :key="button.id"
+          :title="button.title"
+          :description="button.description"
+          :icon="button.icon"
+          :type="button.type"
+          :disabled="button.disabled"
+          small
+          @click="onClick(button)"
+        />
+      </div>
+      <aside
+        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-accent-600 _bk_text-white _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
+      >
+        <div class="_bk_flex _bk_gap-5 _bk_items-center">
+          <Icon
+            name="logo"
+            class="_bk_bg-white _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-accent-600"
+          />
+          <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
+        </div>
+
+        <div>
+          <a
+            href="https://www.blokk.li"
+            target="_blank"
+            class="_bk_hover:text-accent-700 _bk_hover:underline"
+            >blokk.li</a
+          >
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { blokkliVersion } from "#blokkli-build/editor-config";
+import MenuButton from "./MenuButton.vue";
+const { plugins, ui } = useBlokkli();
+const emit = defineEmits(["close"]);
+const allButtons = computed(() => plugins.get("menuButton"));
+const primaryButtons = computed(() => {
+  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+const secondaryButtons = computed(() => {
+  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+async function onClick(button) {
+  await ui.flushPendingChanges();
+  button.callback();
+  emit("close");
+}
+</script>

package/dist/runtime/editor/components/AppMenu/Inner.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/AppMenu/MenuButton.d.vue.ts

@@ -0,0 +1,24 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+    small?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+    small?: boolean;
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <button
+    :id="'bk-menu-list-button-' + id"
+    class="_bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_group"
+    :disabled
+    :class="[
+  {
+    'bk-scheme-lime': type === 'success',
+    'bk-scheme-red': type === 'danger',
+    'bk-scheme-yellow': type === 'yellow',
+    'bk-scheme-mono': !type,
+    '_bk_pointer-events-none': disabled,
+    '_bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200': !small
+  }
+]"
+    @click.prevent.stop="onClick"
+  >
+    <div
+      class="_bk_grid _bk_pl-15 _bk_pr-20 _bk_grid-cols-[auto_1fr]"
+      :class="{
+  '_bk_py-8 _bk_gap-x-5': small,
+  '_bk_py-15 _bk_gap-x-10': !small,
+  '_bk_opacity-30': disabled
+}"
+    >
+      <div
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-dark _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
+        :class="{
+  '_bk_size-25': small,
+  '_bk_size-50': !small
+}"
+      >
+        <Icon v-if="icon" :name="icon" class="_bk_size-[60%]" />
+      </div>
+      <div
+        class="_bk_flex _bk_flex-col _bk_justify-center"
+        :class="{
+  '_bk_gap-2': !small
+}"
+      >
+        <strong
+          :class="{
+  '_bk_text-xs _bk_font-medium': small,
+  '_bk_text-base _bk_font-semibold': !small
+}"
+          >{{ title }}</strong
+        >
+        <span
+          v-if="!small"
+          class="_bk_text-mono-500 _bk_group-hover:text-mono-700"
+          :class="{
+  '_bk_text-xs': small,
+  '_bk_text-sm': !small
+}"
+          >{{ description }}</span
+        >
+      </div>
+    </div>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  type: { type: String, required: false },
+  small: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click"]);
+function onClick() {
+  emit("click");
+}
+</script>
+
+<script>
+export default {
+  name: "MenuButton"
+};
+</script>

package/dist/runtime/editor/components/AppMenu/MenuButton.vue.d.ts

@@ -0,0 +1,24 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+    small?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+    small?: boolean;
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,25 @@
+<template>
+  <BlokkliTransition name="menu">
+    <AppMenuInner v-if="menuOpen" @close="closeMenu" />
+  </BlokkliTransition>
+</template>
+
+<script setup>
+import { computed, defineAsyncComponent, useBlokkli } from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const AppMenuInner = defineAsyncComponent(() => import("./Inner.vue"));
+const DIALOG_MENU = "menu";
+const { ui } = useBlokkli();
+const menuOpen = computed(() => ui.currentDialog.value?.id === DIALOG_MENU);
+function closeMenu() {
+  ui.closeDialog(DIALOG_MENU);
+}
+onBlokkliEvent("overlay:close", closeMenu);
+</script>
+
+<script>
+export default {
+  name: "AppMenu"
+};
+</script>

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

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,40 @@
+import { type PlacementVertical, type PlacementHorizontal } from '#blokkli/editor/composables/useStickyToolbar';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { Coord } from '#blokkli/editor/types/geometry';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    anchorEl?: HTMLElement | null;
+    buttonLabel?: string;
+    anchorCoordinates?: Coord | null;
+    placementY?: PlacementVertical;
+    placementX?: PlacementHorizontal;
+    closeIcon?: BlokkliIcon;
+    closeDisabled?: boolean;
+    fullscreen?: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    anchorEl: HTMLElement | null;
+    anchorCoordinates: Coord | null;
+    placementY: PlacementVertical;
+    placementX: PlacementHorizontal;
+    closeIcon: BlokkliIcon;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,296 @@
+<template>
+  <div
+    ref="el"
+    class="bk bk-artboard-tooltip"
+    :class="[
+  'bk-is-y-' + placementY,
+  'bk-is-x-' + placementX,
+  { 'bk-is-fullscreen': fullscreen }
+]"
+    :style="{
+  '--bk-caret-x': caretX
+}"
+    @keydown="onKeyDown"
+  >
+    <div class="bk bk-artboard-tooltip-inner bk-caret-tooltip-inner">
+      <div class="bk-artboard-tooltip-header">
+        <div class="_bk_mr-auto" v-html="title" />
+        <slot name="header" />
+        <button
+          :disabled="closeDisabled"
+          @click="$emit('close')"
+        >
+          <Icon :name="closeIcon" />
+          <span v-if="buttonLabel">{{ buttonLabel }}</span>
+        </button>
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  useStickyToolbar
+} from "#blokkli/editor/composables/useStickyToolbar";
+import {
+  useTemplateRef,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  watch
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { onBlokkliEvent, useFocusTrap } from "#blokkli/editor/composables";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  anchorEl: { type: null, required: false, default: null },
+  buttonLabel: { type: String, required: false },
+  anchorCoordinates: { type: [Object, null], required: false, default: null },
+  placementY: { type: String, required: false, default: "auto" },
+  placementX: { type: String, required: false, default: "center" },
+  closeIcon: { type: null, required: false, default: "bk_mdi_close" },
+  closeDisabled: { type: Boolean, required: false },
+  fullscreen: { type: Boolean, required: false }
+});
+const emit = defineEmits(["close"]);
+const el = useTemplateRef("el");
+const { onKeyDown } = useFocusTrap({
+  container: el,
+  debugLabel: "ArtboardTooltip: " + props.id
+});
+const { ui } = useBlokkli();
+const { placementY, placementX, caretX } = useStickyToolbar(el, {
+  getAnchorElement() {
+    return props.anchorEl ?? null;
+  },
+  getAnchorCoordinates() {
+    return props.anchorCoordinates ?? null;
+  },
+  getPlacementY() {
+    return props.placementY;
+  },
+  getPlacementX() {
+    return props.placementX;
+  },
+  getCaretWidth() {
+    return 30;
+  },
+  isFullscreen() {
+    return !!props.fullscreen;
+  }
+});
+watch(ui.openTooltip, (id) => {
+  if (id !== props.id) {
+    emit("close");
+  }
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
+  if (e.code === "Escape") {
+    emit("close");
+  }
+});
+onMounted(() => {
+  ui.openTooltip.value = props.id;
+});
+onBeforeUnmount(() => {
+  if (ui.openTooltip.value === props.id) {
+    ui.openTooltip.value = "";
+  }
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-artboard-tooltip {
+  --bk-gap: 15px;
+  --bk-caret-size: 10px;
+  pointer-events: auto;
+  position: absolute;
+  bottom: 50px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 170000) /* "selection-add" */;
+  will-change: transform;
+}
+@media (width >= 64rem) {
+  .bk.bk-artboard-tooltip {
+    position: absolute;
+  }
+}
+@media (width >= 64rem) {
+  .bk.bk-artboard-tooltip {
+    top: 0px;
+  }
+}
+@media (width >= 64rem) {
+  .bk.bk-artboard-tooltip {
+    bottom: auto;
+  }
+}
+.bk.bk-artboard-tooltip:before,.bk.bk-artboard-tooltip:after {
+  content: '';
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  position: absolute;
+  transform: translateX(
+      calc(((var(--bk-caret-x)) * 1px) - var(--bk-caret-size))
+    );
+}
+.bk.bk-artboard-tooltip:before {
+  --bk-header-bg: var(--bk-border);
+}
+.bk.bk-artboard-tooltip.bk-is-y-top:before,.bk.bk-artboard-tooltip.bk-is-y-top:after {
+  border-width: var(--bk-caret-size) var(--bk-caret-size) 0
+        var(--bk-caret-size);
+  border-color: var(--bk-header-bg) transparent transparent transparent;
+  top: 100%;
+  left: 0px;
+}
+.bk.bk-artboard-tooltip.bk-is-y-top:after {
+  --bk-header-bg: var(--bk-bg);
+}
+.bk.bk-artboard-tooltip.bk-is-y-top:after {
+  margin-top: calc(1px * -1);
+}
+.bk.bk-artboard-tooltip.bk-is-y-bottom:before,.bk.bk-artboard-tooltip.bk-is-y-bottom:after {
+  border-width: 0 var(--bk-caret-size) var(--bk-caret-size)
+        var(--bk-caret-size);
+  border-color: transparent transparent var(--bk-header-bg) transparent;
+  bottom: 100%;
+}
+.bk.bk-artboard-tooltip.bk-is-y-bottom:after {
+  margin-bottom: calc(1px * -1);
+}
+.bk.bk-artboard-tooltip.bk-is-y-center:before,.bk.bk-artboard-tooltip.bk-is-y-center:after {
+  display: none;
+}
+.bk.bk-artboard-tooltip.bk-is-x-right:before,.bk.bk-artboard-tooltip.bk-is-x-right:after {
+  border-width: var(--bk-caret-size) var(--bk-caret-size)
+        var(--bk-caret-size) 0;
+  border-color: transparent var(--bk-header-bg) transparent transparent;
+  top: calc(1 / 2 * 100%);
+  right: 100%;
+  left: auto;
+  transform: translateX(0) translateY(-50%);
+}
+.bk.bk-artboard-tooltip.bk-is-x-right:after {
+  margin-right: calc(1px * -1);
+}
+.bk.bk-artboard-tooltip.bk-is-x-left:before,.bk.bk-artboard-tooltip.bk-is-x-left:after {
+  border-width: var(--bk-caret-size) 0 var(--bk-caret-size)
+        var(--bk-caret-size);
+  border-color: transparent transparent transparent var(--bk-header-bg);
+  top: calc(1 / 2 * 100%);
+  right: auto;
+  left: 100%;
+  transform: translateX(0) translateY(-50%);
+}
+.bk.bk-artboard-tooltip.bk-is-x-left:after {
+  margin-left: calc(1px * -1);
+}
+.bk.bk-artboard-tooltip.bk-is-fullscreen:before,.bk.bk-artboard-tooltip.bk-is-fullscreen:after {
+  display: none;
+}
+.bk.bk-artboard-tooltip.bk-is-fullscreen .bk-artboard-tooltip-inner {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  border-radius: 0;
+}
+@media (width >= 64rem) {
+  .bk.bk-artboard-tooltip .bk-artboard-tooltip-inner {
+    --bk-tw-shadow: 0 25px 50px -12px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  }
+}
+.bk.bk-artboard-tooltip .bk-artboard-tooltip-inner {
+  border: 1px solid var(--bk-border);
+  background: var(--bk-bg);
+}
+.bk.bk-artboard-tooltip .bk-artboard-tooltip-header {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  text-transform: uppercase;
+  background: var(--bk-header-bg);
+  color: var(--bk-header-text);
+}
+:is(.bk.bk-artboard-tooltip .bk-artboard-tooltip-header)  > div {
+  padding: var(--bk-gap);
+}
+:is(.bk.bk-artboard-tooltip .bk-artboard-tooltip-header)  > button {
+  display: flex;
+  height: 40px;
+  min-width: 40px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-inline: 10px;
+  color: var(--bk-header-text);
+}
+:is(:is(.bk.bk-artboard-tooltip .bk-artboard-tooltip-header) > button):hover {
+  background: var(--bk-header-hover);
+}
+:is(:is(.bk.bk-artboard-tooltip .bk-artboard-tooltip-header) > button) svg {
+  width: 18px;
+  height: 18px;
+  fill: currentcolor;
+}
+.bk .bk-artboard-tooltip-info {
+  display: flex;
+  align-items: center;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.bk .bk-artboard-tooltip-info-button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+  height: 32px;
+  padding-inline: 10px;
+  padding-block: 6px;
+}
+@media (hover: hover) {
+  :is(.bk .bk-artboard-tooltip-info-button):hover {
+    background-color: rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.bk .bk-artboard-tooltip-info-button):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / 1) 10%, transparent);
+    }
+  }
+}
+.bk .bk-artboard-tooltip-info-button {
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 1px;
+  border-right-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+[disabled]:is(.bk .bk-artboard-tooltip-info-button) {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(.bk .bk-artboard-tooltip-info-button) svg {
+  width: 15px;
+  height: 15px;
+}
+</style>

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

@@ -0,0 +1,40 @@
+import { type PlacementVertical, type PlacementHorizontal } from '#blokkli/editor/composables/useStickyToolbar';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { Coord } from '#blokkli/editor/types/geometry';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    anchorEl?: HTMLElement | null;
+    buttonLabel?: string;
+    anchorCoordinates?: Coord | null;
+    placementY?: PlacementVertical;
+    placementX?: PlacementHorizontal;
+    closeIcon?: BlokkliIcon;
+    closeDisabled?: boolean;
+    fullscreen?: boolean;
+};
+declare var __VLS_1: {}, __VLS_8: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    anchorEl: HTMLElement | null;
+    anchorCoordinates: Coord | null;
+    placementY: PlacementVertical;
+    placementX: PlacementHorizontal;
+    closeIcon: BlokkliIcon;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,30 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    name: string;
+    seed?: string;
+    size?: "sm" | "md";
+    imageUrl?: string | null;
+    /**
+     * Render a neutral "deleted user" placeholder (ghost icon) instead of an
+     * image or initials. Use when the author is unknown — e.g. an anonymous
+     * comment or a since-deleted account.
+     */
+    deleted?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    name: string;
+    seed?: string;
+    size?: "sm" | "md";
+    imageUrl?: string | null;
+    /**
+     * Render a neutral "deleted user" placeholder (ghost icon) instead of an
+     * image or initials. Use when the author is unknown — e.g. an anonymous
+     * comment or a since-deleted account.
+     */
+    deleted?: boolean;
+}> & Readonly<{}>, {
+    seed: string;
+    size: "sm" | "md";
+    imageUrl: string | null;
+    deleted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;