@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/runtime/helpers/stateProvider.js

@@ -5,13 +5,28 @@ import {
   readonly,
   provide
 } from "vue";
-import { refreshNuxtData } from "nuxt/app";
+import { refreshNuxtData, useState } from "nuxt/app";
 import { INJECT_MUTATED_FIELDS_MAP } from "./symbols.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import { falsy, getFieldKey } from "#blokkli/helpers";
 import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
 import { nextTick } from "#imports";
-export default async function(adapter, context, $t) {
+import { addElementClasses } from "./addElementClasses.js";
+const HOST_OPTION_KEY = "HOST";
+function mapPublishOptions(context) {
+  return {
+    canPublish: !!context?.publishOptions?.canPublish,
+    isRevisionable: !!context?.publishOptions?.isRevisionable,
+    hasRevisionLogMessage: !!context?.publishOptions?.hasRevisionLogMessage,
+    canSchedule: !!context?.publishOptions?.canSchedule,
+    lastChanged: context?.publishOptions?.lastChanged ?? null,
+    publishOn: context?.publishOptions?.publishOn ?? null,
+    revisionLogMessage: context?.publishOptions?.revisionLogMessage ?? null
+  };
+}
+export default async function(adapter, context, $t, providerKey) {
+  let _mappedState = null;
+  const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
   const stateLoadError = ref(false);
   const owner = ref(null);
@@ -23,6 +38,15 @@ export default async function(adapter, context, $t) {
   const mutations = ref([]);
   const violations = ref([]);
   const mutatedEntity = ref(null);
+  const publishOptions = ref({
+    canPublish: false,
+    isRevisionable: false,
+    hasRevisionLogMessage: false,
+    lastChanged: null,
+    canSchedule: false,
+    publishOn: null,
+    revisionLogMessage: null
+  });
   const currentMutationIndex = ref(-1);
   const isLoading = ref(false);
   const entity = ref({
@@ -32,9 +56,10 @@ export default async function(adapter, context, $t) {
   });
   let fieldBlockCount = {};
   const blockBundleCount = ref({});
-  const fieldListItemMap = {};
+  const fieldListItemMap = /* @__PURE__ */ new Map();
+  let bundleToUuids = {};
   function getFieldListItem(uuid) {
-    const fieldKey = fieldListItemMap[uuid];
+    const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
       return;
     }
@@ -45,7 +70,7 @@ export default async function(adapter, context, $t) {
     return field.list.find((v) => v.uuid === uuid);
   }
   function getFieldListForBlock(uuid) {
-    const fieldKey = fieldListItemMap[uuid];
+    const fieldKey = fieldListItemMap.get(uuid);
     if (!fieldKey) {
       return;
     }
@@ -58,17 +83,35 @@ export default async function(adapter, context, $t) {
     availableLanguages: [],
     translations: []
   });
-  function setContext(context2) {
+  function updatePublishOptions(newPublishOptions) {
+    publishOptions.value.canPublish = newPublishOptions.canPublish;
+    publishOptions.value.isRevisionable = newPublishOptions.isRevisionable;
+    publishOptions.value.hasRevisionLogMessage = newPublishOptions.hasRevisionLogMessage;
+    publishOptions.value.lastChanged = newPublishOptions.lastChanged;
+    publishOptions.value.canSchedule = newPublishOptions.canSchedule;
+    publishOptions.value.publishOn = newPublishOptions.publishOn;
+    publishOptions.value.revisionLogMessage = newPublishOptions.revisionLogMessage;
+  }
+  function setContext(context2, override) {
+    if (!override) {
+      _mappedState = context2 ?? null;
+    }
     const options = context2?.mutatedState?.mutatedOptions || {};
     const optionKeys = Object.keys(options);
     for (let i = 0; i < optionKeys.length; i++) {
       const key = optionKeys[i];
       const newOptions = options[key];
-      const existing = mutatedOptions[key];
-      if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
+      const existing2 = mutatedOptions[key];
+      if (!existing2 || JSON.stringify(existing2) !== JSON.stringify(newOptions)) {
         mutatedOptions[key] = newOptions;
       }
     }
+    const hostOptions = context2?.mutatedState?.mutatedHostOptions ?? {};
+    const existing = mutatedOptions[HOST_OPTION_KEY];
+    if (!existing || JSON.stringify(existing) !== JSON.stringify(hostOptions)) {
+      mutatedOptions[HOST_OPTION_KEY] = hostOptions ?? "";
+      overrideHostOptions.value = hostOptions;
+    }
     mutations.value = context2?.mutations || [];
     violations.value = context2?.mutatedState?.violations || [];
     const currentIndex = context2?.currentIndex;
@@ -80,6 +123,7 @@ export default async function(adapter, context, $t) {
     entity.value.label = context2?.entity?.label;
     entity.value.status = context2?.entity?.status;
     entity.value.bundleLabel = context2?.entity?.bundleLabel || "";
+    updatePublishOptions(mapPublishOptions(context2));
     translation.value.isTranslatable = !!context2?.translationState?.isTranslatable;
     translation.value.translations = context2?.translationState?.translations?.filter(falsy) || [];
     translation.value.sourceLanguage = context2?.translationState?.sourceLanguage || "";
@@ -96,13 +140,15 @@ export default async function(adapter, context, $t) {
     mutatedEntity.value = context2?.mutatedEntity;
     const visitedFieldKeys = [];
     const newBlockBundleCount = {};
+    fieldListItemMap.clear();
     fieldBlockCount = {};
+    bundleToUuids = {};
     for (let i = 0; i < newMutatedFields.length; i++) {
       const field = newMutatedFields[i];
       const key = getFieldKey(field.entityUuid, field.name);
       visitedFieldKeys.push(key);
-      const existing = mutatedFieldsMap[key];
-      if (!existing || existing.list.length !== field.list.length || JSON.stringify(existing.list) !== JSON.stringify(field.list)) {
+      const existing2 = mutatedFieldsMap[key];
+      if (!existing2 || existing2.list.length !== field.list.length || JSON.stringify(existing2.list) !== JSON.stringify(field.list)) {
         mutatedFieldsMap[key] = field;
       }
       for (let j = 0; j < field.list.length; j++) {
@@ -111,7 +157,11 @@ export default async function(adapter, context, $t) {
           newBlockBundleCount[item.bundle] = 0;
         }
         newBlockBundleCount[item.bundle]++;
-        fieldListItemMap[item.uuid] = key;
+        fieldListItemMap.set(item.uuid, key);
+        if (!bundleToUuids[item.bundle]) {
+          bundleToUuids[item.bundle] = [];
+        }
+        bundleToUuids[item.bundle].push(item.uuid);
       }
     }
     blockBundleCount.value = newBlockBundleCount;
@@ -144,13 +194,18 @@ export default async function(adapter, context, $t) {
     return count;
   }
   function lockBody() {
-    document.body.classList.add("bk-body-loading");
     isLoading.value = true;
   }
   function unlockBody() {
-    document.body.classList.remove("bk-body-loading");
     isLoading.value = false;
   }
+  function getAllUuids(bundle) {
+    if (!bundle) {
+      return [...fieldListItemMap.keys()];
+    }
+    return bundleToUuids[bundle] ?? [];
+  }
+  addElementClasses(document.body, "bk-body-loading", isLoading);
   const mutateWithLoadingState = async (callback, errorMessage, successMessage) => {
     if (!callback) {
       return true;
@@ -228,10 +283,27 @@ export default async function(adapter, context, $t) {
   const stateAvailable = computed(
     () => stateLoaded.value && !stateLoadError.value
   );
+  function getMappedState() {
+    if (!_mappedState) {
+      throw new Error("Called getMappedState() before a state is available.");
+    }
+    return _mappedState;
+  }
+  function setOverrideState(state) {
+    setContext(state, true);
+  }
+  function clearOverrideState() {
+    if (!_mappedState) {
+      throw new Error("Missing previous state.");
+    }
+    setContext(_mappedState);
+  }
   return {
     stateAvailable,
+    getMappedState,
     refreshKey,
     owner: readonly(owner),
+    publishOptions: readonly(publishOptions),
     mutatedFields,
     entity,
     mutatedOptions,
@@ -248,6 +320,9 @@ export default async function(adapter, context, $t) {
     getBlockBundleCount,
     getFieldListItem,
     getMutatedField,
-    getFieldListForBlock
+    getFieldListForBlock,
+    getAllUuids,
+    setOverrideState,
+    clearOverrideState
   };
 }

package/dist/runtime/helpers/storageProvider.d.ts

@@ -1,6 +1,7 @@
-import { type ComputedRef, type WritableComputedRef } from 'vue';
+import { type ComputedRef, type WritableComputedRef } from '#imports';
+import type { BlokkliAdapter } from '#blokkli/adapter';
 export type StorageProvider = {
-    use: <T>(key: string | ComputedRef<string>, defaultValue: T) => WritableComputedRef<T>;
+    use: <T>(key: string | ComputedRef<string>, defaultValue: T, persist?: boolean) => WritableComputedRef<T>;
     clearAll: () => void;
     clear: (key: string) => void;
 };
@@ -12,4 +13,4 @@ export type StorageProvider = {
  * This composable can be used to keep state across page navigations and
  * even after a refresh.
  */
-export default function (): StorageProvider;
+export default function (adapter: BlokkliAdapter<any>): Promise<StorageProvider>;

package/dist/runtime/helpers/storageProvider.js

@@ -1,4 +1,9 @@
-import { computed, ref } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  watch
+} from "#imports";
 import { storageDefaults } from "#blokkli-build/config";
 const PREFIX = "blokkli:";
 const getExisting = (key) => {
@@ -10,10 +15,53 @@ const getExisting = (key) => {
   } catch {
   }
 };
-export default function() {
+export default async function(adapter) {
   const values = ref({});
   const defaults = ref({});
-  const use = (key, providedDefaultValue) => {
+  let timeout = null;
+  const persistableKeys = ref([]);
+  onBeforeUnmount(() => {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+  });
+  const persistedValues = adapter.userSettings ? await adapter.userSettings.load().then((v) => {
+    if (typeof v === "object" && v !== null) {
+      return JSON.stringify(v);
+    }
+    return v;
+  }) : null;
+  if (persistedValues) {
+    values.value = JSON.parse(persistedValues);
+  }
+  const persistableData = computed(() => {
+    const mapped = [...persistableKeys.value].sort().reduce((acc, key) => {
+      const value = values.value[key];
+      if (value !== void 0) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+    return JSON.stringify(mapped);
+  });
+  function persistUserSettings() {
+    if (timeout) {
+      window.clearTimeout(timeout);
+    }
+    timeout = window.setTimeout(async () => {
+      if (!adapter.userSettings) {
+        return;
+      }
+      if (persistableData.value === persistedValues) {
+        return;
+      }
+      await adapter.userSettings.persist(persistableData.value);
+    }, 1e3);
+  }
+  if (adapter.userSettings) {
+    watch(persistableData, persistUserSettings);
+  }
+  const use = (key, providedDefaultValue, persist) => {
     const storageKey = computed(
       () => PREFIX + (typeof key === "string" ? key : key.value)
     );
@@ -30,6 +78,11 @@ export default function() {
         values.value[storageKey.value] = defaultValue;
       }
     }
+    if (persist) {
+      if (!persistableKeys.value.includes(storageKey.value)) {
+        persistableKeys.value.push(storageKey.value);
+      }
+    }
     return computed({
       get() {
         const v = values.value[storageKey.value];

package/dist/runtime/helpers/symbols.d.ts

@@ -17,6 +17,7 @@ export declare const INJECT_MUTATED_FIELDS_MAP: unique symbol;
 export declare const INJECT_ENTITY_CONTEXT: unique symbol;
 export declare const INJECT_PROVIDER_CONTEXT: unique symbol;
 export declare const INJECT_FRAGMENT_CONTEXT: unique symbol;
+export declare const INJECT_PROVIDER_KEY: unique symbol;
 export declare const INJECT_EDIT_FIELD_LIST_COMPONENT: unique symbol;
 export declare const INJECT_EDIT_LOGGER: unique symbol;
 export declare const BK_HIDDEN_GLOBALLY = "bkHiddenGlobally";

package/dist/runtime/helpers/symbols.js

@@ -17,6 +17,7 @@ export const INJECT_MUTATED_FIELDS_MAP = Symbol("blokkli_mutated_fields_map");
 export const INJECT_ENTITY_CONTEXT = Symbol("blokkli_entity_context");
 export const INJECT_PROVIDER_CONTEXT = Symbol("blokkli_provider_context");
 export const INJECT_FRAGMENT_CONTEXT = Symbol("blokkli_fragment_context");
+export const INJECT_PROVIDER_KEY = Symbol("blokkli_provider_key");
 export const INJECT_EDIT_FIELD_LIST_COMPONENT = Symbol(
   "blokkli_edit_field_list_component"
 );

package/dist/runtime/helpers/textProvider.js

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { translations } from "#blokkli-build/translations";
 import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
+const DEBUG_SWISS_GERMAN = false;
 export default function(context) {
   const language = computed(() => {
     if (forceDefaultLanguage) {
@@ -12,6 +13,11 @@ export default function(context) {
     return defaultLanguage;
   });
   const currentTranslations = computed(() => {
+    const today = /* @__PURE__ */ new Date();
+    const isAprilFirst = today.getMonth() === 3 && today.getDate() === 1;
+    if (isAprilFirst && language.value === "de" || DEBUG_SWISS_GERMAN && import.meta.dev) {
+      return translations.gsw_CH || translations[language.value] || {};
+    }
     return translations[language.value] || {};
   });
   return (key, defaultValue) => {

package/dist/runtime/helpers/themeProvider.d.ts

@@ -8,6 +8,7 @@ type ThemeMap = {
     yellow: Ref<ThemeContextColors>;
     red: Ref<ThemeContextColors>;
     lime: Ref<ThemeContextColors>;
+    orange: Ref<ThemeContextColors>;
 };
 export type ThemeProvider = {
     accent: Ref<ThemeColors>;
@@ -16,6 +17,7 @@ export type ThemeProvider = {
     yellow: Ref<ThemeContextColors>;
     red: Ref<ThemeContextColors>;
     lime: Ref<ThemeContextColors>;
+    orange: Ref<ThemeContextColors>;
     getDraggableStyle: (el: HTMLElement | SVGElement) => DraggableStyle;
     setColor: <Group extends ThemeColorGroup | ThemeContextColorGroup>(group: Group, shade: Group extends ThemeColorGroup ? ThemeColorShade : ThemeContextColorShade, value: RGB) => void;
     applyTheme: (name: ThemeName | 'custom') => void;

package/dist/runtime/helpers/themeProvider.js

@@ -12,13 +12,15 @@ export default function() {
   const yellow = ref(theme.yellow);
   const red = ref(theme.red);
   const lime = ref(theme.lime);
+  const orange = ref(theme.orange);
   const themeMap = {
     accent,
     mono,
     teal,
     yellow,
     red,
-    lime
+    lime,
+    orange
   };
   function getColor(color, key) {
     return themeMap[color].value[key];
@@ -115,6 +117,7 @@ export default function() {
     yellow,
     red,
     lime,
+    orange,
     getDraggableStyle: function(el) {
       return dragStyle.getStyle(el, theme.accent[700]);
     },

package/dist/runtime/helpers/transform.js

@@ -6,9 +6,7 @@ export function filterTransforms(plugins, selectedItems, selectedBundles, allowe
     if (plugin.max !== -1 && selectedItems.length > plugin.max) {
       return false;
     }
-    const allAllowedInList = plugin.targetBundles.every(
-      (bundle) => allowedBundles.includes(bundle)
-    );
+    const allAllowedInList = !plugin.targetBundles || plugin.targetBundles.every((bundle) => allowedBundles.includes(bundle));
     if (!allAllowedInList) {
       return false;
     }

package/dist/runtime/helpers/uiProvider.d.ts

@@ -3,6 +3,7 @@ import type { StorageProvider } from './storageProvider.js';
 import type { AddListOrientation, Coord, Rectangle, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
+import type { AdapterContext } from '#blokkli/adapter';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
@@ -14,9 +15,12 @@ export type UiProvider = {
     };
     isMobile: ComputedRef<boolean>;
     isDesktop: ComputedRef<boolean>;
-    isArtboard: () => boolean;
     isAnimating: Ref<boolean>;
+    isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
+    hasDialogOpen: Ref<boolean>;
+    hasAddTooltipOpen: Ref<boolean>;
+    hasTransformOverlayOpen: Ref<boolean>;
     isTransforming: ComputedRef<boolean>;
     setTransform: (label?: string | null | undefined) => void;
     transformLabel: ComputedRef<string>;
@@ -35,7 +39,10 @@ export type UiProvider = {
     artboardScale: Ref<number>;
     artboardOffset: Ref<Coord>;
     selectionTopLeft: Ref<Coord>;
+    interfaceLanguage: ComputedRef<string>;
+    locale: ComputedRef<string>;
+    formatDate: (date: string | Date, options?: Intl.DateTimeFormatOptions) => string;
     getAbsoluteElementRect: (v: HTMLElement | Rectangle, scale?: number, offset?: Coord) => Rectangle;
     getViewportRelativeRect: (rect: Rectangle, scale?: number, offset?: Coord) => Rectangle;
 };
-export default function (storage: StorageProvider, state: StateProvider): UiProvider;
+export default function (storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -2,29 +2,47 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed,
-  watch
+  computed
 } from "vue";
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
-const ARTBOARD_CLASS = "bk-is-artboard";
+import { addElementClasses } from "./addElementClasses.js";
+import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
-export default function(storage, state) {
+const localeMap = {
+  de: "de-CH",
+  fr: "fr-CH",
+  it: "it-CH",
+  en: "en-GB"
+};
+export default function(storage, state, context) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   let cachedProviderElement = null;
+  const interfaceLanguage = computed(() => {
+    return forceDefaultLanguage ? defaultLanguage : context.value.language;
+  });
+  const locale = computed(() => {
+    const lang = interfaceLanguage.value;
+    return localeMap[lang] || lang;
+  });
   const isProxyMode = ref(false);
   const menuIsOpen = ref(false);
+  const hasDialogOpen = ref(false);
+  const hasAddTooltipOpen = ref(false);
+  const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
+  const isAnalyzing = ref(false);
   const transformLabel = ref("");
   const openContextMenu = ref("");
   const selectionTopLeft = ref({ x: 0, y: 0 });
-  const useAnimationsSetting = storage.use("useAnimations", true);
-  const useAnimations = computed(() => useAnimationsSetting.value);
   const baseSettings = storage.use("feature:settings:settings", {});
   const lowPerformanceMode = computed(
     () => baseSettings.value.lowPerformanceMode
   );
+  const useAnimations = computed(
+    () => baseSettings.value.useAnimations !== false
+  );
   const viewportBlockingRectsMap = ref(
     {}
   );
@@ -109,16 +127,6 @@ export default function(storage, state) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const isArtboard = () => {
-    return document.documentElement.classList.contains(ARTBOARD_CLASS);
-  };
-  watch(isAnimating, (is) => {
-    if (is) {
-      document.documentElement.classList.add("bk-is-animating");
-    } else {
-      document.documentElement.classList.remove("bk-is-animating");
-    }
-  });
   const toolbarHeight = computed(() => {
     if (isMobile.value) {
       return 80;
@@ -200,35 +208,6 @@ export default function(storage, state) {
       height: visibleViewportHeight.value - 20
     };
   });
-  function setProxyModeClass() {
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    if (isProxyMode.value) {
-      document.documentElement.classList.add(CLASS_PROXY_MODE);
-    }
-  }
-  watch(isProxyMode, setProxyModeClass);
-  onMounted(() => {
-    document.documentElement.classList.add("bk-html-root");
-    document.body.classList.add("bk-body");
-    document.documentElement.classList.add(ARTBOARD_CLASS);
-    setProxyModeClass();
-    viewportWidth.value = window.innerWidth;
-    viewportHeight.value = window.innerHeight;
-    window.addEventListener("resize", onResize);
-    const artboard = artboardElement();
-    resizeObserver.observe(artboard);
-  });
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", onResize);
-    document.documentElement.classList.remove("bk-html-root");
-    document.body.classList.remove("bk-body");
-    document.documentElement.classList.remove(ARTBOARD_CLASS);
-    document.documentElement.classList.remove(CLASS_PROXY_MODE);
-    clearTimeout(resizeTimeout);
-    const artboard = artboardElement();
-    resizeObserver.unobserve(artboard);
-    resizeObserver.disconnect();
-  });
   const viewport = computed(() => {
     return {
       width: viewportWidth.value,
@@ -260,6 +239,46 @@ export default function(storage, state) {
   function setTransform(label) {
     transformLabel.value = label || "";
   }
+  function formatDate(date, options) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const defaultOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    };
+    return dateObj.toLocaleString(locale.value, options || defaultOptions);
+  }
+  addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-left",
+    activeSidebarLeft
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right",
+    activeSidebarRight
+  );
+  addElementClasses(document.documentElement, ["bk-html-root"]);
+  addElementClasses(document.body, "bk-body");
+  addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
+  addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  onMounted(() => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    resizeObserver.observe(artboard);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    clearTimeout(resizeTimeout);
+    const artboard = artboardElement();
+    resizeObserver.unobserve(artboard);
+    resizeObserver.disconnect();
+  });
   return {
     menu: {
       isOpen: menuIsOpen,
@@ -271,8 +290,8 @@ export default function(storage, state) {
     providerElement,
     isMobile,
     isDesktop,
-    isArtboard,
     isAnimating,
+    isAnalyzing,
     isTransforming,
     setTransform,
     transformLabel: computed(() => transformLabel.value),
@@ -293,6 +312,12 @@ export default function(storage, state) {
     selectionTopLeft,
     lowPerformanceMode,
     getAbsoluteElementRect,
-    getViewportRelativeRect
+    getViewportRelativeRect,
+    interfaceLanguage,
+    locale,
+    formatDate,
+    hasDialogOpen,
+    hasTransformOverlayOpen,
+    hasAddTooltipOpen
   };
 }

package/dist/runtime/helpers/useTransitionedValue.d.ts

@@ -0,0 +1,18 @@
+import type { RGB } from '#blokkli/types/theme';
+interface TransitionOptions {
+    /**
+     * Duration in milliseconds.
+     */
+    duration?: number;
+    /**
+     * The easing method. Defaults to "ease out quad".
+     */
+    easing?: (t: number) => number;
+}
+/**
+ * Creates a computed property from the given callback and transitions between values.
+ *
+ * Returns a method that, when called, will return the current transitioned value.
+ */
+export declare function useTransitionedValue<T extends RGB | number>(valueCallback: () => T, options?: TransitionOptions): () => T;
+export {};

package/dist/runtime/helpers/useTransitionedValue.js

@@ -0,0 +1,57 @@
+import { computed, watch } from "vue";
+import { easeOutQuad } from "./easing.js";
+function isRGB(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+function interpolateColor(from, to, t) {
+  return [
+    lerp(from[0], to[0], t),
+    lerp(from[1], to[1], t),
+    lerp(from[2], to[2], t)
+  ];
+}
+function interpolateValue(from, to, t) {
+  if (isRGB(from) && isRGB(to)) {
+    return interpolateColor(from, to, t);
+  } else if (typeof from === "number" && typeof to === "number") {
+    return lerp(from, to, t);
+  }
+  return to;
+}
+function cloneValue(value) {
+  if (isRGB(value)) {
+    return [...value];
+  }
+  return value;
+}
+export function useTransitionedValue(valueCallback, options = {}) {
+  const { duration = 300, easing = easeOutQuad } = options;
+  const value = computed(valueCallback);
+  const initial = value.value;
+  let current = cloneValue(initial);
+  let target = cloneValue(initial);
+  let from = cloneValue(initial);
+  let startTime = null;
+  watch(value, (newValue) => {
+    from = cloneValue(current);
+    target = cloneValue(newValue);
+    startTime = Date.now();
+  });
+  return function getCurrentValue() {
+    if (startTime !== null) {
+      const elapsed = Date.now() - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      if (rawProgress >= 1) {
+        current = cloneValue(target);
+        startTime = null;
+      } else {
+        const easedProgress = easing(rawProgress);
+        current = interpolateValue(from, target, easedProgress);
+      }
+    }
+    return current;
+  };
+}

package/dist/runtime/icons/anchor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A3 3 0 0 0 9 5A3 3 0 0 0 11 7.83V9H8V11H11V19.92C10.26 19.79 9.5 19.58 8.79 19.27C8.05 18.95 7.4 18.56 6.82 18.09C6.24 17.62 5.78 17.11 5.44 16.55L7 15L3 12V15C3 15.97 3.27 16.88 3.82 17.72C4.37 18.56 5.09 19.31 6 19.95C6.87 20.59 7.84 21.09 8.88 21.45C9.93 21.81 10.97 22 12 22C13.03 22 14.07 21.8 15.12 21.44C16.16 21.08 17.13 20.58 18 19.95C18.92 19.31 19.63 18.57 20.18 17.72C20.73 16.88 21 15.97 21 15V12L17 15L18.56 16.55C18.22 17.11 17.76 17.62 17.18 18.09C16.6 18.56 15.95 18.95 15.21 19.27C14.5 19.58 13.74 19.79 13 19.92V11H16V9H13V7.82A3 3 0 0 0 15 5A3 3 0 0 0 12 2M12 4A1 1 0 0 1 13 5A1 1 0 0 1 12 6A1 1 0 0 1 11 5A1 1 0 0 1 12 4Z" /></svg>