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

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

@@ -0,0 +1,132 @@
+import type { BlokkliUser } from '#blokkli/editor/types/user';
+/**
+ * The complete set of notification types the frontend can render. Used as
+ * a runtime allow-list at the adapter boundary — backend payloads with a
+ * `type` outside this list are coerced to `'generic'` (and a warning is
+ * logged) rather than fed through an `as` cast that would silently lie
+ * about being a known type.
+ *
+ * Follows a `<feature>:<event>` convention. Add new entries here as new
+ * notification sources are added (e.g. `'edit-state:rejected'`).
+ *
+ * `'generic'` is the fallback for unknown types: rendered with a neutral
+ * icon, deep-linked to its host (no type-specific query parameters).
+ */
+export declare const BLOKKLI_NOTIFICATION_TYPES: readonly ["comment:mention", "comment:resolved", "comment:reply", "comment:thread", "edit-state:approved", "generic"];
+export type BlokkliNotificationType = (typeof BLOKKLI_NOTIFICATION_TYPES)[number];
+/**
+ * Type guard for raw backend `type` strings.
+ */
+export declare function isBlokkliNotificationType(value: string): value is BlokkliNotificationType;
+/**
+ * Coerce a raw backend `type` string into a known `BlokkliNotificationType`.
+ * Falls back to `'generic'` (with a warning) for unknown values — use this
+ * at the adapter boundary instead of `as`-casting.
+ */
+export declare function toValidNotificationType(value: string): BlokkliNotificationType;
+/**
+ * The host entity (page) a notification relates to.
+ */
+export type BlokkliNotificationHost = {
+    uuid: string;
+    entityType: string;
+    entityBundle: string;
+    /**
+     * Human readable label of the host entity (e.g. the page title).
+     */
+    label: string;
+    /**
+     * URL/path of the host entity (page).
+     */
+    url: string;
+};
+export type BlokkliNotification = {
+    uuid: string;
+    /**
+     * Whether the user has read this notification.
+     */
+    read: boolean;
+    /**
+     * ISO 8601 timestamp (e.g. `2026-05-28T14:32:18Z`).
+     */
+    created: string;
+    /**
+     * What kind of event this notification represents.
+     */
+    type: BlokkliNotificationType;
+    /**
+     * The main, human readable text (plain).
+     */
+    title: string;
+    /**
+     * Optional secondary line (plain).
+     */
+    message?: string;
+    /**
+     * The user that triggered the event (mention author, resolver, ...), or
+     * `null` when there is no associated user or the account was deleted.
+     */
+    user?: BlokkliUser | null;
+    /**
+     * UUID of the entity this notification points at. Its meaning depends on
+     * `type` (e.g. a comment UUID for `comment:*` notifications). Used by the
+     * feature to build the deep link.
+     */
+    relatedEntityUuid?: string;
+    /**
+     * The host entity (page) the notification lives on, or `null` when the host
+     * was deleted or the notification has no host at all (e.g. a system-wide
+     * event). When present, the feature builds the deep link as
+     * `${host.url}?blokkliEditing=${host.uuid}` plus any type-specific query
+     * parameters. When `null`, the notification is not deep-linkable.
+     */
+    host: BlokkliNotificationHost | null;
+};
+/**
+ * A single page of notifications.
+ */
+export type BlokkliNotificationList = {
+    /** The notifications for the requested page (newest first). */
+    items: BlokkliNotification[];
+    /**
+     * Opaque cursor for the next (older) page, or `null` when there are no
+     * more. Pass it back as `after` to fetch the next page.
+     */
+    nextCursor: string | null;
+    /**
+     * The total number of unread notifications for the current user after
+     * this request was processed (reflects any `markAsRead` side-effect).
+     */
+    unreadCount: number;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Load a single page of notifications for the current user (newest first).
+         */
+        loadNotifications?: (options: {
+            /**
+             * Opaque cursor returned by a previous call, or `undefined` for the
+             * first page.
+             */
+            after?: string;
+            /**
+             * When `true`, mark the returned notifications as read as part of the
+             * same request. The response `unreadCount` then reflects the count
+             * after this side-effect.
+             */
+            markAsRead: boolean;
+        }) => Promise<BlokkliNotificationList>;
+        /**
+         * Load the number of unread notifications for the current user, without
+         * loading the notifications themselves.
+         */
+        loadUnreadNotificationsCount?: () => Promise<number>;
+        /**
+         * Mark all of the current user's notifications as read (including ones
+         * not yet loaded) and return the new total unread count (always `0`).
+         * Backs the "Mark all as read" button.
+         */
+        markAllNotificationsAsRead?: () => Promise<number>;
+    }
+}

package/dist/runtime/editor/features/notifications/types.js

@@ -0,0 +1,20 @@
+export const BLOKKLI_NOTIFICATION_TYPES = [
+  "comment:mention",
+  "comment:resolved",
+  "comment:reply",
+  "comment:thread",
+  "edit-state:approved",
+  "generic"
+];
+export function isBlokkliNotificationType(value) {
+  return BLOKKLI_NOTIFICATION_TYPES.includes(value);
+}
+export function toValidNotificationType(value) {
+  if (isBlokkliNotificationType(value)) {
+    return value;
+  }
+  console.warn(
+    `[blokkli] Unknown notification type "${value}", rendering as generic`
+  );
+  return "generic";
+}

package/dist/runtime/editor/features/options/Form/Checkbox/index.vue

@@ -1,9 +1,13 @@
 <template>
   <label
     class="bk-blokkli-item-options-checkbox"
-    data-test="option-type-checkbox"
   >
-    <input v-model="checked" type="checkbox" class="_bk_peer" :required />
+    <input
+      v-model="checked"
+      type="checkbox"
+      class="_bk_peer"
+      :required
+    />
     <div />
     <span>{{ label }}</span>
   </label>

package/dist/runtime/editor/features/options/Form/Checkboxes/index.vue

@@ -1,13 +1,18 @@
 <template>
   <div
     class="bk-blokkli-item-options-checkboxes"
-    data-test="option-type-checkboxes"
     :class="{ 'bk-is-active': isOpen, 'bk-is-grouped': isGrouped }"
   >
-    <button v-if="!isGrouped" @click="isOpen = !isOpen">
+    <button
+      v-if="!isGrouped"
+      @click="isOpen = !isOpen"
+    >
       <span>{{ visibleLabel }}</span>
       <div>
-        <div v-if="checked.length < 4" class="bk-pill-list">
+        <div
+          v-if="checked.length < 4"
+          class="bk-pill-list"
+        >
           <Pill
             v-for="item in checked"
             :key="item"
@@ -16,7 +21,12 @@
             variant="normal"
           />
         </div>
-        <Pill v-else :text="checked.length" scheme="mono" variant="normal" />
+        <Pill
+          v-else
+          :text="checked.length"
+          scheme="mono"
+          variant="normal"
+        />
       </div>
       <Icon name="bk_mdi_arrow_drop_down" />
     </button>

package/dist/runtime/editor/features/options/Form/Color/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bk-blokkli-item-options-color" data-test="option-type-color">
+  <div class="bk-blokkli-item-options-color">
     <input v-model="text" type="color" />
     <div
       class="bk-blokkli-item-options-color-preview"

package/dist/runtime/editor/features/options/Form/ComplexType/index.vue

@@ -2,7 +2,6 @@
   <button
     v-if="config"
     class="bk-blokkli-item-options-complex-type"
-    data-test="option-type-json"
     @click="onClick"
   >
     <Icon :name="config.editorIcon" />

package/dist/runtime/editor/features/options/Form/DateTimeLocal/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="bk-blokkli-item-options-date"
-    data-test="option-type-datetime-local"
   >
     <input
       v-model="text"

package/dist/runtime/editor/features/options/Form/Group.vue

@@ -3,7 +3,9 @@
     class="bk-blokkli-item-options-group"
     :class="{ 'bk-is-active': isActive }"
   >
-    <button @click.stop.prevent="$emit('toggle')">
+    <button
+      @click.stop.prevent="$emit('toggle')"
+    >
       <div>{{ label }}</div>
       <Icon name="bk_mdi_arrow_drop_down" />
     </button>

package/dist/runtime/editor/features/options/Form/Item.vue

@@ -1,13 +1,12 @@
 <template>
   <div
     class="bk-blokkli-item-options-item _bk_group/tooltip"
-    :data-test="'option-' + property"
     @keydown.stop
   >
     <Tooltip
       :label
       :description
-      :placement="isGrouped ? 'inline' : 'above-left'"
+      :placement="isGrouped ? 'inline' : 'above-right'"
       class="_bk_!whitespace-normal"
       :class="{
   '_bk_w-full _bk_px-10 _bk_pt-10': isGrouped,

package/dist/runtime/editor/features/options/Form/Number/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="bk-blokkli-item-options-number" data-test="option-type-number">
-    <button :disabled="!canDecrement" @click.stop.prevent="decrement">
+  <div class="bk-blokkli-item-options-number">
+    <button
+      :disabled="!canDecrement"
+      @click.stop.prevent="decrement"
+    >
       <Icon name="bk_mdi_remove" />
     </button>
     <input
@@ -14,7 +17,10 @@
 }"
     />
 
-    <button :disabled="!canIncrement" @click.stop.prevent="increment">
+    <button
+      :disabled="!canIncrement"
+      @click.stop.prevent="increment"
+    >
       <Icon name="bk_mdi_add" />
     </button>
   </div>

package/dist/runtime/editor/features/options/Form/Radios/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="bk-blokkli-item-options-radios"
-    data-test="option-type-radios"
     :class="{
   'bk-is-color': displayAs === 'colors',
   'bk-is-grid': displayAs === 'grid',
@@ -14,7 +13,9 @@
       :key="option.key"
       @mouseenter="onOptionMouseEnter(option)"
     >
-      <div v-bind="getInputWrapperAttributes(option.value)">
+      <div
+        v-bind="getInputWrapperAttributes(option.value)"
+      >
         <input
           :id="option.key"
           type="radio"

package/dist/runtime/editor/features/options/Form/Range/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="bk-blokkli-item-options-range" data-test="option-type-range">
-    <input v-model="text" type="range" :min="min" :max="max" :step="step" />
+  <div class="bk-blokkli-item-options-range">
+    <input
+      v-model="text"
+      type="range"
+      :min="min"
+      :max="max"
+      :step="step"
+    />
     <div>{{ formatted }}</div>
   </div>
 </template>

package/dist/runtime/editor/features/options/Form/Text/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="bk-blokkli-item-options-text" data-test="option-type-text">
-    <input v-model="text" :type="type" :placeholder="label" />
+  <div class="bk-blokkli-item-options-text">
+    <input
+      v-model="text"
+      :type="type"
+      :placeholder="label"
+    />
     <div>{{ text }}</div>
   </div>
 </template>

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

@@ -124,7 +124,7 @@ export default {
 }
 @media (width >= 64rem) {
   .bk .bk-blokkli-item-options {
-    min-width: 0px;
+    min-width: auto;
   }
 }
 :is(.bk .bk-blokkli-item-options)::-webkit-scrollbar {
@@ -671,6 +671,12 @@ export default {
 :is(.bk-is-active:is(.bk .bk-blokkli-item-options-group) > button) svg {
   rotate: 180deg;
 }
+@media (width >= 48rem) {
+  .bk .bk-blokkli-item-options-group:last-child > .bk-blokkli-item-options-group-content {
+    right: 0px;
+    left: auto;
+  }
+}
 .bk .bk-blokkli-item-options-group-content {
   position: absolute;
   position: fixed;

package/dist/runtime/editor/features/ownership/Banner/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <Banner id="ownership">
+  <Banner
+    id="ownership"
+  >
     <BannerInner
       icon="bk_mdi_person-fill"
       :text

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

@@ -11,3 +11,4 @@ declare module '#blokkli/editor/types/permissions' {
         take_ownership: 'Take ownership of edit state';
     }
 }
+export {};

package/dist/runtime/editor/features/ownership/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/preview-grant/types.d.ts

@@ -8,3 +8,4 @@ declare module '#blokkli/editor/adapter' {
         getPreviewGrantUrl?: () => Promise<string | undefined | null> | string | undefined | null;
     }
 }
+export {};

package/dist/runtime/editor/features/preview-grant/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/proxy-view/index.vue

@@ -1,25 +1,10 @@
 <template>
-  <PluginViewOption
-    id="proxy_view"
-    v-model="ui.isProxyMode.value"
-    :label="$t('proxyViewToggle', 'Toggle structure view')"
-    :title-on="$t('proxyViewShow', 'Show structure view')"
-    :title-off="$t('proxyViewHide', 'Show content preview')"
-    :tour-text="
-  $t(
-    'proxyViewTourText',
-    'Displays the content blocks as a structured view.'
-  )
-"
-    key-code="P"
-    icon="bk_mdi_account_tree"
-    @update:model-value="onToggleProxyMode"
-  />
+  <div />
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
+import { useBlokkli, defineBlokkliFeature, watch } from "#imports";
+import { defineViewOption } from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "proxy_view",
   label: "Proxy View",
@@ -28,9 +13,27 @@ defineBlokkliFeature({
   viewports: ["desktop"]
 });
 const { $t, ui, eventBus } = useBlokkli();
-function onToggleProxyMode() {
-  eventBus.emit("state:reloaded");
-}
+const { isVisible } = defineViewOption({
+  id: "proxy_view",
+  label: $t("viewOptionStructureView", "Structure view"),
+  description: $t(
+    "viewOptionStructureViewDescription",
+    "Shows blocks as a structured outline instead of the rendered preview."
+  ),
+  tourText: $t(
+    "proxyViewTourText",
+    "Displays the content blocks as a structured view."
+  ),
+  icon: "bk_mdi_account_tree"
+});
+watch(
+  isVisible,
+  (v) => {
+    ui.isProxyMode.value = v;
+    eventBus.emit("state:reloaded");
+  },
+  { immediate: true }
+);
 </script>
 
 <script>

package/dist/runtime/editor/features/publish/Dialog/PublishOption.vue

@@ -1,8 +1,6 @@
 <template>
   <label
     class="_bk_group _bk_relative _bk_grid _bk_grid-cols-[auto_1fr] _bk_gap-15 _bk_items-center _bk_leading-none _bk_cursor-pointer _bk_hyphens-auto"
-    :data-test="'publish-mode-' + id"
-    :data-test-checked="isChecked"
     :class="{ '_bk_pointer-events-none': disabled }"
   >
     <input

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

@@ -107,11 +107,10 @@
           />
         </FormItem>
         <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
-          <InfoBox data-test="publish-scheduled-blocks-notice">
+          <InfoBox>
             <p
               v-for="(text, index) in scheduledBlocks"
               :key="'infobox' + index"
-              data-test="publish-scheduled-block"
               v-html="text"
             />
           </InfoBox>

package/dist/runtime/editor/features/responsive-preview/Frame/index.vue

@@ -15,7 +15,6 @@
       <iframe
         ref="iframe"
         :src="src"
-        data-test="preview-iframe"
         @load="isLoading = false"
       />
     </div>

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

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         revertAllChanges?: () => Promise<MutationResponseLike<T>>;
     }
 }
+export {};

package/dist/runtime/editor/features/revert/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@
   <div>
     <FormToggle
       v-if="setting.type === 'checkbox'"
-      :label="setting.label"
+      :label="settingLabel"
       :description="settingDescription"
       :model-value="
   settingsStorage[settingsKey] ?? setting.default
@@ -11,7 +11,7 @@
     />
     <div v-else-if="setting.type === 'radios'">
       <h3 class="bk-form-label">
-        {{ setting.label }}
+        {{ settingLabel }}
       </h3>
       <ul class="bk-settings-ui">
         <li
@@ -27,7 +27,7 @@
               @change="setRadioValue(value)"
             />
             <Icon v-if="config.icon" :name="config.icon" />
-            <span>{{ config.label }}</span>
+            <span>{{ getOptionLabel(value, config.label) }}</span>
           </label>
         </li>
       </ul>
@@ -37,12 +37,12 @@
         class="bk-button bk-scheme-mono bk-is-light"
         @click="setting.method(blokkliApp)"
       >
-        {{ setting.label }}
+        {{ settingLabel }}
       </button>
     </div>
     <div v-else-if="setting.type === 'slider'">
       <label class="bk-input-range">
-        <span>{{ setting.label }}: {{ settingsStorage[settingsKey] }}</span>
+        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
         <input
           :value="settingsStorage[settingsKey]"
           type="range"
@@ -68,14 +68,24 @@ const props = defineProps({
   settingsKey: { type: String, required: true },
   setting: { type: Object, required: true }
 });
-const { storage } = useBlokkli();
+const { storage, $t } = useBlokkli();
 const blokkliApp = useBlokkli();
+const settingKeyPrefix = computed(
+  () => "feature_" + props.featureId + "_setting_" + props.settingsKey
+);
+const settingLabel = computed(
+  () => $t(settingKeyPrefix.value + "_label", props.setting.label)
+);
 const settingDescription = computed(() => {
-  if ("description" in props.setting) {
-    return props.setting.description;
+  if ("description" in props.setting && props.setting.description) {
+    return $t(
+      settingKeyPrefix.value + "_description",
+      props.setting.description
+    );
   }
   return void 0;
 });
+const getOptionLabel = (key, defaultLabel) => $t(settingKeyPrefix.value + "_option_" + key, defaultLabel);
 const settingsStorage = storage.use(
   `feature:${props.featureId}:settings`,
   {},

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

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         swapBlocks?: (first: string, second: string) => Promise<MutationResponseLike<T>>;
     }
 }
+export {};

package/dist/runtime/editor/features/swap/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/translations/Banner/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <Banner id="translate" scheme="yellow">
+  <Banner
+    id="translate"
+    scheme="yellow"
+  >
     <FileDropHandler
       icon="bk_mdi_translate"
       :label="$t('translationsDropToImport', 'Drop CSV or PO file to import')"

package/dist/runtime/editor/features/translations/CsvDialog/Import/index.vue

@@ -69,7 +69,10 @@
             </th>
           </template>
           <template #body>
-            <tr v-for="row in rows" :key="row.key">
+            <tr
+              v-for="row in rows"
+              :key="row.key"
+            >
               <td>
                 <div class="bk-checkbox">
                   <input

package/dist/runtime/editor/features/translations/TranslateDialog/index.vue

@@ -26,7 +26,9 @@
       </div>
     </PanelSection>
 
-    <PanelSection :title="sourceValues.length ? fieldsTitle : void 0">
+    <PanelSection
+      :title="sourceValues.length ? fieldsTitle : void 0"
+    >
       <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
         <Loading />
       </div>
@@ -65,7 +67,10 @@
           </th>
         </template>
         <template #body>
-          <tr v-for="item in filteredValues" :key="item.key">
+          <tr
+            v-for="item in filteredValues"
+            :key="item.key"
+          >
             <td>
               <div class="bk-checkbox">
                 <input

package/dist/runtime/editor/plugins/BlockIndicator/index.vue

@@ -3,8 +3,6 @@
     <div
       ref="el"
       class="bk-indicator-item"
-      :data-test-block-indicator="id"
-      :data-test-uuid="uuid"
       @click.prevent="$emit('click')"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"