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

package/dist/runtime/editor/features/notifications/List/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <ScrollBoundary
+    class="_bk_w-[400px] _bk_overflow-auto bk-scrollbar-light _bk_max-h-[600px]"
+  >
+    <TransitionHeight>
+      <div
+        v-if="unreadCount"
+        class="_bk_flex _bk_items-center _bk_justify-end _bk_px-15 _bk_py-10 _bk_border-b _bk_border-b-mono-300"
+      >
+        <button
+          class="bk-notifications-mark-all _bk_flex _bk_items-center _bk_gap-5 _bk_text-sm _bk_text-mono-700 _bk_hover:text-accent-700"
+          @click.stop="onMarkAllRead"
+        >
+          <Icon name="bk_mdi_done_all" class="_bk_size-15" />
+          <span>{{ $t("notificationsMarkAllRead", "Mark all as read") }}</span>
+        </button>
+      </div>
+    </TransitionHeight>
+
+    <ul v-if="notifications.length" class="_bk_select-text">
+      <NotificationItem
+        v-for="notification in notifications"
+        :key="notification.uuid"
+        v-bind="notification"
+      />
+    </ul>
+    <div
+      v-else
+      class="_bk_flex-1 _bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-center _bk_text-sm _bk_text-mono-500"
+    >
+      {{ $t("notificationsEmpty", "No notifications.") }}
+    </div>
+
+    <div
+      v-if="hasMore"
+      class="_bk_sticky _bk_bottom-0 _bk_z-50 _bk_bg-linear-0 _bk_from-white _bk_to-white/0 _bk_via-65% _bk_via-white"
+    >
+      <button
+        class="_bk_w-full _bk_py-15 _bk_text-sm _bk_text-mono-700 _bk_hover:text-accent-700 _bk_disabled:opacity-40 _bk_disabled:cursor-default _bk_text-center _bk_font-semibold"
+        :disabled="isLoadingMore"
+        @click.stop="onLoadMore"
+      >
+        {{ $t("notificationsLoadMore", "Load more") }}
+      </button>
+    </div>
+  </ScrollBoundary>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import {
+  Icon,
+  ScrollBoundary,
+  TransitionHeight
+} from "#blokkli/editor/components";
+import { emitMessage } from "#blokkli/editor/events";
+import NotificationItem from "../Item/index.vue";
+const { $t, adapter } = useBlokkli();
+const unreadCount = defineModel("unreadCount", { type: [Number, null], ...{
+  required: true
+} });
+const notifications = ref([]);
+const nextCursor = ref(null);
+const isLoadingMore = ref(false);
+const hasMore = computed(() => nextCursor.value !== null);
+const reportError = (additional) => emitMessage(
+  $t("notificationsLoadError", "Failed to load notifications."),
+  "error",
+  additional
+);
+try {
+  const initial = await adapter.loadNotifications({ markAsRead: true });
+  notifications.value = initial.items;
+  nextCursor.value = initial.nextCursor;
+  unreadCount.value = initial.unreadCount;
+} catch (err) {
+  reportError(err);
+}
+const onLoadMore = async () => {
+  if (isLoadingMore.value || !hasMore.value) {
+    return;
+  }
+  isLoadingMore.value = true;
+  try {
+    const next = await adapter.loadNotifications({
+      after: nextCursor.value ?? void 0,
+      markAsRead: true
+    });
+    const seen = new Set(notifications.value.map((n) => n.uuid));
+    notifications.value = [
+      ...notifications.value,
+      ...next.items.filter((n) => !seen.has(n.uuid))
+    ];
+    nextCursor.value = next.nextCursor;
+    unreadCount.value = next.unreadCount;
+  } catch (err) {
+    reportError(err);
+  } finally {
+    isLoadingMore.value = false;
+  }
+};
+const onMarkAllRead = async () => {
+  try {
+    unreadCount.value = await adapter.markAllNotificationsAsRead();
+    notifications.value = notifications.value.map((n) => ({
+      ...n,
+      read: true
+    }));
+  } catch (err) {
+    emitMessage(
+      $t(
+        "notificationsMarkAllReadError",
+        "Failed to mark notifications as read."
+      ),
+      "error",
+      err
+    );
+  }
+};
+</script>
+
+<script>
+export default {
+  name: "NotificationsList"
+};
+</script>

package/dist/runtime/editor/features/notifications/List/index.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    unreadCount: number | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:unreadCount": (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    unreadCount: number | null;
+}> & Readonly<{
+    "onUpdate:unreadCount"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/notifications/docs.md

@@ -0,0 +1,12 @@
+## Sidebar
+
+The sidebar pane lists the current user's notifications (mentions, resolved
+comments, edit state events). The toolbar tab shows a badge with the number of
+unread notifications.
+
+## Deep linking
+
+Each notification links to its host entity in edit mode. The feature builds the
+URL from the host entity URL plus `?blokkliEditing=<uuid>` and any type-specific
+query parameter (e.g. `blokkliComment=<uuid>` for comment notifications). Links
+open in a new tab.

package/dist/runtime/editor/features/notifications/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/features/notifications/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <PluginToolbarButton
+    id="notifications"
+    ref="toolbarButton"
+    :title="$t('notifications', 'Notifications')"
+    :tour-text="
+  $t(
+    'notificationsTourText',
+    'Shows notifications about mentions, resolved comments and other events.'
+  )
+"
+    :active="isVisible"
+    :disabled="unreadCount === null"
+    :weight="-100"
+    region="before-sidebar"
+    icon="bk_mdi_notifications"
+    class="_bk_border-r _bk_border-r-mono-600 bk-has-dropdown-bottom"
+    @click="isVisible = !isVisible"
+  >
+    <template #after>
+      <BlokkliTransition name="context-menu">
+        <ToolbarDropdown
+          v-if="isVisible"
+          :toggle-element
+          class="_bk_origin-top-right"
+          :title="$t('notifications', 'Notifications')"
+          @close="isVisible = false"
+        >
+          <NotificationsList v-model:unread-count="unreadCount" />
+        </ToolbarDropdown>
+      </BlokkliTransition>
+    </template>
+    <template #icon-addon>
+      <div
+        v-if="unreadCount"
+        class="bk-sidebar-badge bk-is-yellow"
+      >
+        {{ unreadCount }}
+      </div>
+    </template>
+  </PluginToolbarButton>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  useTemplateRef,
+  onMounted,
+  onUnmounted
+} from "#imports";
+import { PluginToolbarButton } from "#blokkli/editor/plugins";
+import { ToolbarDropdown, BlokkliTransition } from "#blokkli/editor/components";
+import NotificationsList from "./List/index.vue";
+const { adapter } = defineBlokkliFeature({
+  id: "notifications",
+  icon: "bk_mdi_notifications",
+  label: "Notifications",
+  requiredAdapterMethods: [
+    "loadNotifications",
+    "loadUnreadNotificationsCount",
+    "markAllNotificationsAsRead"
+  ],
+  description: "Shows notifications for the current user (mentions, resolved comments, edit state events)."
+});
+const { $t, ui } = useBlokkli();
+const ID = "notifications";
+const isVisible = computed({
+  get() {
+    return ui.openContextMenu.value === ID;
+  },
+  set(isOpen) {
+    if (isOpen) {
+      ui.openContextMenu.value = ID;
+    } else {
+      ui.openContextMenu.value = "";
+    }
+  }
+});
+const toolbarButton = useTemplateRef("toolbarButton");
+const toggleElement = computed(
+  () => toolbarButton.value?.el ?? null
+);
+const unreadCount = ref(null);
+const POLL_INTERVAL_MS = 6e4;
+let lastFetchAt = 0;
+const fetchUnreadCount = async () => {
+  try {
+    unreadCount.value = await adapter.loadUnreadNotificationsCount();
+    lastFetchAt = Date.now();
+  } catch {
+  }
+};
+const maybeRefresh = () => {
+  if (isVisible.value || document.hidden) {
+    return;
+  }
+  if (Date.now() - lastFetchAt < POLL_INTERVAL_MS) {
+    return;
+  }
+  fetchUnreadCount();
+};
+let pollInterval = null;
+onMounted(async () => {
+  await fetchUnreadCount();
+  pollInterval = setInterval(maybeRefresh, POLL_INTERVAL_MS);
+  document.addEventListener("visibilitychange", maybeRefresh);
+});
+onUnmounted(() => {
+  if (pollInterval) {
+    clearInterval(pollInterval);
+  }
+  document.removeEventListener("visibilitychange", maybeRefresh);
+});
+</script>
+
+<script>
+export default {
+  name: "Notifications"
+};
+</script>

package/dist/runtime/editor/features/notifications/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/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.d.vue.ts

@@ -2,14 +2,14 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    property: string;
+    property?: string;
     modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    property: string;
+    property?: string;
     modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{

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

@@ -1,6 +1,13 @@
 <template>
-  <label class="bk-blokkli-item-options-checkbox">
-    <input v-model="checked" type="checkbox" class="_bk_peer" :required />
+  <label
+    class="bk-blokkli-item-options-checkbox"
+  >
+    <input
+      v-model="checked"
+      type="checkbox"
+      class="_bk_peer"
+      :required
+    />
     <div />
     <span>{{ label }}</span>
   </label>
@@ -12,7 +19,7 @@ import { defineCommands } from "#blokkli/editor/composables";
 const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
-  property: { type: String, required: true },
+  property: { type: String, required: false },
   modelValue: { type: Boolean, required: false },
   required: { type: Boolean, required: false }
 });
@@ -26,7 +33,7 @@ const checked = computed({
   }
 });
 defineCommands(() => {
-  if (state.editMode.value !== "editing") {
+  if (state.editMode.value !== "editing" || !props.property) {
     return;
   }
   return {

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

@@ -2,14 +2,14 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    property: string;
+    property?: string;
     modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    property: string;
+    property?: string;
     modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{

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

@@ -3,15 +3,30 @@
     class="bk-blokkli-item-options-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>
-        <template v-if="checked.length < 4">
-          <span v-for="item in checked" :key="item" class="bk-pill">{{
-            item
-          }}</span>
-        </template>
-        <span v-else class="bk-pill">{{ checked.length }}</span>
+        <div
+          v-if="checked.length < 4"
+          class="bk-pill-list"
+        >
+          <Pill
+            v-for="item in checked"
+            :key="item"
+            :text="item"
+            scheme="mono"
+            variant="normal"
+          />
+        </div>
+        <Pill
+          v-else
+          :text="checked.length"
+          scheme="mono"
+          variant="normal"
+        />
       </div>
       <Icon name="bk_mdi_arrow_drop_down" />
     </button>
@@ -36,7 +51,7 @@
 
 <script setup>
 import { computed, ref, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, Pill } from "#blokkli/editor/components";
 import { BK_VISIBLE_LANGUAGES } from "./../../../../../../global/constants";
 import { defineCommands } from "#blokkli/editor/composables";
 const { $t, state } = useBlokkli();

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

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

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,9 +1,12 @@
 <template>
-  <div class="bk-blokkli-item-options-item _bk_group/tooltip" @keydown.stop>
+  <div
+    class="bk-blokkli-item-options-item _bk_group/tooltip"
+    @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,
@@ -75,6 +78,7 @@
         :label="label"
         :min="option.min"
         :max="option.max"
+        :nullable="option.nullable"
       />
       <OptionDateTimeLocal
         v-else-if="option.type === 'datetime-local'"

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

@@ -3,20 +3,17 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     modelValue?: number;
-    min: number;
-    max: number;
-    type?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+    min?: number;
+    max?: number;
+    nullable?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     modelValue?: number;
-    min: number;
-    max: number;
-    type?: string;
+    min?: number;
+    max?: number;
+    nullable?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    type: string;
-    modelValue: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;