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

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -80,9 +80,9 @@ const tooltipData = computed(() => {
       }
     } else {
       if (index === 0) {
-        text = $t("addButtonBeforeBundle", "Add before...");
+        text = $t("addButtonBeforeBundle", "Add before", { more: true });
       } else {
-        text = $t("addButtonAfterBundle", "Add after...");
+        text = $t("addButtonAfterBundle", "Add after", { more: true });
       }
     }
     if (orientation === "horizontal") {
@@ -238,7 +238,8 @@ function getBlockState(uuid) {
                 emptyFieldTooltips2.push(
                   $t(
                     "addButtonInsideField",
-                    "Add inside @parentBundle \xBB @fieldLabel..."
+                    "Add inside @parentBundle \xBB @fieldLabel",
+                    { more: true }
                   ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
                 );
               }
@@ -246,7 +247,8 @@ function getBlockState(uuid) {
               emptyFieldTooltips2.push(
                 $t(
                   "addButtonInsideField",
-                  "Add inside @parentBundle \xBB @fieldLabel..."
+                  "Add inside @parentBundle \xBB @fieldLabel",
+                  { more: true }
                 ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
               );
             }
@@ -254,7 +256,8 @@ function getBlockState(uuid) {
             emptyFieldTooltips2.push(
               $t(
                 "addButtonInsideField",
-                "Add inside @parentBundle \xBB @fieldLabel..."
+                "Add inside @parentBundle \xBB @fieldLabel",
+                { more: true }
               ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
             );
           }
@@ -617,60 +620,32 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-add-button-tooltip {
-
-    pointer-events: none;
-
-    position: absolute;
-
-    white-space: nowrap;
-
-    border-radius: 9999px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-accent-600) / var(--bk-tw-bg-opacity, 1));
-
-    padding-left: 10px;
-
-    padding-right: 10px;
-
-    font-size: 14px;
-
-    line-height: 20px;
-
-    font-weight: 600;
-
-    line-height: 1;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-
-    will-change: transform;
-
-    height: 30px;
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-width: 2px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(255 255 255 / var(--bk-tw-border-opacity, 1));
-
-    z-index: calc(var(--bk-z-index-base) + 180000) /* "add-buttons-label" */
+  pointer-events: none;
+  position: absolute;
+  white-space: nowrap;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-accent-600) / 1);
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: white;
+  will-change: transform;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
+  border-color: white;
+  z-index: calc(var(--bk-z-index-base) + 180000) /* "add-buttons-label" */;
 }
-
-  .bk.bk-add-button-tooltip.bk-is-field {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-bg-opacity, 1))
+.bk.bk-add-button-tooltip.bk-is-field {
+  background-color: rgb(var(--bk-theme-accent-400) / 1);
 }
 </style>

package/dist/runtime/editor/features/selection/AddButtons/index.vue

@@ -48,6 +48,7 @@ import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
 import Renderer from "./Renderer/index.vue";
 import { itemEntityType } from "#blokkli-build/config";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { HORIZONTAL_ELLIPSIS } from "#blokkli/editor/helpers/string";
 const props = defineProps({
   items: { type: Array, required: true }
 });
@@ -152,7 +153,7 @@ const beforeTooltip = computed(() => {
       singleAllowedBundleLabel.value
     );
   }
-  return $t("addButtonBeforeBundle", "Add before...");
+  return $t("addButtonBeforeBundle", "Add before", { more: true });
 });
 const afterTooltip = computed(() => {
   if (singleAllowedBundleLabel.value) {
@@ -161,7 +162,7 @@ const afterTooltip = computed(() => {
       singleAllowedBundleLabel.value
     );
   }
-  return $t("addButtonAfterBundle", "Add after...");
+  return $t("addButtonAfterBundle", "Add after", { more: true });
 });
 const fieldTooltips = computed(() => {
   if (!block.value || !bundleLabel.value) {
@@ -188,7 +189,8 @@ const fieldTooltips = computed(() => {
     }
     return $t(
       "addButtonInsideField",
-      "Add inside @parentBundle \xBB @fieldLabel..."
+      "Add inside @parentBundle \xBB @fieldLabel",
+      { more: true }
     ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
   });
 });
@@ -212,7 +214,7 @@ const hostFieldTooltips = computed(() => {
         }
       }
     }
-    return $t("addButtonToField", "Add to @fieldLabel...").replace(
+    return $t("addButtonToField", "Add to @fieldLabel", { more: true }).replace(
       "@fieldLabel",
       fieldLabel
     );
@@ -445,10 +447,10 @@ function onRendererToggle(data) {
   let label;
   if (data.position === "before") {
     preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
-    label = beforeTooltip.value.replace("...", "");
+    label = beforeTooltip.value.replace(HORIZONTAL_ELLIPSIS, "");
   } else {
     preceedingUuid = uuid.value;
-    label = afterTooltip.value.replace("...", "");
+    label = afterTooltip.value.replace(HORIZONTAL_ELLIPSIS, "");
   }
   setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
 }
@@ -471,8 +473,22 @@ function onRendererToggleField(data) {
   if (!field) {
     return;
   }
-  const label = (tooltips[data.index] || "").replace("...", "");
+  const label = (tooltips[data.index] || "").replace(HORIZONTAL_ELLIPSIS, "");
   setAddData(key, field, label, null, void 0, data.coordinates);
 }
 onBlokkliEvent("dragging:start", closeOverlay);
+onBlokkliEvent("selection:add-button:trigger", (e) => {
+  if (e.position === "field") {
+    onRendererToggleField({ index: e.index, coordinates: { x: 0, y: 0 } });
+    return;
+  }
+  if (selection.hasHostSelected.value || !uuid.value) {
+    return;
+  }
+  updateCache(uuid.value);
+  if (!cache.get(uuid.value)?.canShowBeforeAfter) {
+    return;
+  }
+  onRendererToggle({ position: e.position, coordinates: { x: 0, y: 0 } });
+});
 </script>

package/dist/runtime/editor/features/selection/Renderer/index.vue

@@ -148,7 +148,7 @@ const getColorRestricted = useTransitionedValue(() => {
   if (hasTransformingStyle.value) {
     return theme.orange.value.normal;
   }
-  return theme.yellow.value.normal;
+  return theme.mono.value[500];
 });
 const getColorHost = useTransitionedValue(() => {
   return theme.mono.value[700];

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

@@ -0,0 +1,22 @@
+/**
+ * Programmatically trigger one of the add buttons rendered for the current
+ * single-block (or host) selection — the same effect as clicking the button on
+ * the canvas, without needing its screen coordinates.
+ *
+ *  - `before` / `after`: the insert-before / insert-after buttons (only act
+ *    when the field can actually accept another block, mirroring the canvas
+ *    buttons' visibility);
+ *  - `field`: the empty-field button at `index` (the n-th empty block field of
+ *    the selected block, or empty host field when the host is selected).
+ */
+export type SelectionAddButtonTriggerEvent = {
+    position: 'before' | 'after';
+} | {
+    position: 'field';
+    index: number;
+};
+declare module '#blokkli/editor/events' {
+    interface EventbusEvents {
+        'selection:add-button:trigger': SelectionAddButtonTriggerEvent;
+    }
+}

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="bk-form-item" :class="'bk-is-' + setting.type">
+  <div>
     <FormToggle
       v-if="setting.type === 'checkbox'"
-      :label="settingLabel"
+      :label="setting.label"
       :description="settingDescription"
       :model-value="
   settingsStorage[settingsKey] ?? setting.default
@@ -11,7 +11,7 @@
     />
     <div v-else-if="setting.type === 'radios'">
       <h3 class="bk-form-label">
-        {{ settingLabel }}
+        {{ setting.label }}
       </h3>
       <ul class="bk-settings-ui">
         <li
@@ -27,19 +27,22 @@
               @change="setRadioValue(value)"
             />
             <Icon v-if="config.icon" :name="config.icon" />
-            <span>{{ getOptionLabel(value, config.label) }}</span>
+            <span>{{ config.label }}</span>
           </label>
         </li>
       </ul>
     </div>
     <div v-else-if="setting.type === 'method'">
-      <button class="bk-button" @click="setting.method(blokkliApp)">
-        {{ settingLabel }}
+      <button
+        class="bk-button bk-scheme-mono bk-is-light"
+        @click="setting.method(blokkliApp)"
+      >
+        {{ setting.label }}
       </button>
     </div>
     <div v-else-if="setting.type === 'slider'">
       <label class="bk-input-range">
-        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
+        <span>{{ setting.label }}: {{ settingsStorage[settingsKey] }}</span>
         <input
           :value="settingsStorage[settingsKey]"
           type="range"
@@ -65,27 +68,14 @@ const props = defineProps({
   settingsKey: { type: String, required: true },
   setting: { type: Object, required: true }
 });
-const { storage, $t: textTranslation } = useBlokkli();
+const { storage } = useBlokkli();
 const blokkliApp = useBlokkli();
-const settingLabel = computed(() => {
-  return textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_label"
-  ) || props.setting.label;
-});
 const settingDescription = computed(() => {
-  const translated = textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_description"
-  );
-  if (!translated && "description" in props.setting) {
+  if ("description" in props.setting) {
     return props.setting.description;
   }
-  return translated;
+  return void 0;
 });
-const getOptionLabel = (key, defaultLabel) => {
-  return textTranslation(
-    "feature_" + props.featureId + "_setting_" + props.settingsKey + "_option_" + key
-  ) || defaultLabel;
-};
 const settingsStorage = storage.use(
   `feature:${props.featureId}:settings`,
   {},
@@ -125,25 +115,25 @@ const tickmarks = computed(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-input-range {
-    display: block;
-    width: 100%
+  display: block;
+  width: 100%;
 }
-  .bk .bk-input-range input {
-    display: block;
-    width: 100%;
-    border-radius: 9999px;
-    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));
-    accent-color: rgb(var(--bk-theme-accent-700) / 1)
+:is(.bk .bk-input-range) input {
+  display: block;
+  width: 100%;
+  border-radius: calc(infinity * 1px);
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  accent-color: rgb(var(--bk-theme-accent-700) / 1);
 }
-  .bk .bk-input-range span {
-    margin-bottom: 5px;
-    display: inline-block;
-    font-weight: 500
+:is(.bk .bk-input-range) span {
+  margin-bottom: 5px;
+  display: inline-block;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
 }
 </style>

package/dist/runtime/editor/features/settings/Dialog/index.vue

@@ -5,50 +5,59 @@
     :width="900"
     hide-buttons
     icon="bk_mdi_settings"
+    mono
     @cancel="$emit('cancel')"
   >
-    <div class="bk bk-settings">
-      <div v-for="group in groups" :key="group.key" class="bk-form-section">
-        <h3 class="bk-settings-group-title">
-          <span>{{ group.label }}</span>
-          <BetaIndicator
-            v-if="group.id === 'beta'"
-            class="_bk_inline-block _bk_ml-5 _bk_-translate-y-3"
-          />
-        </h3>
-        <div>
-          <FeatureSettingComponent
+    <div class="bk">
+      <PanelSection
+        v-for="group in groups"
+        :key="group.key"
+        class="bk-form-section"
+        :title="group.label"
+      >
+        <template v-if="group.id === 'beta'" #post-title>
+          <BetaIndicator />
+        </template>
+        <div class="_bk_p-15">
+          <FormItem
             v-for="setting in group.settings"
             :key="group.key + setting.settingsKey"
-            :feature-id="setting.featureId"
-            :settings-key="setting.settingsKey"
-            :setting="setting.setting"
-          />
+          >
+            <FeatureSettingComponent
+              :feature-id="setting.featureId"
+              :settings-key="setting.settingsKey"
+              :setting="setting.setting"
+            />
+          </FormItem>
         </div>
-      </div>
+      </PanelSection>
     </div>
   </DialogModal>
 </template>
 
 <script setup>
 import { useBlokkli, computed } from "#imports";
-import { DialogModal, BetaIndicator } from "#blokkli/editor/components";
+import {
+  DialogModal,
+  BetaIndicator,
+  FormItem
+} from "#blokkli/editor/components";
 import FeatureSettingComponent from "./FeatureSetting/index.vue";
 import {
   SETTINGS_GROUP
 } from "../../../../../global/constants";
 import { settingsOverride } from "#blokkli-build/editor-config";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const { $t, features, ui } = useBlokkli();
-const getTranslation = $t;
 const getGroupLabel = (key) => {
   if (key === "behavior") {
     return $t("settingsBehaviour", "Behaviour");
   } else if (key === "appearance") {
     return $t("settingsAppearance", "Appearance");
   } else if (key === "advanced") {
-    return $t("settingsAdvanced", "Advanced");
+    return $t("advanced", "Advanced");
   } else if (key === "artboard") {
-    return $t("settingsArtboard", "Artboard");
+    return $t("artboard", "Artboard");
   } else if (key === "beta") {
     return $t("settingsBeta", "New Features");
   }
@@ -109,16 +118,14 @@ const groups = computed(() => {
       };
     }
     features.betaFeatures.value.forEach((v) => {
-      const label = getTranslation(`feature_${v.id}_label`) || v.label;
-      const description = getTranslation(`feature_${v.id}_description`) || v.description;
       settingGroups.beta.settings.push({
         featureId: "settings",
         settingsKey: "beta:" + v.id,
         setting: {
           type: "checkbox",
           default: false,
-          label,
-          description,
+          label: v.label,
+          description: v.description,
           group: "beta"
         }
       });

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

@@ -66,7 +66,7 @@ addElementClasses(
 defineMenuButton(() => {
   return {
     id: "settings",
-    title: $t("settingsMenuTitle", "Settings"),
+    title: $t("settings", "Settings"),
     description: $t(
       "settingsMenuDescription",
       "Personal settings for the editor"
@@ -84,154 +84,5 @@ export default {
 };
 </script>
 
-<style>
-.bk.bk-settings .bk-settings-group-title {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 700;
-    line-height: 1.25
-}
-  .bk.bk-settings .bk-form-section {
-    margin-top: 0px;
-    display: grid;
-    grid-template-columns: 240px 1fr;
-    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: 25px;
-    padding-bottom: 25px
-}
-  .bk.bk-settings .bk-form-section:first-child {
-    padding-top: 0px
-}
-  .bk.bk-settings .bk-form-section:last-child {
-    border-bottom-width: 0;
-    padding-bottom: 0px
-}
-
-.bk .bk-settings-checkboxes {
-    display: grid;
-    gap: 10px
-}
-
-.bk .bk-settings-buttons {
-    display: grid;
-    gap: 10px
-}
-
-.bk .bk-settings-ui {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 15px
-}
-
-.bk .bk-settings-ui li {
-    position: relative
-}
-
-.bk .bk-settings-ui li:focus-within .bk-icon {
-    outline-style: solid;
-    outline-offset: 3px;
-    outline-color: rgb(var(--bk-theme-accent-950) / 0.8)
-}
-
-.bk .bk-settings-ui li label {
-    display: block;
-    cursor: pointer
-}
-
-.bk .bk-settings-ui li input {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    appearance: none;
-    opacity: 0
-}
-
-.bk .bk-settings-ui li input + .bk-icon {
-    pointer-events: none;
-    overflow: hidden;
-    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 .bk-settings-ui li input + .bk-icon svg {
-    height: auto;
-    width: 100%;
-    opacity: 0.5
-}
-
-.bk .bk-settings-ui li input:checked + .bk-icon {
-    --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(3px + 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-700) / var(--bk-tw-ring-opacity, 1))
-}
-
-.bk .bk-settings-ui li input:checked + .bk-icon svg {
-    opacity: 1
-}
-
-.bk .bk-settings-ui li input:checked + .bk-icon + span {
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
-}
-
-.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon {
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
-}
-
-.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon svg {
-    opacity: 0.7
-}
-
-.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon + span {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
-}
-
-.bk .bk-settings-ui li span {
-    margin-top: 10px;
-    display: inline-block;
-    width: 100%;
-    text-align: left;
-    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-icon-theme-bg {
-    fill: rgb(var(--bk-theme-mono-200) / 1)
-}
-
-.bk .bk-icon-theme-fg {
-    fill: white
-}
-
-.bk .bk-icon-theme-text {
-    fill: rgb(var(--bk-theme-mono-300) / 1)
-}
-
-.bk .bk-icon-theme-toolbar {
-    fill: rgb(var(--bk-theme-mono-950) / 1)
-}
-
-.bk .bk-icon-theme-toolbar-dark-item {
-    fill: rgb(var(--bk-theme-mono-800) / 1);
-    stroke: rgb(var(--bk-theme-mono-600) / 1)
-}
-
-.bk .bk-icon-theme-toolbar-light-item {
-    fill: rgb(var(--bk-theme-mono-200) / 1);
-    stroke: rgb(var(--bk-theme-mono-300) / 1)
-}
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 </style>

package/dist/runtime/editor/features/structure/List/Item/index.vue

@@ -126,9 +126,8 @@ defineOptions({
 });
 </script>
 
-<style>
-.bk-vars .bk-dragging-overlay-item [bk-structure-uuid] {
-    --bk-tw-bg-opacity: 1 !important;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1)) !important
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-vars .bk-dragging-overlay-item) [bk-structure-uuid] {
+  background-color: rgb(var(--bk-theme-mono-100) / 1) !important;
 }
 </style>