@aswin.dev/core 0.7.0

package/dist/index.js

@@ -0,0 +1,645 @@
+// src/editor.ts
+import {
+  createDefaultTemplateContent,
+  normalizeTemplateContentPages
+} from "@aswin.dev/types";
+import {
+  computed,
+  reactive,
+  readonly
+} from "@vue/reactivity";
+function useEditor(options) {
+  const initialRaw = options.content ?? createDefaultTemplateContent(
+    options.defaultFontFamily,
+    options.templateDefaults
+  );
+  const state = reactive({
+    content: normalizeTemplateContentPages(initialRaw),
+    selectedBlockId: null,
+    viewport: "desktop",
+    darkMode: false,
+    previewMode: false,
+    isDirty: false,
+    uiTheme: "auto"
+  });
+  const content = computed({
+    get: () => state.content,
+    set: (value) => {
+      state.content = normalizeTemplateContentPages(value);
+      state.isDirty = true;
+    }
+  });
+  const selectedBlock = computed(() => {
+    if (!state.selectedBlockId) return null;
+    return findBlockById(state.content.blocks, state.selectedBlockId);
+  });
+  function findBlockById(blocks, id) {
+    for (const block of blocks) {
+      if (block.id === id) return block;
+      if (block.type === "section") {
+        for (const column of block.children) {
+          const found = findBlockById(column, id);
+          if (found) return found;
+        }
+      }
+    }
+    return null;
+  }
+  function findBlockParent(blocks, id, parent = { blocks }) {
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (block.id === id) return parent;
+      if (block.type === "section") {
+        for (let colIdx = 0; colIdx < block.children.length; colIdx++) {
+          const result = findBlockParent(block.children[colIdx], id, {
+            blocks: block.children[colIdx],
+            sectionId: block.id,
+            columnIndex: colIdx
+          });
+          if (result) return result;
+        }
+      }
+    }
+    return null;
+  }
+  function isBlockLocked(blockId) {
+    return options.lockedBlocks?.value.has(blockId) ?? false;
+  }
+  function setContent(newContent, markDirty2 = true) {
+    state.content = normalizeTemplateContentPages(newContent);
+    if (markDirty2) {
+      state.isDirty = true;
+    }
+  }
+  function selectBlock(blockId) {
+    if (blockId && isBlockLocked(blockId)) {
+      return;
+    }
+    state.selectedBlockId = blockId;
+  }
+  function setViewport(viewport) {
+    state.viewport = viewport;
+  }
+  function setDarkMode(darkMode) {
+    state.darkMode = darkMode;
+  }
+  function setUiTheme(theme) {
+    state.uiTheme = theme;
+  }
+  function setPreviewMode(previewMode) {
+    state.previewMode = previewMode;
+    if (previewMode) {
+      state.selectedBlockId = null;
+    }
+  }
+  function updateBlock(blockId, updates) {
+    if (isBlockLocked(blockId)) {
+      return;
+    }
+    const block = findBlockById(state.content.blocks, blockId);
+    if (block) {
+      Object.assign(block, updates);
+      state.isDirty = true;
+    }
+  }
+  function updateSettings(updates) {
+    state.content.settings = { ...state.content.settings, ...updates };
+    state.isDirty = true;
+  }
+  function addBlock(block, targetSectionId, columnIndex = 0, index) {
+    if (targetSectionId) {
+      if (isBlockLocked(targetSectionId)) {
+        return;
+      }
+      const section = findBlockById(state.content.blocks, targetSectionId);
+      if (section && section.type === "section") {
+        section.children[columnIndex] = section.children[columnIndex] || [];
+        const targetArray = section.children[columnIndex];
+        if (index !== void 0 && index < targetArray.length) {
+          targetArray.splice(index, 0, block);
+        } else {
+          targetArray.push(block);
+        }
+      }
+    } else {
+      if (index !== void 0 && index < state.content.blocks.length) {
+        state.content.blocks.splice(index, 0, block);
+      } else {
+        state.content.blocks.push(block);
+      }
+    }
+    state.isDirty = true;
+  }
+  function removeBlock(blockId) {
+    if (isBlockLocked(blockId)) {
+      return;
+    }
+    const parent = findBlockParent(state.content.blocks, blockId);
+    if (parent) {
+      const index = parent.blocks.findIndex((b) => b.id === blockId);
+      if (index !== -1) {
+        parent.blocks.splice(index, 1);
+        if (state.selectedBlockId === blockId) {
+          state.selectedBlockId = null;
+        }
+        state.isDirty = true;
+      }
+    }
+  }
+  function moveBlock(blockId, newIndex, targetSectionId, columnIndex = 0) {
+    if (isBlockLocked(blockId)) {
+      return;
+    }
+    if (targetSectionId && isBlockLocked(targetSectionId)) {
+      return;
+    }
+    const parent = findBlockParent(state.content.blocks, blockId);
+    if (!parent) return;
+    const oldIndex = parent.blocks.findIndex((b) => b.id === blockId);
+    if (oldIndex === -1) return;
+    let targetArray;
+    if (targetSectionId) {
+      const section = findBlockById(state.content.blocks, targetSectionId);
+      if (!section || section.type !== "section") return;
+      section.children[columnIndex] = section.children[columnIndex] || [];
+      targetArray = section.children[columnIndex];
+    } else {
+      targetArray = state.content.blocks;
+    }
+    const [block] = parent.blocks.splice(oldIndex, 1);
+    targetArray.splice(newIndex, 0, block);
+    state.isDirty = true;
+  }
+  function markDirty() {
+    state.isDirty = true;
+  }
+  function ensureCanvasPages() {
+    if (state.content.canvasPages?.length) {
+      return;
+    }
+    const id = crypto.randomUUID();
+    const blocks = state.content.blocks;
+    state.content.canvasPages = [{ id, title: "Step 1", blocks }];
+    state.content.activeCanvasPageId = id;
+    state.content.blocks = blocks;
+    state.isDirty = true;
+  }
+  function switchCanvasPage(pageId) {
+    const pages = state.content.canvasPages;
+    if (!pages?.length) {
+      return;
+    }
+    const page = pages.find((p) => p.id === pageId);
+    if (!page) {
+      return;
+    }
+    state.selectedBlockId = null;
+    state.content.blocks = page.blocks;
+    state.content.activeCanvasPageId = pageId;
+    state.isDirty = true;
+  }
+  function addCanvasPage() {
+    ensureCanvasPages();
+    const pages = state.content.canvasPages;
+    const id = crypto.randomUUID();
+    const title = `Step ${pages.length + 1}`;
+    const newBlocks = [];
+    pages.push({ id, title, blocks: newBlocks });
+    switchCanvasPage(id);
+  }
+  function removeCanvasPage(pageId) {
+    const pages = state.content.canvasPages;
+    if (!pages || pages.length <= 1) {
+      return;
+    }
+    const idx = pages.findIndex((p) => p.id === pageId);
+    if (idx === -1) {
+      return;
+    }
+    pages.splice(idx, 1);
+    if (state.content.activeCanvasPageId === pageId) {
+      const next = pages[Math.min(idx, pages.length - 1)];
+      switchCanvasPage(next.id);
+    } else {
+      state.content.canvasPages = [...pages];
+      state.isDirty = true;
+    }
+  }
+  function renameCanvasPage(pageId, title) {
+    const pages = state.content.canvasPages;
+    if (!pages) {
+      return;
+    }
+    const page = pages.find((p) => p.id === pageId);
+    if (!page) {
+      return;
+    }
+    page.title = title.trim() || page.title;
+    state.isDirty = true;
+  }
+  function switchToNextCanvasPage() {
+    const pages = state.content.canvasPages;
+    if (!pages?.length) {
+      return false;
+    }
+    const activeId = state.content.activeCanvasPageId;
+    const idx = pages.findIndex((p) => p.id === activeId);
+    if (idx === -1 || idx >= pages.length - 1) {
+      return false;
+    }
+    switchCanvasPage(pages[idx + 1].id);
+    return true;
+  }
+  function switchToPreviousCanvasPage() {
+    const pages = state.content.canvasPages;
+    if (!pages?.length) {
+      return false;
+    }
+    const activeId = state.content.activeCanvasPageId;
+    const idx = pages.findIndex((p) => p.id === activeId);
+    if (idx <= 0) {
+      return false;
+    }
+    switchCanvasPage(pages[idx - 1].id);
+    return true;
+  }
+  return {
+    state: readonly(state),
+    content,
+    selectedBlock,
+    isBlockLocked,
+    setContent,
+    selectBlock,
+    setViewport,
+    setDarkMode,
+    setUiTheme,
+    setPreviewMode,
+    updateBlock,
+    updateSettings,
+    addBlock,
+    removeBlock,
+    moveBlock,
+    markDirty,
+    ensureCanvasPages,
+    switchCanvasPage,
+    addCanvasPage,
+    removeCanvasPage,
+    renameCanvasPage,
+    switchToNextCanvasPage,
+    switchToPreviousCanvasPage
+  };
+}
+
+// src/history.ts
+import { computed as computed2, ref } from "@vue/reactivity";
+var MAX_STACK_SIZE = 50;
+var DEBOUNCE_MS = 300;
+var NAVIGATE_IDLE_MS = 1500;
+function useHistory(options) {
+  const {
+    content,
+    setContent,
+    isRemoteOperation,
+    maxSize = MAX_STACK_SIZE
+  } = options;
+  const undoStack = ref([]);
+  const redoStack = ref([]);
+  const isNavigating = ref(false);
+  let navigatingTimeoutId = null;
+  let pendingDebounce = null;
+  const canUndo = computed2(() => undoStack.value.length > 0);
+  const canRedo = computed2(() => redoStack.value.length > 0);
+  function cloneContent() {
+    return JSON.parse(JSON.stringify(content.value));
+  }
+  function pushToUndoStack(snapshot) {
+    undoStack.value.push(snapshot);
+    if (undoStack.value.length > maxSize) {
+      undoStack.value.splice(0, undoStack.value.length - maxSize);
+    }
+  }
+  function flushPendingDebounce() {
+    if (pendingDebounce) {
+      clearTimeout(pendingDebounce.timeoutId);
+      pendingDebounce = null;
+    }
+  }
+  function record() {
+    if (isRemoteOperation?.()) {
+      return;
+    }
+    flushPendingDebounce();
+    pushToUndoStack(cloneContent());
+    redoStack.value = [];
+  }
+  function recordDebounced(blockId) {
+    if (isRemoteOperation?.()) {
+      return;
+    }
+    if (pendingDebounce && pendingDebounce.blockId === blockId) {
+      clearTimeout(pendingDebounce.timeoutId);
+      pendingDebounce.timeoutId = setTimeout(() => {
+        pendingDebounce = null;
+      }, DEBOUNCE_MS);
+      return;
+    }
+    flushPendingDebounce();
+    pushToUndoStack(cloneContent());
+    redoStack.value = [];
+    pendingDebounce = {
+      blockId,
+      timeoutId: setTimeout(() => {
+        pendingDebounce = null;
+      }, DEBOUNCE_MS)
+    };
+  }
+  function setNavigating() {
+    isNavigating.value = true;
+    if (navigatingTimeoutId) {
+      clearTimeout(navigatingTimeoutId);
+    }
+    navigatingTimeoutId = setTimeout(() => {
+      isNavigating.value = false;
+      navigatingTimeoutId = null;
+    }, NAVIGATE_IDLE_MS);
+  }
+  function undo() {
+    if (undoStack.value.length === 0) {
+      return;
+    }
+    flushPendingDebounce();
+    const snapshot = undoStack.value.pop();
+    redoStack.value.push(cloneContent());
+    setContent(snapshot, true);
+    setNavigating();
+  }
+  function redo() {
+    if (redoStack.value.length === 0) {
+      return;
+    }
+    flushPendingDebounce();
+    const snapshot = redoStack.value.pop();
+    undoStack.value.push(cloneContent());
+    setContent(snapshot, true);
+    setNavigating();
+  }
+  function clear() {
+    undoStack.value = [];
+    redoStack.value = [];
+    flushPendingDebounce();
+  }
+  function destroy() {
+    clear();
+    if (navigatingTimeoutId) {
+      clearTimeout(navigatingTimeoutId);
+      navigatingTimeoutId = null;
+    }
+  }
+  return {
+    canUndo,
+    canRedo,
+    isNavigating,
+    undo,
+    redo,
+    record,
+    recordDebounced,
+    clear,
+    destroy
+  };
+}
+
+// src/block-actions.ts
+import { createBlock, generateId } from "@aswin.dev/types";
+function useBlockActions(options) {
+  const { addBlock, removeBlock, updateBlock, selectBlock } = options;
+  function createAndAddBlock(type, targetSectionId, columnIndex) {
+    const block = createBlock(type, options.blockDefaults);
+    addBlock(block, targetSectionId, columnIndex);
+    selectBlock(block.id);
+    return block;
+  }
+  function duplicateBlock(block, targetSectionId, columnIndex) {
+    const cloned = JSON.parse(JSON.stringify(block));
+    cloned.id = generateId();
+    if (cloned.type === "section") {
+      cloned.children = cloned.children.map(
+        (column) => column.map((child) => {
+          const clonedChild = JSON.parse(JSON.stringify(child));
+          clonedChild.id = generateId();
+          return clonedChild;
+        })
+      );
+    }
+    addBlock(cloned, targetSectionId, columnIndex);
+    selectBlock(cloned.id);
+    return cloned;
+  }
+  function deleteBlock(blockId) {
+    removeBlock(blockId);
+  }
+  function updateBlockProperty(blockId, key, value) {
+    updateBlock(blockId, { [key]: value });
+  }
+  return {
+    createAndAddBlock,
+    duplicateBlock,
+    deleteBlock,
+    updateBlockProperty
+  };
+}
+
+// src/auto-save.ts
+import { watch } from "@vue/reactivity";
+function useAutoSave(options) {
+  const {
+    content,
+    isDirty,
+    onChange,
+    debounce = 1e3,
+    enabled = true
+  } = options;
+  let timeoutId = null;
+  let paused = false;
+  function isEnabled() {
+    return typeof enabled === "function" ? enabled() : enabled;
+  }
+  function pause() {
+    paused = true;
+    cancel();
+  }
+  function resume() {
+    paused = false;
+  }
+  function cancel() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  }
+  function flush() {
+    cancel();
+    if (isDirty()) {
+      onChange(JSON.parse(JSON.stringify(content.value)));
+    }
+  }
+  function scheduleOnChange() {
+    if (!isEnabled() || paused) return;
+    cancel();
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      if (isEnabled() && !paused && isDirty()) {
+        onChange(JSON.parse(JSON.stringify(content.value)));
+      }
+    }, debounce);
+  }
+  const stopWatch = watch(
+    content,
+    () => {
+      if (isEnabled() && !paused && isDirty()) {
+        scheduleOnChange();
+      }
+    },
+    { deep: true }
+  );
+  function destroy() {
+    stopWatch();
+    cancel();
+  }
+  return {
+    flush,
+    cancel,
+    pause,
+    resume,
+    destroy
+  };
+}
+
+// src/condition-preview.ts
+import { computed as computed3, reactive as reactive2 } from "@vue/reactivity";
+function useConditionPreview(editor) {
+  const hiddenBlockIds = reactive2(/* @__PURE__ */ new Set());
+  const hasHiddenBlocks = computed3(() => hiddenBlockIds.size > 0);
+  function isHidden(blockId) {
+    return hiddenBlockIds.has(blockId);
+  }
+  function toggleBlock(blockId) {
+    if (hiddenBlockIds.has(blockId)) {
+      hiddenBlockIds.delete(blockId);
+    } else {
+      hiddenBlockIds.add(blockId);
+      if (editor.state.selectedBlockId === blockId) {
+        editor.selectBlock(null);
+      }
+    }
+  }
+  function reset() {
+    hiddenBlockIds.clear();
+  }
+  return {
+    isHidden,
+    toggleBlock,
+    reset,
+    hasHiddenBlocks
+  };
+}
+
+// src/data-source-fetch.ts
+import { computed as computed4, ref as ref2 } from "@vue/reactivity";
+function useDataSourceFetch(options) {
+  const isFetching = ref2(false);
+  const fetchError = ref2(false);
+  const hasDataSource = computed4(() => !!options.definition.value?.dataSource);
+  const needsFetch = computed4(
+    () => hasDataSource.value && !options.block.value.dataSourceFetched
+  );
+  async function fetch() {
+    const def = options.definition.value;
+    if (!def?.dataSource) {
+      return;
+    }
+    isFetching.value = true;
+    fetchError.value = false;
+    try {
+      const result = await def.dataSource.onFetch({
+        fieldValues: { ...options.block.value.fieldValues },
+        blockId: options.block.value.id
+      });
+      if (result == null) {
+        return;
+      }
+      const merged = { ...options.block.value.fieldValues };
+      for (const key of Object.keys(merged)) {
+        if (key in result) {
+          merged[key] = result[key];
+        }
+      }
+      options.onUpdate(merged, true);
+    } catch (error) {
+      console.warn("[Templatical] Data source fetch error:", error);
+      fetchError.value = true;
+    } finally {
+      isFetching.value = false;
+    }
+  }
+  return {
+    isFetching,
+    fetchError,
+    fetch,
+    hasDataSource,
+    needsFetch
+  };
+}
+
+// src/history-interceptor.ts
+function useHistoryInterceptor(editor, history) {
+  const originalAddBlock = editor.addBlock;
+  const originalRemoveBlock = editor.removeBlock;
+  const originalMoveBlock = editor.moveBlock;
+  const originalUpdateBlock = editor.updateBlock;
+  const originalUpdateSettings = editor.updateSettings;
+  editor.addBlock = (block, targetSectionId, columnIndex, index) => {
+    if (targetSectionId && editor.isBlockLocked(targetSectionId)) {
+      return;
+    }
+    history.record();
+    originalAddBlock(block, targetSectionId, columnIndex, index);
+  };
+  editor.removeBlock = (blockId) => {
+    if (editor.isBlockLocked(blockId)) {
+      return;
+    }
+    history.record();
+    originalRemoveBlock(blockId);
+  };
+  editor.moveBlock = (blockId, newIndex, targetSectionId, columnIndex) => {
+    if (editor.isBlockLocked(blockId)) {
+      return;
+    }
+    if (targetSectionId && editor.isBlockLocked(targetSectionId)) {
+      return;
+    }
+    history.record();
+    originalMoveBlock(blockId, newIndex, targetSectionId, columnIndex);
+  };
+  editor.updateBlock = (blockId, updates) => {
+    if (editor.isBlockLocked(blockId)) {
+      return;
+    }
+    history.recordDebounced(blockId);
+    originalUpdateBlock(blockId, updates);
+  };
+  editor.updateSettings = (updates) => {
+    history.record();
+    originalUpdateSettings(updates);
+  };
+}
+export {
+  useAutoSave,
+  useBlockActions,
+  useConditionPreview,
+  useDataSourceFetch,
+  useEditor,
+  useHistory,
+  useHistoryInterceptor
+};
+//# sourceMappingURL=index.js.map