@aswin.dev/editor 0.6.3 → 0.7.0

package/dist/cdn/chunks/CloudEditor-D2GsEC_n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudEditor-D2GsEC_n.js","names":["$emit"],"sources":["../../../src/cloud/composables/useSnapshotPreview.ts","../../../src/cloud/composables/useCloudPanelState.ts","../../../src/cloud/composables/useCollabUndoWarning.ts","../../../src/cloud/composables/useCloudFeatureFlags.ts","../../../src/cloud/composables/useCloudMediaLibrary.ts","../../../src/cloud/composables/useCloudInitialization.ts","../../../src/utils/preRenderCustomBlocks.ts","../../../src/cloud/composables/useCloudLifecycle.ts","../../../src/cloud/composables/useCloudSaveGate.ts","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CloudSaveGateModal.vue","../../../src/cloud/components/CloudHeader.vue","../../../src/cloud/components/CloudHeader.vue","../../../src/cloud/components/CloudPanels.vue","../../../src/cloud/components/CloudPanels.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudLoadingOverlay.vue","../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/CloudErrorOverlay.vue","../../../src/cloud/components/SnapshotPreviewBanner.vue","../../../src/cloud/components/SnapshotPreviewBanner.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/components/CollabUndoToast.vue","../../../src/cloud/CloudEditor.vue","../../../src/cloud/CloudEditor.vue"],"sourcesContent":["import {\n  computed,\n  onScopeDispose,\n  shallowRef,\n  ref,\n  type ComputedRef,\n  type Ref,\n} from \"vue\";\nimport type { TemplateContent, TemplateSnapshot } from \"@templatical/types\";\nimport type {\n  UseHistoryReturn,\n  UseConditionPreviewReturn,\n  UseAutoSaveReturn,\n} from \"@templatical/core\";\nimport {\n  useSnapshotHistory,\n  type AuthManager,\n  type UseSnapshotHistoryReturn,\n} from \"@templatical/core/cloud\";\nimport type { BaseEditorReturn } from \"../../composables/useEditorCore\";\n\nexport interface UseSnapshotPreviewOptions {\n  authManager: AuthManager;\n  editor: BaseEditorReturn & {\n    hasTemplate: () => boolean;\n    createSnapshot: () => Promise<void>;\n  };\n  history: UseHistoryReturn;\n  conditionPreview: UseConditionPreviewReturn;\n  autoSave: UseAutoSaveReturn | null;\n  onError?: (error: Error) => void;\n}\n\nexport interface UseSnapshotPreviewReturn {\n  snapshotHistoryInstance: Ref<UseSnapshotHistoryReturn | null>;\n  previewingSnapshot: Ref<TemplateSnapshot | null>;\n  contentBeforePreview: Ref<TemplateContent | null>;\n  isPreviewingSnapshot: ComputedRef<boolean>;\n  snapshotHistorySnapshots: ComputedRef<TemplateSnapshot[]>;\n  snapshotHistoryIsLoading: ComputedRef<boolean>;\n  snapshotHistoryIsRestoring: ComputedRef<boolean>;\n  initSnapshotHistory: () => void;\n  handleRestore: (template: { content: TemplateContent }) => void;\n  handleSnapshotNavigate: (snapshot: TemplateSnapshot) => Promise<void>;\n  confirmRestoreSnapshot: () => Promise<void>;\n  cancelPreview: () => void;\n  loadSnapshotHistory: () => Promise<void>;\n}\n\nexport function useSnapshotPreview(\n  options: UseSnapshotPreviewOptions,\n): UseSnapshotPreviewReturn {\n  const { authManager, editor, history, conditionPreview, autoSave, onError } =\n    options;\n\n  const snapshotHistoryInstance = shallowRef<UseSnapshotHistoryReturn | null>(\n    null,\n  );\n  const previewingSnapshot = ref<TemplateSnapshot | null>(null);\n  const contentBeforePreview = ref<TemplateContent | null>(null);\n\n  // Per CLAUDE.md, async functions must guard against post-unmount execution\n  // after every `await` so we don't write to dead refs or fire side effects\n  // (autoSave.pause, setContent) on a torn-down component.\n  let destroyed = false;\n  onScopeDispose(() => {\n    destroyed = true;\n  });\n\n  const isPreviewingSnapshot = computed(\n    () => previewingSnapshot.value !== null,\n  );\n  const snapshotHistorySnapshots = computed(\n    () => snapshotHistoryInstance.value?.snapshots.value ?? [],\n  );\n  const snapshotHistoryIsLoading = computed(\n    () => snapshotHistoryInstance.value?.isLoading.value ?? false,\n  );\n  const snapshotHistoryIsRestoring = computed(\n    () => snapshotHistoryInstance.value?.isRestoring.value ?? false,\n  );\n\n  function initSnapshotHistory(): void {\n    if (editor.state.template?.id && !snapshotHistoryInstance.value) {\n      snapshotHistoryInstance.value = useSnapshotHistory({\n        authManager,\n        templateId: editor.state.template.id,\n        onRestore: handleRestore,\n        onError,\n      });\n      snapshotHistoryInstance.value.loadSnapshots();\n    }\n  }\n\n  function handleRestore(template: { content: TemplateContent }): void {\n    editor.setContent(template.content, false);\n    history.clear();\n    conditionPreview.reset();\n  }\n\n  async function handleSnapshotNavigate(\n    snapshot: TemplateSnapshot,\n  ): Promise<void> {\n    if (destroyed) return;\n\n    if (previewingSnapshot.value) {\n      previewingSnapshot.value = snapshot;\n      editor.setContent(snapshot.content, false);\n      return;\n    }\n\n    if (editor.state.isDirty && editor.hasTemplate()) {\n      await editor.createSnapshot();\n      if (destroyed) return;\n    }\n\n    contentBeforePreview.value = structuredClone(editor.content.value);\n\n    autoSave?.pause();\n    previewingSnapshot.value = snapshot;\n    editor.setContent(snapshot.content, false);\n  }\n\n  async function confirmRestoreSnapshot(): Promise<void> {\n    if (!previewingSnapshot.value || !snapshotHistoryInstance.value) return;\n\n    try {\n      await snapshotHistoryInstance.value.restoreSnapshot(\n        previewingSnapshot.value.id,\n      );\n      if (destroyed) return;\n      await snapshotHistoryInstance.value.loadSnapshots();\n      if (destroyed) return;\n    } finally {\n      if (!destroyed) {\n        previewingSnapshot.value = null;\n        contentBeforePreview.value = null;\n        autoSave?.resume();\n      }\n    }\n  }\n\n  function cancelPreview(): void {\n    if (!previewingSnapshot.value || !contentBeforePreview.value) return;\n\n    editor.setContent(contentBeforePreview.value, false);\n\n    previewingSnapshot.value = null;\n    contentBeforePreview.value = null;\n\n    autoSave?.resume();\n  }\n\n  async function loadSnapshotHistory(): Promise<void> {\n    if (destroyed) return;\n    if (snapshotHistoryInstance.value) {\n      await snapshotHistoryInstance.value.loadSnapshots();\n    }\n  }\n\n  return {\n    snapshotHistoryInstance,\n    previewingSnapshot,\n    contentBeforePreview,\n    isPreviewingSnapshot,\n    snapshotHistorySnapshots,\n    snapshotHistoryIsLoading,\n    snapshotHistoryIsRestoring,\n    initSnapshotHistory,\n    handleRestore,\n    handleSnapshotNavigate,\n    confirmRestoreSnapshot,\n    cancelPreview,\n    loadSnapshotHistory,\n  };\n}\n","import { computed, ref, type ComputedRef, type Ref } from \"vue\";\nimport { onClickOutside } from \"@vueuse/core\";\nimport type { AiFeature } from \"../components/AiFeatureMenu.vue\";\nimport type { MediaCategory } from \"@templatical/media-library\";\n\nexport interface UseCloudPanelStateReturn {\n  activePanel: Ref<RightPanel | null>;\n  aiChatOpen: ComputedRef<boolean> & { value: boolean };\n  scoringPanelOpen: ComputedRef<boolean> & { value: boolean };\n  designReferenceOpen: ComputedRef<boolean> & { value: boolean };\n  commentsOpen: ComputedRef<boolean> & { value: boolean };\n  testEmailModalOpen: Ref<boolean>;\n  mediaLibraryOpen: Ref<boolean>;\n  mediaLibraryAccept: Ref<MediaCategory[] | undefined>;\n  aiMenuOpen: Ref<boolean>;\n  aiMenuRef: Ref<HTMLElement | null>;\n  rightPanelOpen: ComputedRef<boolean>;\n  activeAiFeature: ComputedRef<AiFeature | null>;\n  aiButtonActive: ComputedRef<boolean>;\n  toggleAiMenu: () => void;\n  handleAiFeatureSelect: (feature: AiFeature) => void;\n}\n\ntype RightPanel = \"ai-chat\" | \"scoring\" | \"design-reference\" | \"comments\";\n\nexport function useCloudPanelState(): UseCloudPanelStateReturn {\n  const activePanel = ref<RightPanel | null>(null);\n\n  const aiChatOpen = computed({\n    get: () => activePanel.value === \"ai-chat\",\n    set: (v) => (activePanel.value = v ? \"ai-chat\" : null),\n  });\n  const scoringPanelOpen = computed({\n    get: () => activePanel.value === \"scoring\",\n    set: (v) => (activePanel.value = v ? \"scoring\" : null),\n  });\n  const designReferenceOpen = computed({\n    get: () => activePanel.value === \"design-reference\",\n    set: (v) => (activePanel.value = v ? \"design-reference\" : null),\n  });\n  const commentsOpen = computed({\n    get: () => activePanel.value === \"comments\",\n    set: (v) => (activePanel.value = v ? \"comments\" : null),\n  });\n\n  const testEmailModalOpen = ref(false);\n  const mediaLibraryOpen = ref(false);\n  const mediaLibraryAccept = ref<MediaCategory[] | undefined>(undefined);\n  const aiMenuOpen = ref(false);\n  const aiMenuRef = ref<HTMLElement | null>(null);\n\n  const rightPanelOpen = computed(() => activePanel.value !== null);\n\n  const activeAiFeature = computed<AiFeature | null>(() => {\n    const p = activePanel.value;\n    if (p === \"ai-chat\" || p === \"design-reference\" || p === \"scoring\")\n      return p;\n    return null;\n  });\n\n  const aiButtonActive = computed(\n    () =>\n      aiMenuOpen.value ||\n      activePanel.value === \"ai-chat\" ||\n      activePanel.value === \"design-reference\" ||\n      activePanel.value === \"scoring\",\n  );\n\n  function toggleAiMenu(): void {\n    aiMenuOpen.value = !aiMenuOpen.value;\n  }\n\n  function handleAiFeatureSelect(feature: AiFeature): void {\n    aiMenuOpen.value = false;\n    activePanel.value = activePanel.value === feature ? null : feature;\n  }\n\n  onClickOutside(aiMenuRef, () => {\n    aiMenuOpen.value = false;\n  });\n\n  return {\n    activePanel,\n    aiChatOpen,\n    scoringPanelOpen,\n    designReferenceOpen,\n    commentsOpen,\n    testEmailModalOpen,\n    mediaLibraryOpen,\n    mediaLibraryAccept,\n    aiMenuOpen,\n    aiMenuRef,\n    rightPanelOpen,\n    activeAiFeature,\n    aiButtonActive,\n    toggleAiMenu,\n    handleAiFeatureSelect,\n  };\n}\n","import { type ComputedRef, type Ref, ref } from \"vue\";\nimport { useTimeoutFn } from \"@vueuse/core\";\nimport { COLLAB_UNDO_WARNING_MS } from \"../../constants/timeouts\";\n\nexport interface UseCollabUndoWarningOptions {\n  /** Whether collaboration is currently enabled (reactive). */\n  isCollaborationEnabled: ComputedRef<boolean>;\n  /** Returns the current list of collaborators. */\n  getCollaboratorCount: () => number;\n  /** Whether the history stack has entries to undo. */\n  canUndo: ComputedRef<boolean>;\n}\n\nexport interface UseCollabUndoWarningReturn {\n  collabUndoWarningVisible: Ref<boolean>;\n  showCollabUndoWarning: () => void;\n}\n\nexport function useCollabUndoWarning(\n  options: UseCollabUndoWarningOptions,\n): UseCollabUndoWarningReturn {\n  const { isCollaborationEnabled, getCollaboratorCount, canUndo } = options;\n\n  const collabUndoWarningFired = ref(false);\n  const collabUndoWarningVisible = ref(false);\n\n  const { start: startCollabUndoWarningTimeout } = useTimeoutFn(\n    () => {\n      collabUndoWarningVisible.value = false;\n    },\n    COLLAB_UNDO_WARNING_MS,\n    { immediate: false },\n  );\n\n  function showCollabUndoWarning(): void {\n    if (\n      collabUndoWarningFired.value ||\n      !isCollaborationEnabled.value ||\n      getCollaboratorCount() === 0 ||\n      !canUndo.value\n    ) {\n      return;\n    }\n\n    collabUndoWarningFired.value = true;\n    collabUndoWarningVisible.value = true;\n    startCollabUndoWarningTimeout();\n  }\n\n  return {\n    collabUndoWarningVisible,\n    showCollabUndoWarning,\n  };\n}\n","import { computed, ref, type ComputedRef, type Ref } from \"vue\";\nimport { useTimeoutFn } from \"@vueuse/core\";\nimport type {\n  UsePlanConfigReturn,\n  UseAiConfigReturn,\n} from \"@templatical/core/cloud\";\n\nexport interface UseCloudFeatureFlagsOptions {\n  planConfigInstance: UsePlanConfigReturn;\n  aiConfig: UseAiConfigReturn;\n  editor: {\n    state: {\n      readonly template?: { id: string } | null;\n    };\n  };\n}\n\nexport interface UseCloudFeatureFlagsReturn {\n  canUseAiGeneration: ComputedRef<boolean>;\n  canSendTestEmail: ComputedRef<boolean>;\n  hasTemplateSaved: ComputedRef<boolean>;\n  isWhiteLabeled: ComputedRef<boolean>;\n  templateLimit: ComputedRef<number | null>;\n  templateCount: ComputedRef<number>;\n  isSaveExporting: Ref<boolean>;\n  saveStatus: Ref<\"idle\" | \"saved\" | \"error\">;\n  saveErrorMessage: Ref<string>;\n  startSaveStatusClear: () => void;\n}\n\nexport function useCloudFeatureFlags(\n  options: UseCloudFeatureFlagsOptions,\n): UseCloudFeatureFlagsReturn {\n  const { planConfigInstance, aiConfig, editor } = options;\n\n  const canUseAiGeneration = computed(\n    () =>\n      planConfigInstance.hasFeature(\"ai_generation\") &&\n      aiConfig.hasAnyMenuFeature.value,\n  );\n  const canSendTestEmail = computed(() =>\n    planConfigInstance.hasFeature(\"test_email\"),\n  );\n  const hasTemplateSaved = computed(() => !!editor.state.template?.id);\n  const isWhiteLabeled = computed(() =>\n    planConfigInstance.hasFeature(\"white_label\"),\n  );\n  const templateLimit = computed(\n    () => planConfigInstance.config.value?.limits.max_templates ?? null,\n  );\n  const templateCount = computed(\n    () => planConfigInstance.config.value?.template_count ?? 0,\n  );\n\n  const isSaveExporting = ref(false);\n  const saveStatus = ref<\"idle\" | \"saved\" | \"error\">(\"idle\");\n  const saveErrorMessage = ref(\"\");\n\n  const { start: startSaveStatusClear } = useTimeoutFn(\n    () => {\n      saveStatus.value = \"idle\";\n    },\n    3000,\n    { immediate: false },\n  );\n\n  return {\n    canUseAiGeneration,\n    canSendTestEmail,\n    hasTemplateSaved,\n    isWhiteLabeled,\n    templateLimit,\n    templateCount,\n    isSaveExporting,\n    saveStatus,\n    saveErrorMessage,\n    startSaveStatusClear,\n  };\n}\n","import { onScopeDispose, type Ref } from \"vue\";\nimport type {\n  MediaCategory,\n  MediaItem,\n  MediaRequestContext,\n} from \"@templatical/media-library\";\nimport type { MediaResult } from \"@templatical/types\";\n\nexport interface UseCloudMediaLibraryOptions {\n  onRequestMedia?: (context: MediaRequestContext) => Promise<MediaItem | null>;\n  mediaLibraryOpen: Ref<boolean>;\n  mediaLibraryAccept: Ref<MediaCategory[] | undefined>;\n}\n\nexport interface UseCloudMediaLibraryReturn {\n  handleRequestMedia: () => Promise<MediaResult | null>;\n  handleMediaSelect: (item: MediaItem) => void;\n  handleMediaLibraryClose: () => void;\n}\n\nexport function useCloudMediaLibrary(\n  options: UseCloudMediaLibraryOptions,\n): UseCloudMediaLibraryReturn {\n  const { onRequestMedia, mediaLibraryOpen, mediaLibraryAccept } = options;\n\n  let mediaResolve: ((result: MediaResult | null) => void) | null = null;\n\n  async function handleRequestMedia(): Promise<MediaResult | null> {\n    // If consumer provides a custom media handler, use it\n    if (onRequestMedia) {\n      const item = await onRequestMedia({ accept: [\"images\"] });\n      if (!item) return null;\n      return { url: item.url, alt: item.alt_text || undefined };\n    }\n\n    // Otherwise open the built-in media library. If a previous request\n    // is still pending (e.g. consumer fired two requests back-to-back),\n    // settle it with null so its caller doesn't hang forever.\n    if (mediaResolve) {\n      mediaResolve(null);\n      mediaResolve = null;\n    }\n    mediaLibraryAccept.value = [\"images\"];\n    mediaLibraryOpen.value = true;\n    return new Promise<MediaResult | null>((resolve) => {\n      mediaResolve = (result) => {\n        resolve(result);\n      };\n    });\n  }\n\n  function handleMediaSelect(item: MediaItem): void {\n    mediaLibraryOpen.value = false;\n    mediaResolve?.({ url: item.url, alt: item.alt_text || undefined });\n    mediaResolve = null;\n  }\n\n  function handleMediaLibraryClose(): void {\n    mediaLibraryOpen.value = false;\n    mediaResolve?.(null);\n    mediaResolve = null;\n  }\n\n  onScopeDispose(() => {\n    if (mediaResolve) {\n      mediaResolve(null);\n      mediaResolve = null;\n    }\n  });\n\n  return {\n    handleRequestMedia,\n    handleMediaSelect,\n    handleMediaLibraryClose,\n  };\n}\n","import { computed, provide, ref, watch, type ComputedRef, type Ref } from \"vue\";\nimport {\n  AuthManager,\n  performHealthCheck,\n  useAiConfig,\n  useCollaboration,\n  useCollaborationBroadcast,\n  useCommentListener,\n  useComments,\n  useEditor,\n  useExport,\n  useMcpListener,\n  usePlanConfig,\n  useSavedModules,\n  useTemplateScoring,\n  useTestEmail,\n  useWebSocket,\n  type UseAiConfigReturn,\n  type UseCollaborationReturn,\n  type UseCommentsReturn,\n  type UseExportReturn,\n  type UsePlanConfigReturn,\n  type UseSavedModulesReturn,\n  type UseTemplateScoringReturn,\n  type UseTestEmailReturn,\n  type UseWebSocketReturn,\n  type UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\nimport type {\n  McpOperationPayload,\n  ThemeOverrides,\n  UiTheme,\n} from \"@templatical/types\";\n\nimport {\n  useEditorCore,\n  type UseEditorCoreReturn,\n} from \"../../composables/useEditorCore\";\nimport { resolveAccessibilityOptions } from \"../../utils/resolveAccessibilityOptions\";\nimport { useDragDrop } from \"../../composables/useDragDrop\";\nimport type { UseFontsReturn } from \"../../composables/useFonts\";\nimport type { Translations } from \"../../i18n\";\nimport type { EditorCapabilities } from \"../../types/editor-capabilities\";\nimport {\n  ON_REQUEST_MEDIA_KEY,\n  AUTH_MANAGER_KEY,\n  AI_CONFIG_KEY,\n  COMMENTS_KEY,\n  SAVED_MODULES_HEADLESS_KEY,\n  SCORING_KEY,\n  CAPABILITIES_KEY,\n} from \"../../keys\";\nimport { DEFAULT_AUTO_SAVE_DEBOUNCE_MS } from \"../../constants/timeouts\";\nimport { logger } from \"../../utils/logger\";\n\nimport {\n  useSnapshotPreview,\n  type UseSnapshotPreviewReturn,\n} from \"./useSnapshotPreview\";\nimport {\n  useCloudPanelState,\n  type UseCloudPanelStateReturn,\n} from \"./useCloudPanelState\";\nimport { useCollabUndoWarning } from \"./useCollabUndoWarning\";\nimport {\n  useCloudFeatureFlags,\n  type UseCloudFeatureFlagsReturn,\n} from \"./useCloudFeatureFlags\";\nimport {\n  useCloudMediaLibrary,\n  type UseCloudMediaLibraryReturn,\n} from \"./useCloudMediaLibrary\";\n\nimport type { TemplaticalCloudEditorConfig } from \"../cloudConfig\";\n\n/** Minimal interface of the CommentsSidebar-filter target. */\ninterface CommentsSidebarInstance {\n  filterByBlock: (blockId: string) => void;\n}\n\n/** Getter for the target — evaluated lazily so the sidebar can mount later. */\ntype CommentsSidebarGetter = () => CommentsSidebarInstance | null;\n\ntype CollaborationInstance = UseCollaborationReturn & {\n  _broadcastOperation: (payload: McpOperationPayload) => void;\n  _isProcessingRemoteOperation: () => boolean;\n};\n\nexport interface UseCloudInitializationOptions {\n  config: TemplaticalCloudEditorConfig;\n  translations: Translations;\n  fontsManager: UseFontsReturn;\n  emit: (event: \"ready\") => void;\n  /** Lazy getter for the CommentsSidebar-filter target (for block-filter). */\n  getCommentsSidebar: CommentsSidebarGetter;\n}\n\nexport interface UseCloudInitializationReturn {\n  // Init state\n  isInitializing: Ref<boolean>;\n  isAuthReady: Ref<boolean>;\n  initError: Ref<Error | null>;\n  isDestroyed: () => boolean;\n\n  // Infrastructure\n  authManager: AuthManager;\n  planConfigInstance: UsePlanConfigReturn;\n  websocket: UseWebSocketReturn;\n  collaboration: CollaborationInstance | null;\n  isCollaborationEnabled: ComputedRef<boolean>;\n\n  // Editor + core\n  editor: CloudUseEditorReturn;\n  core: UseEditorCoreReturn;\n\n  // Cloud composables\n  aiConfig: UseAiConfigReturn;\n  featureFlags: UseCloudFeatureFlagsReturn;\n  mediaLib: UseCloudMediaLibraryReturn;\n  exporter: UseExportReturn;\n  testEmail: UseTestEmailReturn;\n  commentsInstance: UseCommentsReturn;\n  savedModulesHeadless: UseSavedModulesReturn;\n  scoringInstance: UseTemplateScoringReturn;\n  panelState: UseCloudPanelStateReturn;\n  snapshotPreview: UseSnapshotPreviewReturn;\n  collabWarning: ReturnType<typeof useCollabUndoWarning>;\n\n  // Local UI state surfaced through capabilities\n  showSaveModuleDialog: Ref<boolean>;\n  showModuleBrowserModal: Ref<boolean>;\n  saveModulePreSelectedBlockId: Ref<string | null>;\n\n  // Late-bound save hook — set by `useCloudLifecycle` after it wires saveTemplate.\n  // The `onSave` keyboard shortcut + `useEditorCore` autoSave both route here.\n  onSaveHook: { value: (() => Promise<unknown>) | null };\n\n  // Methods\n  initialize: () => Promise<void>;\n  destroy: () => void;\n  setThemeOverrides: (overrides: ThemeOverrides) => void;\n  setUiTheme: (theme: UiTheme) => void;\n  openCommentsForBlock: (blockId: string) => void;\n}\n\n/**\n * Owns the entire CloudEditor.vue initialization dance:\n *   1. AuthManager + PlanConfig\n *   2. Collaboration locked-blocks forward-ref\n *   3. Cloud editor\n *   4. WebSocket + MCP listener\n *   5. Collaboration (wraps editor methods — MUST precede useEditorCore)\n *   6. useEditorCore (provides all shared keys)\n *   7. Collab undo warning (needs core.history.canUndo)\n *   8. Snapshot preview (needs core.autoSave)\n *   9. Remaining cloud composables (aiConfig, exporter, testEmail, etc.)\n *  10. Cloud-only provides (including CAPABILITIES_KEY override)\n *\n * Forward-ref pattern for `snapshotPreview` / `collabWarning` is contained\n * here instead of leaking to the parent.\n */\nexport function useCloudInitialization(\n  options: UseCloudInitializationOptions,\n): UseCloudInitializationReturn {\n  const { config, translations, fontsManager, emit, getCommentsSidebar } =\n    options;\n\n  // --- Init state ---\n  const isInitializing = ref(true);\n  const isAuthReady = ref(false);\n  const initError = ref<Error | null>(null);\n  let _destroyed = false;\n\n  // --- Late-bound save hook (filled in by useCloudLifecycle) ---\n  const onSaveHook: { value: (() => Promise<unknown>) | null } = {\n    value: null,\n  };\n\n  // --- Forward refs for circular composable dependencies ---\n  let snapshotPreviewRef: UseSnapshotPreviewReturn | null = null;\n  let collabWarningRef: ReturnType<typeof useCollabUndoWarning> | null = null;\n\n  // --- 1. AuthManager + PlanConfig ---\n  const authManager = new AuthManager({\n    ...config.auth,\n    onError: config.onError,\n  });\n\n  const planConfigInstance = usePlanConfig({\n    authManager,\n    onError: config.onError,\n  });\n\n  // --- 2. Collaboration locked blocks ref (forward-declared for step 3) ---\n  const collaborationLockedBlocks = ref<Map<string, unknown>>(new Map());\n\n  // --- 3. Cloud editor ---\n  const editor = useEditor({\n    authManager,\n    defaultFontFamily: config.fonts?.defaultFont,\n    templateDefaults: config.templateDefaults,\n    onError: config.onError,\n    lockedBlocks: collaborationLockedBlocks,\n  });\n\n  // --- 4. WebSocket + MCP listener ---\n  const websocket = useWebSocket({\n    authManager,\n    onError: config.onError,\n  });\n\n  if (config.mcp?.enabled) {\n    useMcpListener({\n      editor,\n      channel: websocket.channel,\n      onOperation: config.mcp.onOperation,\n    });\n  }\n\n  // --- 5. Collaboration (MUST precede useEditorCore) ---\n  //\n  // Order: `useCollaborationBroadcast` wraps editor mutation methods so they\n  // broadcast to peers. Step 6's `useHistoryInterceptor` then wraps them\n  // AGAIN to push history entries. Reversing would push history for remote\n  // operations, causing local/remote state drift.\n  let collaboration: CollaborationInstance | null = null;\n\n  if (config.collaboration?.enabled) {\n    collaboration = useCollaboration({\n      authManager,\n      editor,\n      channel: websocket.channel,\n      onError: config.onError,\n      onCollaboratorJoined: config.collaboration.onCollaboratorJoined,\n      onCollaboratorLeft: config.collaboration.onCollaboratorLeft,\n      onBlockLocked: config.collaboration.onBlockLocked,\n      onBlockUnlocked: config.collaboration.onBlockUnlocked,\n    }) as CollaborationInstance;\n\n    watch(\n      () => collaboration!.lockedBlocks.value,\n      (newLockedBlocks) => {\n        collaborationLockedBlocks.value = newLockedBlocks;\n      },\n      { immediate: true },\n    );\n\n    useCollaborationBroadcast(editor, collaboration);\n  }\n\n  const isCollaborationEnabled = computed(\n    () =>\n      !!config.collaboration?.enabled &&\n      planConfigInstance.hasFeature(\"collaboration\"),\n  );\n\n  // --- 6. useEditorCore ---\n  const core = useEditorCore({\n    editor,\n    config: {\n      uiTheme: config.uiTheme,\n      theme: undefined, // applied in initialize() after plan check\n      blockDefaults: config.blockDefaults,\n      customBlocks: [], // deferred to initialize()\n      mergeTags: config.mergeTags,\n      displayConditions: config.displayConditions,\n      onRequestMedia: null, // cloud handles via mediaLib.handleRequestMedia\n      accessibility: resolveAccessibilityOptions(config),\n      onSave: () => {\n        onSaveHook.value?.().catch((err) => {\n          config.onError?.(err as Error);\n        });\n      },\n    },\n    translations,\n    fontsManager,\n    historyOptions: collaboration\n      ? {\n          isRemoteOperation: () =>\n            collaboration!._isProcessingRemoteOperation(),\n        }\n      : undefined,\n    autoSaveOptions: {\n      onChange: async () => {\n        if (editor.hasTemplate()) {\n          await editor.createSnapshot();\n          snapshotPreviewRef?.snapshotHistoryInstance.value?.loadSnapshots();\n        }\n      },\n      debounce: config.autoSaveDebounce ?? DEFAULT_AUTO_SAVE_DEBOUNCE_MS,\n      enabled: () =>\n        config.autoSave !== false && planConfigInstance.hasFeature(\"auto_save\"),\n    },\n    themeExtraStyles: () => ({\n      \"--tpl-drop-text\": `\"${translations.canvas.dropHere}\"`,\n    }),\n    keyboardOptions: {\n      onBeforeUndo: () => collabWarningRef?.showCollabUndoWarning(),\n    },\n  });\n\n  // --- 7. Collab undo warning ---\n  const collabWarning = useCollabUndoWarning({\n    isCollaborationEnabled,\n    getCollaboratorCount: () => collaboration?.collaborators.value.length ?? 0,\n    canUndo: core.history.canUndo,\n  });\n  collabWarningRef = collabWarning;\n\n  // --- 8. Snapshot preview ---\n  const snapshotPreview = useSnapshotPreview({\n    authManager,\n    editor,\n    history: core.history,\n    conditionPreview: core.conditionPreview,\n    autoSave: core.autoSave,\n    onError: config.onError,\n  });\n  snapshotPreviewRef = snapshotPreview;\n\n  // --- 9. Remaining cloud composables ---\n  const panelState = useCloudPanelState();\n  const aiConfig = useAiConfig(config.ai);\n\n  const featureFlags = useCloudFeatureFlags({\n    planConfigInstance,\n    aiConfig,\n    editor,\n  });\n\n  const mediaLib = useCloudMediaLibrary({\n    onRequestMedia: config.onRequestMedia,\n    mediaLibraryOpen: panelState.mediaLibraryOpen,\n    mediaLibraryAccept: panelState.mediaLibraryAccept,\n  });\n\n  // Install drag-drop listeners (no return value needed).\n  useDragDrop({\n    onBlockMove: editor.moveBlock,\n    onBlockAdd: editor.addBlock,\n  });\n\n  const exporter = useExport({\n    authManager,\n    getFontsConfig: () => config.fonts,\n    canUseCustomFonts: () => planConfigInstance.hasFeature(\"custom_fonts\"),\n  });\n\n  const testEmail = useTestEmail({\n    authManager,\n    getTemplateId: () => editor.state.template?.id ?? null,\n    save: () => editor.save(),\n    exportHtml: (templateId: string) => exporter.exportHtml(templateId),\n    onError: config.onError,\n    isAuthReady,\n    onBeforeTestEmail: config.onBeforeTestEmail,\n  });\n\n  const commentsInstance = useComments({\n    authManager,\n    getTemplateId: () => editor.state.template?.id ?? null,\n    getSocketId: () => websocket.getSocketId(),\n    onComment: config.onComment,\n    onError: config.onError,\n    isAuthReady,\n    hasCommentingFeature: () =>\n      config.commenting !== false &&\n      planConfigInstance.hasFeature(\"commenting\"),\n  });\n\n  useCommentListener({\n    comments: commentsInstance,\n    channel: websocket.channel,\n  });\n\n  const savedModulesHeadless = useSavedModules({\n    authManager,\n    onError: config.onError,\n  });\n  const showSaveModuleDialog = ref(false);\n  const saveModulePreSelectedBlockId = ref<string | null>(null);\n  const showModuleBrowserModal = ref(false);\n\n  const scoringInstance = useTemplateScoring({\n    authManager,\n    getTemplateId: () => editor.state.template?.id ?? null,\n  });\n\n  // --- Comments block-filter bridge ---\n  function openCommentsForBlock(blockId: string): void {\n    panelState.commentsOpen.value = true;\n    // Sidebar may not be mounted yet (async component); defer look-up.\n    queueMicrotask(() => {\n      getCommentsSidebar()?.filterByBlock(blockId);\n    });\n  }\n\n  // --- 10. Cloud-only provides ---\n  provide(ON_REQUEST_MEDIA_KEY, mediaLib.handleRequestMedia);\n  provide(AUTH_MANAGER_KEY, authManager);\n  provide(AI_CONFIG_KEY, aiConfig);\n  provide(COMMENTS_KEY, commentsInstance);\n  provide(SAVED_MODULES_HEADLESS_KEY, savedModulesHeadless);\n  provide(SCORING_KEY, scoringInstance);\n\n  // Override default capabilities from useEditorCore with cloud capabilities.\n  provide(CAPABILITIES_KEY, {\n    plan: planConfigInstance,\n    ai: aiConfig,\n    comments: {\n      getBlockCount: (blockId: string) =>\n        commentsInstance.commentCountByBlock.value.get(blockId) ?? 0,\n      openForBlock: openCommentsForBlock,\n    },\n    savedModules: {\n      openSaveDialog: (blockId: string) => {\n        saveModulePreSelectedBlockId.value = blockId ?? null;\n        showSaveModuleDialog.value = true;\n      },\n      openBrowser: () => {\n        showModuleBrowserModal.value = true;\n      },\n      moduleCount: computed(() => savedModulesHeadless.modules.value.length),\n    },\n  } satisfies EditorCapabilities);\n\n  // --- Theme setters (plan-gated) ---\n  function setThemeOverrides(overrides: ThemeOverrides): void {\n    if (!planConfigInstance.hasFeature(\"theme_customization\")) return;\n    core.themeOverrides.value = overrides;\n  }\n\n  function setUiTheme(theme: UiTheme): void {\n    editor.setUiTheme(theme);\n  }\n\n  // --- Initialize (async bootstrap) ---\n  async function initialize(): Promise<void> {\n    isInitializing.value = true;\n    initError.value = null;\n\n    try {\n      await authManager.initialize();\n      if (_destroyed) return;\n      isAuthReady.value = true;\n\n      const healthResult = await performHealthCheck({ authManager });\n      if (_destroyed) return;\n\n      if (!healthResult.api.ok) {\n        throw new Error(\"Health check failed: API is not reachable\");\n      }\n\n      if (!healthResult.auth.ok) {\n        throw new Error(\n          `Health check failed: authentication error${healthResult.auth.error ? ` - ${healthResult.auth.error}` : \"\"}`,\n        );\n      }\n\n      if (!healthResult.websocket.ok) {\n        logger.warn(\n          \"WebSocket health check failed:\",\n          healthResult.websocket.error ?? \"unknown error\",\n          \"-- real-time features will be disabled.\",\n        );\n      }\n\n      await planConfigInstance.fetchConfig();\n      if (_destroyed) return;\n\n      fontsManager.setCustomFontsEnabled(\n        planConfigInstance.hasFeature(\"custom_fonts\"),\n      );\n\n      if (\n        config.customBlocks?.length &&\n        planConfigInstance.hasFeature(\"custom_blocks\")\n      ) {\n        core.registerCustomBlocks(config.customBlocks);\n      }\n\n      if (\n        config.theme &&\n        planConfigInstance.hasFeature(\"theme_customization\")\n      ) {\n        core.themeOverrides.value = config.theme;\n      }\n\n      if (\n        config.modules !== false &&\n        planConfigInstance.hasFeature(\"saved_modules\")\n      ) {\n        savedModulesHeadless.loadModules();\n      }\n\n      emit(\"ready\");\n    } catch (error) {\n      if (_destroyed) return;\n      const wrappedError =\n        error instanceof Error\n          ? error\n          : new Error(\"Initialization failed\", { cause: error });\n      initError.value = wrappedError;\n      config.onError?.(wrappedError);\n    } finally {\n      if (!_destroyed) {\n        isInitializing.value = false;\n      }\n    }\n  }\n\n  function destroy(): void {\n    _destroyed = true;\n    fontsManager.cleanupFontLinks();\n    websocket.disconnect();\n    core.destroy();\n    config.onUnmount?.();\n  }\n\n  return {\n    isInitializing,\n    isAuthReady,\n    initError,\n    isDestroyed: () => _destroyed,\n\n    authManager,\n    planConfigInstance,\n    websocket,\n    collaboration,\n    isCollaborationEnabled,\n\n    editor,\n    core,\n\n    aiConfig,\n    featureFlags,\n    mediaLib,\n    exporter,\n    testEmail,\n    commentsInstance,\n    savedModulesHeadless,\n    scoringInstance,\n    panelState,\n    snapshotPreview,\n    collabWarning,\n\n    showSaveModuleDialog,\n    showModuleBrowserModal,\n    saveModulePreSelectedBlockId,\n\n    onSaveHook,\n\n    initialize,\n    destroy,\n    setThemeOverrides,\n    setUiTheme,\n    openCommentsForBlock,\n  };\n}\n","import type { Block, CustomBlock, TemplateContent } from \"@templatical/types\";\nimport { isCustomBlock } from \"@templatical/types\";\nimport type { UseBlockRegistryReturn } from \"../composables/useBlockRegistry\";\n\n/**\n * Renders every custom block in the content tree to its HTML representation\n * and stores the result on `block.renderedHtml`. Called before save so the\n * backend can include custom-block output in its MJML export.\n *\n * Failures per-block are swallowed (and replaced with a comment placeholder)\n * so one broken block doesn't block the save of the rest.\n */\nexport async function preRenderCustomBlocks(\n  content: TemplateContent,\n  registry: UseBlockRegistryReturn,\n): Promise<void> {\n  const renderBlock = async (block: Block): Promise<void> => {\n    if (isCustomBlock(block)) {\n      const customBlock = block as CustomBlock;\n      try {\n        customBlock.renderedHtml =\n          await registry.renderCustomBlock(customBlock);\n      } catch {\n        customBlock.renderedHtml = `<!-- Custom block render error: ${customBlock.customType} -->`;\n      }\n    }\n\n    if (block.type === \"section\" && \"children\" in block) {\n      const sectionBlock = block as { children: Block[][] };\n      for (const column of sectionBlock.children) {\n        for (const child of column) {\n          await renderBlock(child);\n        }\n      }\n    }\n  };\n\n  for (const block of content.blocks) {\n    await renderBlock(block);\n  }\n}\n","import {\n  resolveWebSocketConfig,\n  type UseExportReturn,\n  type UsePlanConfigReturn,\n  type UseWebSocketReturn,\n  type UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\nimport type { SaveResult, Template, TemplateContent } from \"@templatical/types\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport { preRenderCustomBlocks } from \"../../utils/preRenderCustomBlocks\";\n\nimport type { UseSnapshotPreviewReturn } from \"./useSnapshotPreview\";\nimport type { UseCloudFeatureFlagsReturn } from \"./useCloudFeatureFlags\";\nimport type { TemplaticalCloudEditorConfig } from \"../cloudConfig\";\n\nexport interface UseCloudLifecycleOptions {\n  config: TemplaticalCloudEditorConfig;\n  editor: CloudUseEditorReturn;\n  websocket: UseWebSocketReturn;\n  planConfigInstance: UsePlanConfigReturn;\n  snapshotPreview: UseSnapshotPreviewReturn;\n  core: UseEditorCoreReturn;\n  exporter: UseExportReturn;\n  featureFlags: UseCloudFeatureFlagsReturn;\n  isDestroyed: () => boolean;\n}\n\nexport interface UseCloudLifecycleReturn {\n  createTemplate: (content?: TemplateContent) => Promise<Template>;\n  loadTemplate: (templateId: string) => Promise<Template>;\n  saveTemplate: () => Promise<SaveResult>;\n}\n\n/**\n * Template-level operations on a cloud editor: create/load/save.\n * Each guards against post-unmount execution via `isDestroyed()`.\n */\nexport function useCloudLifecycle(\n  options: UseCloudLifecycleOptions,\n): UseCloudLifecycleReturn {\n  const {\n    config,\n    editor,\n    websocket,\n    planConfigInstance,\n    snapshotPreview,\n    core,\n    exporter,\n    featureFlags,\n    isDestroyed,\n  } = options;\n\n  function getWebSocketConfig() {\n    return resolveWebSocketConfig(planConfigInstance.config.value!.websocket);\n  }\n\n  async function createTemplate(content?: TemplateContent): Promise<Template> {\n    const template = await editor.create(content);\n    if (isDestroyed()) return template;\n    config.onCreate?.(template);\n    snapshotPreview.initSnapshotHistory();\n    websocket.connect(template.id, getWebSocketConfig());\n    return template;\n  }\n\n  async function loadTemplate(templateId: string): Promise<Template> {\n    const template = await editor.load(templateId);\n    if (isDestroyed()) return template;\n    config.onLoad?.(template);\n    snapshotPreview.initSnapshotHistory();\n    websocket.connect(template.id, getWebSocketConfig());\n    return template;\n  }\n\n  async function saveTemplate(): Promise<SaveResult> {\n    featureFlags.isSaveExporting.value = true;\n    featureFlags.saveStatus.value = \"idle\";\n    try {\n      // Pre-render custom blocks so backend can include them in MJML export.\n      await preRenderCustomBlocks(editor.content.value, core.registry);\n      if (isDestroyed()) throw new Error(\"Component unmounted during save\");\n\n      const template = await editor.save();\n      if (isDestroyed()) throw new Error(\"Component unmounted during save\");\n\n      snapshotPreview.initSnapshotHistory();\n      snapshotPreview.snapshotHistoryInstance.value?.loadSnapshots();\n\n      const exportResult = await exporter.exportHtml(template.id);\n      if (isDestroyed()) throw new Error(\"Component unmounted during save\");\n\n      const saveResult: SaveResult = {\n        templateId: template.id,\n        html: exportResult.html,\n        mjml: exportResult.mjml,\n        content: template.content,\n      };\n\n      config.onSave?.(saveResult);\n\n      featureFlags.saveStatus.value = \"saved\";\n      featureFlags.startSaveStatusClear();\n\n      return saveResult;\n    } catch (error) {\n      if (!isDestroyed()) {\n        featureFlags.saveStatus.value = \"error\";\n        featureFlags.saveErrorMessage.value =\n          error instanceof Error ? error.message : \"Save failed\";\n      }\n      throw error;\n    } finally {\n      if (!isDestroyed()) {\n        featureFlags.isSaveExporting.value = false;\n      }\n    }\n  }\n\n  return { createTemplate, loadTemplate, saveTemplate };\n}\n","import { computed, ref, type ComputedRef, type Ref } from \"vue\";\nimport type { PlanConfig } from \"@templatical/types\";\nimport type { A11yIssue } from \"../../composables/useAccessibilityLint\";\n\nexport interface UseCloudSaveGateOptions {\n  /** Reactive accessibility issues from `useAccessibilityLint`. */\n  issues: Ref<A11yIssue[]>;\n  /** Reactive plan config from the server. */\n  planConfig: Ref<PlanConfig | null>;\n}\n\nexport interface UseCloudSaveGateReturn {\n  /** True when the gate would block a save click given current state. */\n  shouldBlock: ComputedRef<boolean>;\n  /** Errors that would block the save. Empty when `shouldBlock` is false. */\n  blockingIssues: ComputedRef<A11yIssue[]>;\n  /** Modal visibility — toggled by `tryRunSave` and `cancel`. */\n  modalOpen: Ref<boolean>;\n  /**\n   * Wraps a save callback. Returns `true` when the save was invoked\n   * (blocking disabled or no errors), `false` when the modal opened\n   * instead. Caller can `await` the returned promise to know when the\n   * save settled.\n   */\n  tryRunSave: (run: () => Promise<unknown> | unknown) => Promise<boolean>;\n  /** Force-run the pending save, bypassing the gate. */\n  confirmAndSave: () => Promise<void>;\n  /** Dismiss the modal without saving. */\n  cancel: () => void;\n}\n\n/**\n * Cloud-only save-gate. When `planConfig.accessibility.blockOnError === true`\n * and the linter reports any error-severity issues, intercept the save\n * click and surface a confirmation modal listing the blockers. The user\n * can dismiss to fix issues, or click \"Save anyway\" to bypass — the gate\n * does NOT enforce a hard block, it surfaces a deliberate choice.\n *\n * Server policy is the source of truth for `blockOnError`; consumer-side\n * `accessibility` options can't override it.\n */\nexport function useCloudSaveGate(\n  opts: UseCloudSaveGateOptions,\n): UseCloudSaveGateReturn {\n  const modalOpen = ref(false);\n  let pending: (() => Promise<unknown> | unknown) | null = null;\n\n  const blockOnError = computed(\n    () => opts.planConfig.value?.accessibility?.blockOnError === true,\n  );\n\n  const blockingIssues = computed(() =>\n    blockOnError.value\n      ? opts.issues.value.filter((i) => i.severity === \"error\")\n      : [],\n  );\n\n  const shouldBlock = computed(() => blockingIssues.value.length > 0);\n\n  async function tryRunSave(\n    run: () => Promise<unknown> | unknown,\n  ): Promise<boolean> {\n    if (!shouldBlock.value) {\n      await run();\n      return true;\n    }\n    pending = run;\n    modalOpen.value = true;\n    return false;\n  }\n\n  async function confirmAndSave(): Promise<void> {\n    const run = pending;\n    pending = null;\n    modalOpen.value = false;\n    if (run) {\n      await run();\n    }\n  }\n\n  function cancel(): void {\n    pending = null;\n    modalOpen.value = false;\n  }\n\n  return {\n    shouldBlock,\n    blockingIssues,\n    modalOpen,\n    tryRunSave,\n    confirmAndSave,\n    cancel,\n  };\n}\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { A11yIssue } from \"../../composables/useAccessibilityLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: A11yIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-150\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-150\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80vh] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-white\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport { AlertTriangle } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport type { A11yIssue } from \"../../composables/useAccessibilityLint\";\n\ndefineProps<{\n  open: boolean;\n  issues: A11yIssue[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <Transition\n    enter-active-class=\"tpl:transition-opacity tpl:duration-150\"\n    leave-active-class=\"tpl:transition-opacity tpl:duration-150\"\n    enter-from-class=\"tpl:opacity-0\"\n    leave-to-class=\"tpl:opacity-0\"\n  >\n    <div\n      v-if=\"open\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      :aria-label=\"cloudT.saveGate.title\"\n      class=\"tpl:fixed tpl:inset-0 tpl:z-50 tpl:flex tpl:items-center tpl:justify-center tpl:bg-black/40 tpl:p-6\"\n      @click.self=\"emit('cancel')\"\n    >\n      <div\n        class=\"tpl:flex tpl:max-h-[80vh] tpl:w-full tpl:max-w-md tpl:flex-col tpl:gap-4 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)] tpl:p-5 tpl:shadow-[var(--tpl-shadow-md)]\"\n      >\n        <header class=\"tpl:flex tpl:items-center tpl:gap-2\">\n          <AlertTriangle\n            :size=\"18\"\n            :stroke-width=\"2\"\n            class=\"tpl:text-[var(--tpl-warning)]\"\n          />\n          <h2\n            class=\"tpl:m-0 tpl:text-base tpl:font-semibold tpl:text-[var(--tpl-text)]\"\n          >\n            {{ cloudT.saveGate.title }}\n          </h2>\n        </header>\n\n        <p class=\"tpl:m-0 tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n          {{ cloudT.saveGate.body }}\n        </p>\n\n        <ul\n          class=\"tpl:m-0 tpl:flex tpl:max-h-64 tpl:list-none tpl:flex-col tpl:gap-1.5 tpl:overflow-y-auto tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:p-2\"\n        >\n          <li\n            v-for=\"issue in issues\"\n            :key=\"`${issue.ruleId}-${issue.blockId ?? 'template'}`\"\n            class=\"tpl:flex tpl:flex-col tpl:gap-0.5 tpl:rounded tpl:px-2 tpl:py-1.5\"\n          >\n            <span class=\"tpl:text-xs tpl:text-[var(--tpl-text)]\">\n              {{ issue.message }}\n            </span>\n            <span\n              class=\"tpl:font-mono tpl:text-[10px] tpl:text-[var(--tpl-text-dim)]\"\n            >\n              {{ issue.ruleId }}\n            </span>\n          </li>\n        </ul>\n\n        <footer class=\"tpl:flex tpl:justify-end tpl:gap-2\">\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)]\"\n            @click=\"emit('cancel')\"\n          >\n            {{ cloudT.saveGate.cancel }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tpl:rounded-md tpl:bg-[var(--tpl-danger)] tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:text-white\"\n            @click=\"emit('confirm')\"\n          >\n            {{ cloudT.saveGate.confirm }}\n          </button>\n        </footer>\n      </div>\n    </div>\n  </Transition>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  Check,\n  CircleAlert,\n  LoaderCircle,\n  MessageCircle,\n  Save,\n  Send,\n  Sparkles,\n} from \"@lucide/vue\";\nimport { defineAsyncComponent } from \"vue\";\nimport type {\n  UseCommentsReturn,\n  UseTestEmailReturn,\n  UseWebSocketReturn,\n  UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport { headerBtnClass } from \"../../constants/styleConstants\";\nimport ViewportToggle from \"../../components/ViewportToggle.vue\";\nimport PreviewToggle from \"../../components/PreviewToggle.vue\";\nimport DarkModeToggle from \"../../components/DarkModeToggle.vue\";\nimport type { UseCloudFeatureFlagsReturn } from \"../composables/useCloudFeatureFlags\";\nimport type { UseCloudPanelStateReturn } from \"../composables/useCloudPanelState\";\nimport type { UseSnapshotPreviewReturn } from \"../composables/useSnapshotPreview\";\nimport type { UseCloudInitializationReturn } from \"../composables/useCloudInitialization\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst SnapshotHistory = defineAsyncComponent(\n  () => import(\"./SnapshotHistory.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\ndefineProps<{\n  editor: CloudUseEditorReturn;\n  core: UseEditorCoreReturn;\n  featureFlags: UseCloudFeatureFlagsReturn;\n  panelState: UseCloudPanelStateReturn;\n  snapshotPreview: UseSnapshotPreviewReturn;\n  commentsInstance: UseCommentsReturn;\n  testEmail: UseTestEmailReturn;\n  websocket: UseWebSocketReturn;\n  collaboration: UseCloudInitializationReturn[\"collaboration\"];\n  isCollaborationEnabled: boolean;\n  isSaveDisabled: boolean;\n  isSaving: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"save\"): void;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <header\n    class=\"tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4\"\n    style=\"\n      background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      box-shadow: var(--tpl-shadow-md);\n      border-bottom: 1px solid var(--tpl-border);\n    \"\n  >\n    <!-- Left: Logo + template count -->\n    <div\n      class=\"tpl-header-left tpl:flex tpl:min-w-[200px] tpl:items-center tpl:gap-3\"\n    >\n      <span\n        v-if=\"featureFlags.templateLimit.value !== null\"\n        class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{\n          cloudFormat(cloudT.header.templatesUsed, {\n            used: featureFlags.templateCount.value,\n            max: featureFlags.templateLimit.value,\n          })\n        }}\n      </span>\n    </div>\n\n    <!-- Center: viewport + preview + dark mode + collaboration + snapshots -->\n    <div\n      class=\"tpl-header-center tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\"\n    >\n      <ViewportToggle\n        :viewport=\"editor.state.viewport\"\n        @change=\"editor.setViewport\"\n      />\n      <DarkModeToggle\n        :dark-mode=\"editor.state.darkMode\"\n        @change=\"editor.setDarkMode\"\n      />\n      <PreviewToggle\n        :preview-mode=\"editor.state.previewMode\"\n        @change=\"editor.setPreviewMode\"\n      />\n      <CollaboratorBar\n        v-if=\"collaboration && isCollaborationEnabled\"\n        :collaborators=\"collaboration.collaborators.value\"\n        :is-connected=\"websocket.isConnected.value\"\n      />\n      <SnapshotHistory\n        v-if=\"snapshotPreview.snapshotHistoryInstance.value\"\n        :snapshots=\"snapshotPreview.snapshotHistorySnapshots.value\"\n        :is-loading=\"snapshotPreview.snapshotHistoryIsLoading.value\"\n        :is-restoring=\"snapshotPreview.snapshotHistoryIsRestoring.value\"\n        @load=\"snapshotPreview.loadSnapshotHistory\"\n        @navigate=\"snapshotPreview.handleSnapshotNavigate\"\n      />\n    </div>\n\n    <!-- Right: Cloud actions -->\n    <div\n      class=\"tpl-header-right tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n    >\n      <!-- Save status indicator -->\n      <div\n        v-if=\"featureFlags.saveStatus.value === 'error'\"\n        aria-live=\"assertive\"\n        class=\"tpl-tooltip tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n        :data-tooltip=\"featureFlags.saveErrorMessage.value\"\n      >\n        <CircleAlert :size=\"12\" :stroke-width=\"2.5\" />\n        {{ cloudT.header.saveFailed }}\n      </div>\n      <div\n        v-else-if=\"featureFlags.saveStatus.value === 'saved'\"\n        aria-live=\"polite\"\n        class=\"tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success)]\"\n      >\n        <Check :size=\"12\" :stroke-width=\"2.5\" />\n        {{ cloudT.header.saved }}\n      </div>\n      <div\n        v-else-if=\"editor.state.isDirty\"\n        aria-live=\"polite\"\n        class=\"tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n      >\n        <span\n          class=\"tpl-pulse tpl:size-1.5 tpl:rounded-full tpl:bg-[var(--tpl-primary)]\"\n        ></span>\n        {{ cloudT.header.unsaved }}\n      </div>\n\n      <!-- Comments button -->\n      <button\n        v-if=\"\n          commentsInstance.isEnabled.value &&\n          featureFlags.hasTemplateSaved.value\n        \"\n        :aria-label=\"\n          commentsInstance.unresolvedCount.value > 0\n            ? `${cloudT.comments.button} (${commentsInstance.unresolvedCount.value})`\n            : cloudT.comments.button\n        \"\n        :aria-expanded=\"panelState.commentsOpen.value\"\n        :class=\"headerBtnClass\"\n        :style=\"{\n          backgroundColor: panelState.commentsOpen.value\n            ? 'var(--tpl-primary)'\n            : 'transparent',\n          color: panelState.commentsOpen.value\n            ? 'var(--tpl-bg)'\n            : 'var(--tpl-primary)',\n          borderColor: 'var(--tpl-primary)',\n        }\"\n        @click=\"panelState.commentsOpen.value = !panelState.commentsOpen.value\"\n      >\n        <MessageCircle :size=\"16\" :stroke-width=\"2\" />\n        {{ cloudT.comments.button }}\n        <span\n          v-if=\"\n            commentsInstance.unresolvedCount.value > 0 &&\n            !panelState.commentsOpen.value\n          \"\n          class=\"tpl:inline-flex tpl:size-4.5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n        >\n          {{ commentsInstance.unresolvedCount.value }}\n        </span>\n      </button>\n\n      <!-- AI button + menu -->\n      <div\n        v-if=\"\n          featureFlags.canUseAiGeneration.value &&\n          featureFlags.hasTemplateSaved.value\n        \"\n        :ref=\"(el) => (panelState.aiMenuRef.value = el as HTMLElement | null)\"\n        class=\"tpl:relative\"\n      >\n        <button\n          :aria-expanded=\"panelState.aiMenuOpen.value\"\n          class=\"tpl-ai-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-4 tpl:py-2 tpl:text-sm tpl:font-semibold tpl:whitespace-nowrap tpl:transition-all tpl:duration-200\"\n          :class=\"\n            panelState.aiButtonActive.value\n              ? 'tpl-ai-btn--active'\n              : 'tpl-ai-btn--idle'\n          \"\n          @click.stop=\"panelState.toggleAiMenu\"\n        >\n          <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n          {{ cloudT.aiChat.button }}\n        </button>\n        <Transition\n          enter-active-class=\"tpl:transition-all tpl:duration-150 tpl:ease-out\"\n          enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n          enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n          leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n          leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n          leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n        >\n          <div\n            v-if=\"panelState.aiMenuOpen.value\"\n            class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n          >\n            <AiFeatureMenu\n              :active-feature=\"panelState.activeAiFeature.value\"\n              @select=\"panelState.handleAiFeatureSelect\"\n            />\n          </div>\n        </Transition>\n      </div>\n\n      <!-- Test email button -->\n      <button\n        v-if=\"testEmail.isEnabled.value && featureFlags.canSendTestEmail.value\"\n        :class=\"headerBtnClass\"\n        style=\"\n          background-color: transparent;\n          color: var(--tpl-primary);\n          border-color: var(--tpl-primary);\n        \"\n        :disabled=\"\n          testEmail.isSending.value || !featureFlags.hasTemplateSaved.value\n        \"\n        @click=\"panelState.testEmailModalOpen.value = true\"\n      >\n        <Send v-if=\"!testEmail.isSending.value\" :size=\"16\" :stroke-width=\"2\" />\n        <LoaderCircle v-else class=\"tpl-spinner\" :size=\"16\" :stroke-width=\"2\" />\n        {{ cloudT.testEmail.button }}\n      </button>\n\n      <!-- Save button -->\n      <button\n        :class=\"headerBtnClass\"\n        style=\"\n          background-color: transparent;\n          color: var(--tpl-primary);\n          border-color: var(--tpl-primary);\n        \"\n        :disabled=\"isSaveDisabled\"\n        @click=\"$emit('save')\"\n      >\n        <Save v-if=\"!isSaving\" :size=\"16\" :stroke-width=\"2\" />\n        <LoaderCircle v-else class=\"tpl-spinner\" :size=\"16\" :stroke-width=\"2\" />\n        {{ isSaving ? cloudT.header.saving : cloudT.header.save }}\n      </button>\n    </div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  Check,\n  CircleAlert,\n  LoaderCircle,\n  MessageCircle,\n  Save,\n  Send,\n  Sparkles,\n} from \"@lucide/vue\";\nimport { defineAsyncComponent } from \"vue\";\nimport type {\n  UseCommentsReturn,\n  UseTestEmailReturn,\n  UseWebSocketReturn,\n  UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\nimport { headerBtnClass } from \"../../constants/styleConstants\";\nimport ViewportToggle from \"../../components/ViewportToggle.vue\";\nimport PreviewToggle from \"../../components/PreviewToggle.vue\";\nimport DarkModeToggle from \"../../components/DarkModeToggle.vue\";\nimport type { UseCloudFeatureFlagsReturn } from \"../composables/useCloudFeatureFlags\";\nimport type { UseCloudPanelStateReturn } from \"../composables/useCloudPanelState\";\nimport type { UseSnapshotPreviewReturn } from \"../composables/useSnapshotPreview\";\nimport type { UseCloudInitializationReturn } from \"../composables/useCloudInitialization\";\n\nconst CollaboratorBar = defineAsyncComponent(\n  () => import(\"./CollaboratorBar.vue\"),\n);\nconst SnapshotHistory = defineAsyncComponent(\n  () => import(\"./SnapshotHistory.vue\"),\n);\nconst AiFeatureMenu = defineAsyncComponent(() => import(\"./AiFeatureMenu.vue\"));\n\ndefineProps<{\n  editor: CloudUseEditorReturn;\n  core: UseEditorCoreReturn;\n  featureFlags: UseCloudFeatureFlagsReturn;\n  panelState: UseCloudPanelStateReturn;\n  snapshotPreview: UseSnapshotPreviewReturn;\n  commentsInstance: UseCommentsReturn;\n  testEmail: UseTestEmailReturn;\n  websocket: UseWebSocketReturn;\n  collaboration: UseCloudInitializationReturn[\"collaboration\"];\n  isCollaborationEnabled: boolean;\n  isSaveDisabled: boolean;\n  isSaving: boolean;\n}>();\n\ndefineEmits<{\n  (e: \"save\"): void;\n}>();\n\nconst { t: cloudT, format: cloudFormat } = useCloudI18nStrict();\n</script>\n\n<template>\n  <header\n    class=\"tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4\"\n    style=\"\n      background-color: color-mix(in srgb, var(--tpl-bg) 80%, transparent);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      box-shadow: var(--tpl-shadow-md);\n      border-bottom: 1px solid var(--tpl-border);\n    \"\n  >\n    <!-- Left: Logo + template count -->\n    <div\n      class=\"tpl-header-left tpl:flex tpl:min-w-[200px] tpl:items-center tpl:gap-3\"\n    >\n      <span\n        v-if=\"featureFlags.templateLimit.value !== null\"\n        class=\"tpl:text-xs tpl:opacity-60 tpl:text-[var(--tpl-text-muted)]\"\n      >\n        {{\n          cloudFormat(cloudT.header.templatesUsed, {\n            used: featureFlags.templateCount.value,\n            max: featureFlags.templateLimit.value,\n          })\n        }}\n      </span>\n    </div>\n\n    <!-- Center: viewport + preview + dark mode + collaboration + snapshots -->\n    <div\n      class=\"tpl-header-center tpl:flex tpl:items-center tpl:justify-center tpl:gap-10\"\n    >\n      <ViewportToggle\n        :viewport=\"editor.state.viewport\"\n        @change=\"editor.setViewport\"\n      />\n      <DarkModeToggle\n        :dark-mode=\"editor.state.darkMode\"\n        @change=\"editor.setDarkMode\"\n      />\n      <PreviewToggle\n        :preview-mode=\"editor.state.previewMode\"\n        @change=\"editor.setPreviewMode\"\n      />\n      <CollaboratorBar\n        v-if=\"collaboration && isCollaborationEnabled\"\n        :collaborators=\"collaboration.collaborators.value\"\n        :is-connected=\"websocket.isConnected.value\"\n      />\n      <SnapshotHistory\n        v-if=\"snapshotPreview.snapshotHistoryInstance.value\"\n        :snapshots=\"snapshotPreview.snapshotHistorySnapshots.value\"\n        :is-loading=\"snapshotPreview.snapshotHistoryIsLoading.value\"\n        :is-restoring=\"snapshotPreview.snapshotHistoryIsRestoring.value\"\n        @load=\"snapshotPreview.loadSnapshotHistory\"\n        @navigate=\"snapshotPreview.handleSnapshotNavigate\"\n      />\n    </div>\n\n    <!-- Right: Cloud actions -->\n    <div\n      class=\"tpl-header-right tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3\"\n    >\n      <!-- Save status indicator -->\n      <div\n        v-if=\"featureFlags.saveStatus.value === 'error'\"\n        aria-live=\"assertive\"\n        class=\"tpl-tooltip tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-danger)]\"\n        :data-tooltip=\"featureFlags.saveErrorMessage.value\"\n      >\n        <CircleAlert :size=\"12\" :stroke-width=\"2.5\" />\n        {{ cloudT.header.saveFailed }}\n      </div>\n      <div\n        v-else-if=\"featureFlags.saveStatus.value === 'saved'\"\n        aria-live=\"polite\"\n        class=\"tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-success)]\"\n      >\n        <Check :size=\"12\" :stroke-width=\"2.5\" />\n        {{ cloudT.header.saved }}\n      </div>\n      <div\n        v-else-if=\"editor.state.isDirty\"\n        aria-live=\"polite\"\n        class=\"tpl-status tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-xs tpl:text-[var(--tpl-text-muted)]\"\n      >\n        <span\n          class=\"tpl-pulse tpl:size-1.5 tpl:rounded-full tpl:bg-[var(--tpl-primary)]\"\n        ></span>\n        {{ cloudT.header.unsaved }}\n      </div>\n\n      <!-- Comments button -->\n      <button\n        v-if=\"\n          commentsInstance.isEnabled.value &&\n          featureFlags.hasTemplateSaved.value\n        \"\n        :aria-label=\"\n          commentsInstance.unresolvedCount.value > 0\n            ? `${cloudT.comments.button} (${commentsInstance.unresolvedCount.value})`\n            : cloudT.comments.button\n        \"\n        :aria-expanded=\"panelState.commentsOpen.value\"\n        :class=\"headerBtnClass\"\n        :style=\"{\n          backgroundColor: panelState.commentsOpen.value\n            ? 'var(--tpl-primary)'\n            : 'transparent',\n          color: panelState.commentsOpen.value\n            ? 'var(--tpl-bg)'\n            : 'var(--tpl-primary)',\n          borderColor: 'var(--tpl-primary)',\n        }\"\n        @click=\"panelState.commentsOpen.value = !panelState.commentsOpen.value\"\n      >\n        <MessageCircle :size=\"16\" :stroke-width=\"2\" />\n        {{ cloudT.comments.button }}\n        <span\n          v-if=\"\n            commentsInstance.unresolvedCount.value > 0 &&\n            !panelState.commentsOpen.value\n          \"\n          class=\"tpl:inline-flex tpl:size-4.5 tpl:items-center tpl:justify-center tpl:rounded-full tpl:text-[10px] tpl:font-semibold tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n        >\n          {{ commentsInstance.unresolvedCount.value }}\n        </span>\n      </button>\n\n      <!-- AI button + menu -->\n      <div\n        v-if=\"\n          featureFlags.canUseAiGeneration.value &&\n          featureFlags.hasTemplateSaved.value\n        \"\n        :ref=\"(el) => (panelState.aiMenuRef.value = el as HTMLElement | null)\"\n        class=\"tpl:relative\"\n      >\n        <button\n          :aria-expanded=\"panelState.aiMenuOpen.value\"\n          class=\"tpl-ai-btn tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-[var(--tpl-radius-sm)] tpl:border-none tpl:px-4 tpl:py-2 tpl:text-sm tpl:font-semibold tpl:whitespace-nowrap tpl:transition-all tpl:duration-200\"\n          :class=\"\n            panelState.aiButtonActive.value\n              ? 'tpl-ai-btn--active'\n              : 'tpl-ai-btn--idle'\n          \"\n          @click.stop=\"panelState.toggleAiMenu\"\n        >\n          <Sparkles :size=\"16\" :stroke-width=\"2\" class=\"tpl-ai-btn-icon\" />\n          {{ cloudT.aiChat.button }}\n        </button>\n        <Transition\n          enter-active-class=\"tpl:transition-all tpl:duration-150 tpl:ease-out\"\n          enter-from-class=\"tpl:scale-95 tpl:opacity-0\"\n          enter-to-class=\"tpl:scale-100 tpl:opacity-100\"\n          leave-active-class=\"tpl:transition-all tpl:duration-100 tpl:ease-in\"\n          leave-from-class=\"tpl:scale-100 tpl:opacity-100\"\n          leave-to-class=\"tpl:scale-95 tpl:opacity-0\"\n        >\n          <div\n            v-if=\"panelState.aiMenuOpen.value\"\n            class=\"tpl:absolute tpl:right-0 tpl:top-full tpl:z-50 tpl:mt-1 tpl:origin-top-right\"\n          >\n            <AiFeatureMenu\n              :active-feature=\"panelState.activeAiFeature.value\"\n              @select=\"panelState.handleAiFeatureSelect\"\n            />\n          </div>\n        </Transition>\n      </div>\n\n      <!-- Test email button -->\n      <button\n        v-if=\"testEmail.isEnabled.value && featureFlags.canSendTestEmail.value\"\n        :class=\"headerBtnClass\"\n        style=\"\n          background-color: transparent;\n          color: var(--tpl-primary);\n          border-color: var(--tpl-primary);\n        \"\n        :disabled=\"\n          testEmail.isSending.value || !featureFlags.hasTemplateSaved.value\n        \"\n        @click=\"panelState.testEmailModalOpen.value = true\"\n      >\n        <Send v-if=\"!testEmail.isSending.value\" :size=\"16\" :stroke-width=\"2\" />\n        <LoaderCircle v-else class=\"tpl-spinner\" :size=\"16\" :stroke-width=\"2\" />\n        {{ cloudT.testEmail.button }}\n      </button>\n\n      <!-- Save button -->\n      <button\n        :class=\"headerBtnClass\"\n        style=\"\n          background-color: transparent;\n          color: var(--tpl-primary);\n          border-color: var(--tpl-primary);\n        \"\n        :disabled=\"isSaveDisabled\"\n        @click=\"$emit('save')\"\n      >\n        <Save v-if=\"!isSaving\" :size=\"16\" :stroke-width=\"2\" />\n        <LoaderCircle v-else class=\"tpl-spinner\" :size=\"16\" :stroke-width=\"2\" />\n        {{ isSaving ? cloudT.header.saving : cloudT.header.save }}\n      </button>\n    </div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent, ref } from \"vue\";\nimport type { Block, TemplateContent } from \"@templatical/types\";\nimport type {\n  UsePlanConfigReturn,\n  UseTestEmailReturn,\n  UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { UseCloudPanelStateReturn } from \"../composables/useCloudPanelState\";\nimport type { UseCloudMediaLibraryReturn } from \"../composables/useCloudMediaLibrary\";\nimport type { UseCloudInitializationReturn } from \"../composables/useCloudInitialization\";\nimport type { TemplaticalCloudEditorConfig } from \"../cloudConfig\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\nconst TestEmailModal = defineAsyncComponent(\n  () => import(\"./TestEmailModal.vue\"),\n);\nconst SaveModuleDialog = defineAsyncComponent(\n  () => import(\"./SaveModuleDialog.vue\"),\n);\nconst ModuleBrowserModal = defineAsyncComponent(\n  () => import(\"./ModuleBrowserModal.vue\"),\n);\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\ndefineProps<{\n  config: TemplaticalCloudEditorConfig;\n  editor: CloudUseEditorReturn;\n  core: UseEditorCoreReturn;\n  panelState: UseCloudPanelStateReturn;\n  planConfigInstance: UsePlanConfigReturn;\n  testEmail: UseTestEmailReturn;\n  mediaLib: UseCloudMediaLibraryReturn;\n  savedModulesHeadless: UseCloudInitializationReturn[\"savedModulesHeadless\"];\n  showSaveModuleDialog: boolean;\n  saveModulePreSelectedBlockId: string | null;\n  showModuleBrowserModal: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:showSaveModuleDialog\", value: boolean): void;\n  (e: \"update:saveModulePreSelectedBlockId\", value: string | null): void;\n  (e: \"update:showModuleBrowserModal\", value: boolean): void;\n  (e: \"send-test-email\", recipient: string): void;\n  (\n    e: \"module-insert\",\n    module: { content: Block[] },\n    insertIndex: number | undefined,\n  ): void;\n}>();\n\nfunction applyContent(\n  content: TemplateContent,\n  core: UseEditorCoreReturn,\n  editor: CloudUseEditorReturn,\n): void {\n  core.history.record();\n  editor.setContent(content);\n  core.conditionPreview.reset();\n}\n\nfunction handleModuleInsert(\n  mod: { content: Block[] },\n  idx: number | undefined,\n): void {\n  emit(\"module-insert\", mod, idx);\n}\n\ninterface CommentsSidebarInstance {\n  filterByBlock: (blockId: string) => void;\n}\n\nconst commentsSidebar = ref<CommentsSidebarInstance | null>(null);\n\n/** Delegates to the CommentsSidebar's filterByBlock method once it's mounted. */\nfunction filterCommentsByBlock(blockId: string): void {\n  commentsSidebar.value?.filterByBlock(blockId);\n}\n\ndefineExpose({ filterCommentsByBlock });\n</script>\n\n<template>\n  <AiChatSidebar\n    :visible=\"panelState.aiChatOpen.value\"\n    :on-apply=\"(c: TemplateContent) => applyContent(c, core, editor)\"\n    @close=\"panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"panelState.scoringPanelOpen.value\"\n    @close=\"panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"panelState.designReferenceOpen.value = false\"\n    @apply=\"(c: TemplateContent) => applyContent(c, core, editor)\"\n  />\n\n  <CommentsSidebar\n    ref=\"commentsSidebar\"\n    :visible=\"panelState.commentsOpen.value\"\n    @close=\"panelState.commentsOpen.value = false\"\n  />\n\n  <TestEmailModal\n    :visible=\"panelState.testEmailModalOpen.value\"\n    :allowed-emails=\"testEmail.allowedEmails.value\"\n    :is-sending=\"testEmail.isSending.value\"\n    :error=\"testEmail.error.value\"\n    @send=\"(recipient: string) => emit('send-test-email', recipient)\"\n    @close=\"panelState.testEmailModalOpen.value = false\"\n  />\n\n  <SaveModuleDialog\n    v-if=\"\n      planConfigInstance.hasFeature('saved_modules') && config.modules !== false\n    \"\n    :visible=\"showSaveModuleDialog\"\n    :pre-selected-block-id=\"saveModulePreSelectedBlockId\"\n    @close=\"\n      emit('update:showSaveModuleDialog', false);\n      emit('update:saveModulePreSelectedBlockId', null);\n    \"\n    @saved=\"savedModulesHeadless.loadModules()\"\n  />\n\n  <ModuleBrowserModal\n    v-if=\"\n      planConfigInstance.hasFeature('saved_modules') && config.modules !== false\n    \"\n    :visible=\"showModuleBrowserModal\"\n    @close=\"emit('update:showModuleBrowserModal', false)\"\n    @insert=\"handleModuleInsert\"\n  />\n\n  <MediaLibraryModal\n    :visible=\"panelState.mediaLibraryOpen.value\"\n    :accept=\"panelState.mediaLibraryAccept.value\"\n    @select=\"mediaLib.handleMediaSelect\"\n    @close=\"mediaLib.handleMediaLibraryClose\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { defineAsyncComponent, ref } from \"vue\";\nimport type { Block, TemplateContent } from \"@templatical/types\";\nimport type {\n  UsePlanConfigReturn,\n  UseTestEmailReturn,\n  UseEditorReturn as CloudUseEditorReturn,\n} from \"@templatical/core/cloud\";\n\nimport type { UseEditorCoreReturn } from \"../../composables/useEditorCore\";\nimport type { UseCloudPanelStateReturn } from \"../composables/useCloudPanelState\";\nimport type { UseCloudMediaLibraryReturn } from \"../composables/useCloudMediaLibrary\";\nimport type { UseCloudInitializationReturn } from \"../composables/useCloudInitialization\";\nimport type { TemplaticalCloudEditorConfig } from \"../cloudConfig\";\n\nconst AiChatSidebar = defineAsyncComponent(() => import(\"./AiChatSidebar.vue\"));\nconst CommentsSidebar = defineAsyncComponent(\n  () => import(\"./CommentsSidebar.vue\"),\n);\nconst DesignReferenceSidebar = defineAsyncComponent(\n  () => import(\"./DesignReferenceSidebar.vue\"),\n);\nconst TemplateScoringPanel = defineAsyncComponent(\n  () => import(\"./TemplateScoringPanel.vue\"),\n);\nconst TestEmailModal = defineAsyncComponent(\n  () => import(\"./TestEmailModal.vue\"),\n);\nconst SaveModuleDialog = defineAsyncComponent(\n  () => import(\"./SaveModuleDialog.vue\"),\n);\nconst ModuleBrowserModal = defineAsyncComponent(\n  () => import(\"./ModuleBrowserModal.vue\"),\n);\nconst MediaLibraryModal = defineAsyncComponent(async () => {\n  const m = await import(\"@templatical/media-library\");\n  return m.MediaLibraryModal;\n});\n\ndefineProps<{\n  config: TemplaticalCloudEditorConfig;\n  editor: CloudUseEditorReturn;\n  core: UseEditorCoreReturn;\n  panelState: UseCloudPanelStateReturn;\n  planConfigInstance: UsePlanConfigReturn;\n  testEmail: UseTestEmailReturn;\n  mediaLib: UseCloudMediaLibraryReturn;\n  savedModulesHeadless: UseCloudInitializationReturn[\"savedModulesHeadless\"];\n  showSaveModuleDialog: boolean;\n  saveModulePreSelectedBlockId: string | null;\n  showModuleBrowserModal: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"update:showSaveModuleDialog\", value: boolean): void;\n  (e: \"update:saveModulePreSelectedBlockId\", value: string | null): void;\n  (e: \"update:showModuleBrowserModal\", value: boolean): void;\n  (e: \"send-test-email\", recipient: string): void;\n  (\n    e: \"module-insert\",\n    module: { content: Block[] },\n    insertIndex: number | undefined,\n  ): void;\n}>();\n\nfunction applyContent(\n  content: TemplateContent,\n  core: UseEditorCoreReturn,\n  editor: CloudUseEditorReturn,\n): void {\n  core.history.record();\n  editor.setContent(content);\n  core.conditionPreview.reset();\n}\n\nfunction handleModuleInsert(\n  mod: { content: Block[] },\n  idx: number | undefined,\n): void {\n  emit(\"module-insert\", mod, idx);\n}\n\ninterface CommentsSidebarInstance {\n  filterByBlock: (blockId: string) => void;\n}\n\nconst commentsSidebar = ref<CommentsSidebarInstance | null>(null);\n\n/** Delegates to the CommentsSidebar's filterByBlock method once it's mounted. */\nfunction filterCommentsByBlock(blockId: string): void {\n  commentsSidebar.value?.filterByBlock(blockId);\n}\n\ndefineExpose({ filterCommentsByBlock });\n</script>\n\n<template>\n  <AiChatSidebar\n    :visible=\"panelState.aiChatOpen.value\"\n    :on-apply=\"(c: TemplateContent) => applyContent(c, core, editor)\"\n    @close=\"panelState.aiChatOpen.value = false\"\n  />\n\n  <TemplateScoringPanel\n    :visible=\"panelState.scoringPanelOpen.value\"\n    @close=\"panelState.scoringPanelOpen.value = false\"\n  />\n\n  <DesignReferenceSidebar\n    :visible=\"panelState.designReferenceOpen.value\"\n    :has-existing-blocks=\"editor.content.value.blocks.length > 0\"\n    @close=\"panelState.designReferenceOpen.value = false\"\n    @apply=\"(c: TemplateContent) => applyContent(c, core, editor)\"\n  />\n\n  <CommentsSidebar\n    ref=\"commentsSidebar\"\n    :visible=\"panelState.commentsOpen.value\"\n    @close=\"panelState.commentsOpen.value = false\"\n  />\n\n  <TestEmailModal\n    :visible=\"panelState.testEmailModalOpen.value\"\n    :allowed-emails=\"testEmail.allowedEmails.value\"\n    :is-sending=\"testEmail.isSending.value\"\n    :error=\"testEmail.error.value\"\n    @send=\"(recipient: string) => emit('send-test-email', recipient)\"\n    @close=\"panelState.testEmailModalOpen.value = false\"\n  />\n\n  <SaveModuleDialog\n    v-if=\"\n      planConfigInstance.hasFeature('saved_modules') && config.modules !== false\n    \"\n    :visible=\"showSaveModuleDialog\"\n    :pre-selected-block-id=\"saveModulePreSelectedBlockId\"\n    @close=\"\n      emit('update:showSaveModuleDialog', false);\n      emit('update:saveModulePreSelectedBlockId', null);\n    \"\n    @saved=\"savedModulesHeadless.loadModules()\"\n  />\n\n  <ModuleBrowserModal\n    v-if=\"\n      planConfigInstance.hasFeature('saved_modules') && config.modules !== false\n    \"\n    :visible=\"showModuleBrowserModal\"\n    @close=\"emit('update:showModuleBrowserModal', false)\"\n    @insert=\"handleModuleInsert\"\n  />\n\n  <MediaLibraryModal\n    :visible=\"panelState.mediaLibraryOpen.value\"\n    :accept=\"panelState.mediaLibraryAccept.value\"\n    @select=\"mediaLib.handleMediaSelect\"\n    @close=\"mediaLib.handleMediaLibraryClose\"\n  />\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{\n  visible: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-loading tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:bg-[var(--tpl-bg)]\"\n  >\n    <!-- Skeleton header -->\n    <div\n      class=\"tpl:flex tpl:h-14 tpl:shrink-0 tpl:items-center tpl:justify-between tpl:px-4 tpl:border-b tpl:border-[var(--tpl-border)]\"\n    >\n      <div\n        class=\"tpl-shimmer tpl:h-5 tpl:w-28 tpl:rounded-[var(--tpl-radius-sm)]\"\n      ></div>\n      <div class=\"tpl:flex tpl:gap-3\">\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:w-20 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n    </div>\n    <!-- Skeleton body -->\n    <div class=\"tpl:flex tpl:flex-1 tpl:overflow-hidden\">\n      <!-- Left sidebar rail -->\n      <div\n        class=\"tpl:flex tpl:w-12 tpl:shrink-0 tpl:flex-col tpl:items-center tpl:gap-4 tpl:py-5 tpl:border-r tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          v-for=\"n in 5\"\n          :key=\"n\"\n          class=\"tpl-shimmer tpl:size-7 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n      </div>\n      <!-- Canvas area -->\n      <div\n        class=\"tpl:flex tpl:flex-1 tpl:items-start tpl:justify-center tpl:overflow-auto tpl:p-8 tpl:bg-[var(--tpl-canvas-bg)]\"\n      >\n        <div\n          class=\"tpl:w-full tpl:max-w-[600px] tpl:rounded-[var(--tpl-radius)] tpl:p-6 tpl:bg-[var(--tpl-bg)] tpl:shadow-[var(--tpl-shadow-sm)]\"\n        >\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-3/4 tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-5/6 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-44 tpl:w-full tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-full tpl:rounded\"></div>\n            <div class=\"tpl-shimmer tpl:h-3 tpl:w-2/3 tpl:rounded\"></div>\n          </div>\n          <div class=\"tpl:flex tpl:justify-center tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:h-10 tpl:w-36 tpl:rounded-[var(--tpl-radius-sm)]\"\n            ></div>\n          </div>\n          <div class=\"tpl:space-y-2 tpl:py-4\">\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/2 tpl:rounded\"\n            ></div>\n            <div\n              class=\"tpl-shimmer tpl:mx-auto tpl:h-2.5 tpl:w-1/3 tpl:rounded\"\n            ></div>\n          </div>\n        </div>\n      </div>\n      <!-- Right panel -->\n      <div\n        class=\"tpl:flex tpl:w-[320px] tpl:shrink-0 tpl:flex-col tpl:gap-4 tpl:p-4 tpl:border-l tpl:border-[var(--tpl-border)]\"\n      >\n        <div\n          class=\"tpl-shimmer tpl:h-8 tpl:rounded-[var(--tpl-radius-sm)]\"\n        ></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n        <div class=\"tpl-shimmer tpl:h-32 tpl:rounded-[var(--tpl-radius)]\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { CircleAlert } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  error: Error | null;\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"retry\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nfunction getErrorMessage(error: Error): string {\n  if (\n    \"isUnauthorized\" in error &&\n    (error as { isUnauthorized: boolean }).isUnauthorized\n  ) {\n    return cloudT.error.authFailed;\n  }\n  if (\"isNotFound\" in error && (error as { isNotFound: boolean }).isNotFound) {\n    return cloudT.error.templateNotFound;\n  }\n  return cloudT.error.defaultMessage;\n}\n\nfunction isNotFoundError(error: Error): boolean {\n  return (\n    \"isNotFound\" in error && !!(error as { isNotFound: boolean }).isNotFound\n  );\n}\n</script>\n\n<template>\n  <div\n    v-if=\"visible && error\"\n    role=\"alert\"\n    class=\"tpl-error tpl:absolute tpl:inset-0 tpl:z-overlay tpl:flex tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-6 tpl:px-8 tpl:bg-[var(--tpl-bg)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:size-16 tpl:items-center tpl:justify-center tpl:rounded-full tpl:bg-[var(--tpl-danger-light)]\"\n    >\n      <CircleAlert\n        :size=\"32\"\n        :stroke-width=\"1.5\"\n        class=\"tpl:text-[var(--tpl-danger)]\"\n      />\n    </div>\n    <div\n      class=\"tpl:flex tpl:flex-col tpl:items-center tpl:gap-2 tpl:text-center\"\n    >\n      <h2 class=\"tpl:text-lg tpl:font-semibold tpl:text-[var(--tpl-text)]\">\n        {{ cloudT.error.title }}\n      </h2>\n      <p class=\"tpl:max-w-md tpl:text-sm tpl:text-[var(--tpl-text-muted)]\">\n        {{ getErrorMessage(error) }}\n      </p>\n    </div>\n    <button\n      v-if=\"!isNotFoundError(error)\"\n      class=\"tpl-btn tpl-btn-primary tpl:inline-flex tpl:items-center tpl:gap-2 tpl:rounded-md tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:font-medium tpl:shadow-xs tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n      @click=\"emit('retry')\"\n    >\n      {{ cloudT.error.retry }}\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Clock } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-preview-banner tpl:absolute tpl:top-14 tpl:right-0 tpl:left-0 tpl:z-40 tpl:flex tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-4 tpl:py-3 tpl:bg-[var(--tpl-primary-light)] tpl:border-b tpl:border-[var(--tpl-primary)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:text-[var(--tpl-text)]\"\n    >\n      <Clock\n        :size=\"18\"\n        :stroke-width=\"2\"\n        class=\"tpl:text-[var(--tpl-primary)]\"\n      />\n      <span>{{ cloudT.snapshotPreview.message }}</span>\n    </div>\n    <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <button\n        class=\"tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n        style=\"background-color: transparent\"\n        @click=\"emit('cancel')\"\n      >\n        {{ cloudT.snapshotPreview.cancel }}\n      </button>\n      <button\n        class=\"tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n        @click=\"emit('confirm')\"\n      >\n        {{ cloudT.snapshotPreview.restore }}\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { Clock } from \"@lucide/vue\";\nimport { useCloudI18nStrict } from \"../../composables/useCloudI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"cancel\"): void;\n  (e: \"confirm\"): void;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    class=\"tpl-preview-banner tpl:absolute tpl:top-14 tpl:right-0 tpl:left-0 tpl:z-40 tpl:flex tpl:items-center tpl:justify-center tpl:gap-4 tpl:px-4 tpl:py-3 tpl:bg-[var(--tpl-primary-light)] tpl:border-b tpl:border-[var(--tpl-primary)]\"\n  >\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:text-sm tpl:text-[var(--tpl-text)]\"\n    >\n      <Clock\n        :size=\"18\"\n        :stroke-width=\"2\"\n        class=\"tpl:text-[var(--tpl-primary)]\"\n      />\n      <span>{{ cloudT.snapshotPreview.message }}</span>\n    </div>\n    <div class=\"tpl:flex tpl:items-center tpl:gap-2\">\n      <button\n        class=\"tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:text-[var(--tpl-text-muted)] tpl:border tpl:border-[var(--tpl-border)]\"\n        style=\"background-color: transparent\"\n        @click=\"emit('cancel')\"\n      >\n        {{ cloudT.snapshotPreview.cancel }}\n      </button>\n      <button\n        class=\"tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-sm tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:opacity-90 tpl:bg-[var(--tpl-primary)] tpl:text-[var(--tpl-bg)]\"\n        @click=\"emit('confirm')\"\n      >\n        {{ cloudT.snapshotPreview.restore }}\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-toast tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-lg\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables/useI18n\";\n\ndefineProps<{\n  visible: boolean;\n}>();\n\nconst { t } = useI18n();\n</script>\n\n<template>\n  <div\n    v-if=\"visible\"\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tpl:absolute tpl:top-16 tpl:left-1/2 tpl:z-toast tpl:-translate-x-1/2 tpl:rounded-[var(--tpl-radius)] tpl:px-4 tpl:py-2.5 tpl:text-sm tpl:shadow-lg\"\n    style=\"\n      background-color: var(--tpl-warning-light);\n      color: var(--tpl-text);\n      border: 1px solid var(--tpl-warning);\n    \"\n  >\n    {{ t.history.collabWarning }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Block, TemplateContent } from \"@templatical/types\";\nimport { cloneBlock } from \"@templatical/types\";\n\nimport type { UseFontsReturn } from \"../composables/useFonts\";\nimport { onMounted, onUnmounted, ref } from \"vue\";\nimport { RotateCcw } from \"@lucide/vue\";\nimport type { Translations, CloudTranslations } from \"../i18n\";\nimport { provide } from \"vue\";\nimport { CLOUD_TRANSLATIONS_KEY } from \"../keys\";\n\nimport { useCloudInitialization } from \"./composables/useCloudInitialization\";\nimport { useCloudLifecycle } from \"./composables/useCloudLifecycle\";\nimport { useCloudSaveGate } from \"./composables/useCloudSaveGate\";\nimport CloudSaveGateModal from \"./components/CloudSaveGateModal.vue\";\nimport CloudHeader from \"./components/CloudHeader.vue\";\nimport CloudPanels from \"./components/CloudPanels.vue\";\nimport EditorFooter from \"../components/EditorFooter.vue\";\n\nimport Canvas from \"../components/Canvas.vue\";\nimport Sidebar from \"../components/Sidebar.vue\";\nimport RightSidebar from \"../components/RightSidebar.vue\";\nimport CloudLoadingOverlay from \"./components/CloudLoadingOverlay.vue\";\nimport CloudErrorOverlay from \"./components/CloudErrorOverlay.vue\";\nimport SnapshotPreviewBanner from \"./components/SnapshotPreviewBanner.vue\";\nimport CollabUndoToast from \"./components/CollabUndoToast.vue\";\nimport \"../styles/index.css\";\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloudConfig\";\nimport type { TemplaticalCloudEditorConfig } from \"./cloudConfig\";\n\nconst props = defineProps<{\n  config: TemplaticalCloudEditorConfig;\n  translations: Translations;\n  cloudTranslations: CloudTranslations;\n  fontsManager: UseFontsReturn;\n}>();\n\nprovide(CLOUD_TRANSLATIONS_KEY, props.cloudTranslations);\nconst emit = defineEmits<{\n  (e: \"ready\"): void;\n}>();\n\n// Template ref for CloudPanels. Its `filterCommentsByBlock()` method is what\n// init.openCommentsForBlock() bridges to once the panel mounts.\nconst cloudPanelsRef = ref<{\n  filterCommentsByBlock: (blockId: string) => void;\n} | null>(null);\n\nconst init = useCloudInitialization({\n  config: props.config,\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  emit,\n  getCommentsSidebar: () =>\n    cloudPanelsRef.value\n      ? { filterByBlock: cloudPanelsRef.value.filterCommentsByBlock }\n      : null,\n});\n\n// Destructure heavily-used members for template readability.\nconst {\n  isInitializing,\n  isAuthReady,\n  initError,\n  planConfigInstance,\n  websocket,\n  collaboration,\n  isCollaborationEnabled,\n  editor,\n  core,\n  featureFlags,\n  mediaLib,\n  exporter,\n  testEmail,\n  commentsInstance,\n  savedModulesHeadless,\n  panelState,\n  snapshotPreview,\n  collabWarning,\n  showSaveModuleDialog,\n  showModuleBrowserModal,\n  saveModulePreSelectedBlockId,\n  setThemeOverrides,\n  setUiTheme,\n} = init;\n\n// ---------------------------------------------------------------------------\n// Test email handler\n// ---------------------------------------------------------------------------\n\nasync function handleSendTestEmail(recipient: string): Promise<void> {\n  try {\n    await testEmail.sendTestEmail(recipient);\n    panelState.testEmailModalOpen.value = false;\n  } catch {\n    // Error is already handled in the composable\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Module insert handler\n// ---------------------------------------------------------------------------\n\nfunction handleModuleInsert(\n  module: { content: Block[] },\n  insertIndex: number | undefined,\n): void {\n  for (let i = 0; i < module.content.length; i++) {\n    const cloned = cloneBlock(module.content[i]);\n    const position = insertIndex !== undefined ? insertIndex + i : undefined;\n    editor.addBlock(cloned, undefined, undefined, position);\n  }\n  showModuleBrowserModal.value = false;\n}\n\n// ---------------------------------------------------------------------------\n// Template lifecycle (create/load/save)\n// ---------------------------------------------------------------------------\n\nconst lifecycle = useCloudLifecycle({\n  config: props.config,\n  editor,\n  websocket,\n  planConfigInstance,\n  snapshotPreview,\n  core,\n  exporter,\n  featureFlags,\n  isDestroyed: init.isDestroyed,\n});\n\n// --- Accessibility save-gate ---\nconst saveGate = useCloudSaveGate({\n  issues: core.accessibilityLint ? core.accessibilityLint.issues : ref([]),\n  planConfig: planConfigInstance.config,\n});\n\nasync function gatedSave(): Promise<void> {\n  await saveGate.tryRunSave(() =>\n    lifecycle.saveTemplate().catch((err: Error) => props.config.onError?.(err)),\n  );\n}\n\n// Route the keyboard Save hook through the gate so Cmd+S also triggers the\n// modal when the plan policy says so.\ninit.onSaveHook.value = gatedSave;\n\n// ---------------------------------------------------------------------------\n// Lifecycle\n// ---------------------------------------------------------------------------\n\nonMounted(() => {\n  init.initialize();\n});\n\nonUnmounted(() => {\n  init.destroy();\n});\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: setUiTheme,\n  setThemeOverrides: setThemeOverrides,\n  create: lifecycle.createTemplate,\n  load: lifecycle.loadTemplate,\n  save: lifecycle.saveTemplate,\n  sendTestEmail: testEmail.sendTestEmail,\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Loading overlay -->\n    <Transition\n      enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n      enter-from-class=\"tpl:opacity-100\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <CloudLoadingOverlay\n        :visible=\"isInitializing || editor.state.isLoading\"\n      />\n    </Transition>\n\n    <!-- Error overlay -->\n    <Transition\n      enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <CloudErrorOverlay\n        :error=\"initError\"\n        :visible=\"!!initError && !isInitializing\"\n        @retry=\"init.initialize\"\n      />\n    </Transition>\n\n    <CloudHeader\n      :editor=\"editor\"\n      :core=\"core\"\n      :feature-flags=\"featureFlags\"\n      :panel-state=\"panelState\"\n      :snapshot-preview=\"snapshotPreview\"\n      :comments-instance=\"commentsInstance\"\n      :test-email=\"testEmail\"\n      :websocket=\"websocket\"\n      :collaboration=\"collaboration\"\n      :is-collaboration-enabled=\"isCollaborationEnabled\"\n      :is-saving=\"editor.state.isSaving || featureFlags.isSaveExporting.value\"\n      :is-save-disabled=\"\n        editor.state.isSaving ||\n        featureFlags.isSaveExporting.value ||\n        !editor.state.isDirty\n      \"\n      @save=\"gatedSave\"\n    />\n\n    <CloudSaveGateModal\n      :open=\"saveGate.modalOpen.value\"\n      :issues=\"saveGate.blockingIssues.value\"\n      @cancel=\"saveGate.cancel\"\n      @confirm=\"saveGate.confirmAndSave\"\n    />\n\n    <!-- Snapshot preview banner -->\n    <SnapshotPreviewBanner\n      :visible=\"snapshotPreview.isPreviewingSnapshot.value\"\n      @cancel=\"snapshotPreview.cancelPreview\"\n      @confirm=\"snapshotPreview.confirmRestoreSnapshot\"\n    />\n\n    <!-- Collaboration undo warning toast -->\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n      enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n      enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n      leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n      leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    >\n      <CollabUndoToast\n        :visible=\"collabWarning.collabUndoWarningVisible.value\"\n      />\n    </Transition>\n\n    <!-- Left sidebar -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas body -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto\"\n      style=\"\n        transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n        background-color: var(--tpl-canvas-bg);\n      \"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : panelState.rightPanelOpen.value\n            ? 'tpl:left-12 tpl:right-[680px]'\n            : 'tpl:left-12 tpl:right-[320px]',\n        snapshotPreview.isPreviewingSnapshot.value\n          ? 'tpl:top-[104px]'\n          : 'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            class=\"tpl:absolute tpl:left-1/2 tpl:top-2 tpl:-translate-x-1/2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-full tpl:border tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:whitespace-nowrap tpl:shadow-md tpl:hover:opacity-80\"\n            style=\"\n              background-color: var(--tpl-warning-light);\n              color: var(--tpl-warning);\n              border-color: var(--tpl-warning);\n              backdrop-filter: blur(8px);\n            \"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <main class=\"tpl-main tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          :locked-blocks=\"collaboration?.lockedBlocks.value ?? undefined\"\n          @select-block=\"editor.selectBlock\"\n          @open-ai-chat=\"panelState.aiChatOpen.value = true\"\n          @open-design-reference=\"panelState.designReferenceOpen.value = true\"\n        />\n      </main>\n    </div>\n\n    <EditorFooter\n      v-if=\"config.branding !== false && !featureFlags.isWhiteLabeled.value\"\n      :position-class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : panelState.rightPanelOpen.value\n            ? 'tpl:left-12 tpl:right-[680px]'\n            : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    />\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      :shifted-left=\"panelState.rightPanelOpen.value\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.selectedBlock.value!.id, updates)\n      \"\n      @delete-block=\"\n        core.blockActions.deleteBlock(editor.selectedBlock.value!.id)\n      \"\n      @duplicate-block=\"\n        core.blockActions.duplicateBlock(editor.selectedBlock.value!)\n      \"\n      @update-settings=\"editor.updateSettings\"\n    />\n\n    <!-- Cloud sidebars + modals — only mount after cloud init completes -->\n    <CloudPanels\n      v-if=\"!isInitializing && isAuthReady\"\n      ref=\"cloudPanelsRef\"\n      :config=\"props.config\"\n      :editor=\"editor\"\n      :core=\"core\"\n      :panel-state=\"panelState\"\n      :plan-config-instance=\"planConfigInstance\"\n      :test-email=\"testEmail\"\n      :media-lib=\"mediaLib\"\n      :saved-modules-headless=\"savedModulesHeadless\"\n      :show-save-module-dialog=\"showSaveModuleDialog\"\n      :save-module-pre-selected-block-id=\"saveModulePreSelectedBlockId\"\n      :show-module-browser-modal=\"showModuleBrowserModal\"\n      @update:show-save-module-dialog=\"showSaveModuleDialog = $event\"\n      @update:save-module-pre-selected-block-id=\"\n        saveModulePreSelectedBlockId = $event\n      \"\n      @update:show-module-browser-modal=\"showModuleBrowserModal = $event\"\n      @send-test-email=\"handleSendTestEmail\"\n      @module-insert=\"handleModuleInsert\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Block, TemplateContent } from \"@templatical/types\";\nimport { cloneBlock } from \"@templatical/types\";\n\nimport type { UseFontsReturn } from \"../composables/useFonts\";\nimport { onMounted, onUnmounted, ref } from \"vue\";\nimport { RotateCcw } from \"@lucide/vue\";\nimport type { Translations, CloudTranslations } from \"../i18n\";\nimport { provide } from \"vue\";\nimport { CLOUD_TRANSLATIONS_KEY } from \"../keys\";\n\nimport { useCloudInitialization } from \"./composables/useCloudInitialization\";\nimport { useCloudLifecycle } from \"./composables/useCloudLifecycle\";\nimport { useCloudSaveGate } from \"./composables/useCloudSaveGate\";\nimport CloudSaveGateModal from \"./components/CloudSaveGateModal.vue\";\nimport CloudHeader from \"./components/CloudHeader.vue\";\nimport CloudPanels from \"./components/CloudPanels.vue\";\nimport EditorFooter from \"../components/EditorFooter.vue\";\n\nimport Canvas from \"../components/Canvas.vue\";\nimport Sidebar from \"../components/Sidebar.vue\";\nimport RightSidebar from \"../components/RightSidebar.vue\";\nimport CloudLoadingOverlay from \"./components/CloudLoadingOverlay.vue\";\nimport CloudErrorOverlay from \"./components/CloudErrorOverlay.vue\";\nimport SnapshotPreviewBanner from \"./components/SnapshotPreviewBanner.vue\";\nimport CollabUndoToast from \"./components/CollabUndoToast.vue\";\nimport \"../styles/index.css\";\n\nexport type { TemplaticalCloudEditorConfig } from \"./cloudConfig\";\nimport type { TemplaticalCloudEditorConfig } from \"./cloudConfig\";\n\nconst props = defineProps<{\n  config: TemplaticalCloudEditorConfig;\n  translations: Translations;\n  cloudTranslations: CloudTranslations;\n  fontsManager: UseFontsReturn;\n}>();\n\nprovide(CLOUD_TRANSLATIONS_KEY, props.cloudTranslations);\nconst emit = defineEmits<{\n  (e: \"ready\"): void;\n}>();\n\n// Template ref for CloudPanels. Its `filterCommentsByBlock()` method is what\n// init.openCommentsForBlock() bridges to once the panel mounts.\nconst cloudPanelsRef = ref<{\n  filterCommentsByBlock: (blockId: string) => void;\n} | null>(null);\n\nconst init = useCloudInitialization({\n  config: props.config,\n  translations: props.translations,\n  fontsManager: props.fontsManager,\n  emit,\n  getCommentsSidebar: () =>\n    cloudPanelsRef.value\n      ? { filterByBlock: cloudPanelsRef.value.filterCommentsByBlock }\n      : null,\n});\n\n// Destructure heavily-used members for template readability.\nconst {\n  isInitializing,\n  isAuthReady,\n  initError,\n  planConfigInstance,\n  websocket,\n  collaboration,\n  isCollaborationEnabled,\n  editor,\n  core,\n  featureFlags,\n  mediaLib,\n  exporter,\n  testEmail,\n  commentsInstance,\n  savedModulesHeadless,\n  panelState,\n  snapshotPreview,\n  collabWarning,\n  showSaveModuleDialog,\n  showModuleBrowserModal,\n  saveModulePreSelectedBlockId,\n  setThemeOverrides,\n  setUiTheme,\n} = init;\n\n// ---------------------------------------------------------------------------\n// Test email handler\n// ---------------------------------------------------------------------------\n\nasync function handleSendTestEmail(recipient: string): Promise<void> {\n  try {\n    await testEmail.sendTestEmail(recipient);\n    panelState.testEmailModalOpen.value = false;\n  } catch {\n    // Error is already handled in the composable\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Module insert handler\n// ---------------------------------------------------------------------------\n\nfunction handleModuleInsert(\n  module: { content: Block[] },\n  insertIndex: number | undefined,\n): void {\n  for (let i = 0; i < module.content.length; i++) {\n    const cloned = cloneBlock(module.content[i]);\n    const position = insertIndex !== undefined ? insertIndex + i : undefined;\n    editor.addBlock(cloned, undefined, undefined, position);\n  }\n  showModuleBrowserModal.value = false;\n}\n\n// ---------------------------------------------------------------------------\n// Template lifecycle (create/load/save)\n// ---------------------------------------------------------------------------\n\nconst lifecycle = useCloudLifecycle({\n  config: props.config,\n  editor,\n  websocket,\n  planConfigInstance,\n  snapshotPreview,\n  core,\n  exporter,\n  featureFlags,\n  isDestroyed: init.isDestroyed,\n});\n\n// --- Accessibility save-gate ---\nconst saveGate = useCloudSaveGate({\n  issues: core.accessibilityLint ? core.accessibilityLint.issues : ref([]),\n  planConfig: planConfigInstance.config,\n});\n\nasync function gatedSave(): Promise<void> {\n  await saveGate.tryRunSave(() =>\n    lifecycle.saveTemplate().catch((err: Error) => props.config.onError?.(err)),\n  );\n}\n\n// Route the keyboard Save hook through the gate so Cmd+S also triggers the\n// modal when the plan policy says so.\ninit.onSaveHook.value = gatedSave;\n\n// ---------------------------------------------------------------------------\n// Lifecycle\n// ---------------------------------------------------------------------------\n\nonMounted(() => {\n  init.initialize();\n});\n\nonUnmounted(() => {\n  init.destroy();\n});\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\ndefineExpose({\n  getContent: () => editor.content.value,\n  setContent: (content: TemplateContent) => editor.setContent(content),\n  setTheme: setUiTheme,\n  setThemeOverrides: setThemeOverrides,\n  create: lifecycle.createTemplate,\n  load: lifecycle.loadTemplate,\n  save: lifecycle.saveTemplate,\n  sendTestEmail: testEmail.sendTestEmail,\n});\n</script>\n\n<template>\n  <div\n    class=\"tpl tpl:relative tpl:h-full tpl:overflow-hidden\"\n    :class=\"{ 'tpl:dark': editor.state.darkMode }\"\n    :data-tpl-theme=\"core.resolvedTheme.value\"\n    :style=\"core.themeStyles.value\"\n  >\n    <!-- Loading overlay -->\n    <Transition\n      enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n      enter-from-class=\"tpl:opacity-100\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <CloudLoadingOverlay\n        :visible=\"isInitializing || editor.state.isLoading\"\n      />\n    </Transition>\n\n    <!-- Error overlay -->\n    <Transition\n      enter-active-class=\"tpl:transition-opacity tpl:duration-200\"\n      enter-from-class=\"tpl:opacity-0\"\n      enter-to-class=\"tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-opacity tpl:duration-300\"\n      leave-from-class=\"tpl:opacity-100\"\n      leave-to-class=\"tpl:opacity-0\"\n    >\n      <CloudErrorOverlay\n        :error=\"initError\"\n        :visible=\"!!initError && !isInitializing\"\n        @retry=\"init.initialize\"\n      />\n    </Transition>\n\n    <CloudHeader\n      :editor=\"editor\"\n      :core=\"core\"\n      :feature-flags=\"featureFlags\"\n      :panel-state=\"panelState\"\n      :snapshot-preview=\"snapshotPreview\"\n      :comments-instance=\"commentsInstance\"\n      :test-email=\"testEmail\"\n      :websocket=\"websocket\"\n      :collaboration=\"collaboration\"\n      :is-collaboration-enabled=\"isCollaborationEnabled\"\n      :is-saving=\"editor.state.isSaving || featureFlags.isSaveExporting.value\"\n      :is-save-disabled=\"\n        editor.state.isSaving ||\n        featureFlags.isSaveExporting.value ||\n        !editor.state.isDirty\n      \"\n      @save=\"gatedSave\"\n    />\n\n    <CloudSaveGateModal\n      :open=\"saveGate.modalOpen.value\"\n      :issues=\"saveGate.blockingIssues.value\"\n      @cancel=\"saveGate.cancel\"\n      @confirm=\"saveGate.confirmAndSave\"\n    />\n\n    <!-- Snapshot preview banner -->\n    <SnapshotPreviewBanner\n      :visible=\"snapshotPreview.isPreviewingSnapshot.value\"\n      @cancel=\"snapshotPreview.cancelPreview\"\n      @confirm=\"snapshotPreview.confirmRestoreSnapshot\"\n    />\n\n    <!-- Collaboration undo warning toast -->\n    <Transition\n      enter-active-class=\"tpl:transition-all tpl:duration-200 tpl:ease-out\"\n      enter-from-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n      enter-to-class=\"tpl:translate-y-0 tpl:opacity-100\"\n      leave-active-class=\"tpl:transition-all tpl:duration-300 tpl:ease-in\"\n      leave-from-class=\"tpl:translate-y-0 tpl:opacity-100\"\n      leave-to-class=\"tpl:translate-y-[-8px] tpl:opacity-0\"\n    >\n      <CollabUndoToast\n        :visible=\"collabWarning.collabUndoWarningVisible.value\"\n      />\n    </Transition>\n\n    <!-- Left sidebar -->\n    <Sidebar v-show=\"!editor.state.previewMode\" />\n\n    <!-- Canvas body -->\n    <div\n      class=\"tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto\"\n      style=\"\n        transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n        background-color: var(--tpl-canvas-bg);\n      \"\n      :class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : panelState.rightPanelOpen.value\n            ? 'tpl:left-12 tpl:right-[680px]'\n            : 'tpl:left-12 tpl:right-[320px]',\n        snapshotPreview.isPreviewingSnapshot.value\n          ? 'tpl:top-[104px]'\n          : 'tpl:top-14',\n      ]\"\n    >\n      <!-- Restore hidden blocks button -->\n      <div class=\"tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0\">\n        <Transition name=\"tpl-restore-btn\">\n          <button\n            v-if=\"core.conditionPreview.hasHiddenBlocks.value\"\n            class=\"tpl:absolute tpl:left-1/2 tpl:top-2 tpl:-translate-x-1/2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-full tpl:border tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:whitespace-nowrap tpl:shadow-md tpl:hover:opacity-80\"\n            style=\"\n              background-color: var(--tpl-warning-light);\n              color: var(--tpl-warning);\n              border-color: var(--tpl-warning);\n              backdrop-filter: blur(8px);\n            \"\n            @click=\"core.conditionPreview.reset()\"\n          >\n            <RotateCcw :size=\"13\" :stroke-width=\"2\" />\n            {{ core.t.blockSettings.restoreHiddenBlocks }}\n          </button>\n        </Transition>\n      </div>\n      <main class=\"tpl-main tpl:flex tpl:justify-center tpl:p-8\">\n        <Canvas\n          :viewport=\"editor.state.viewport\"\n          :content=\"editor.content.value\"\n          :selected-block-id=\"editor.state.selectedBlockId\"\n          :dark-mode=\"editor.state.darkMode\"\n          :preview-mode=\"editor.state.previewMode\"\n          :locked-blocks=\"collaboration?.lockedBlocks.value ?? undefined\"\n          @select-block=\"editor.selectBlock\"\n          @open-ai-chat=\"panelState.aiChatOpen.value = true\"\n          @open-design-reference=\"panelState.designReferenceOpen.value = true\"\n        />\n      </main>\n    </div>\n\n    <EditorFooter\n      v-if=\"config.branding !== false && !featureFlags.isWhiteLabeled.value\"\n      :position-class=\"[\n        editor.state.previewMode\n          ? 'tpl:left-0 tpl:right-0'\n          : panelState.rightPanelOpen.value\n            ? 'tpl:left-12 tpl:right-[680px]'\n            : 'tpl:left-12 tpl:right-[320px]',\n      ]\"\n    />\n\n    <!-- Keyboard reorder announcement region (visually hidden, screen-reader live) -->\n    <div\n      class=\"tpl-sr-only\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      :aria-label=\"core.t.landmarks.reorderAnnouncements\"\n    >\n      {{ core.keyboardReorder.announcement.value }}\n    </div>\n\n    <!-- Right sidebar — persisted with v-show -->\n    <RightSidebar\n      v-show=\"!editor.state.previewMode\"\n      :selected-block=\"editor.selectedBlock.value\"\n      :settings=\"editor.content.value.settings\"\n      :shifted-left=\"panelState.rightPanelOpen.value\"\n      @update-block=\"\n        (updates) => editor.updateBlock(editor.selectedBlock.value!.id, updates)\n      \"\n      @delete-block=\"\n        core.blockActions.deleteBlock(editor.selectedBlock.value!.id)\n      \"\n      @duplicate-block=\"\n        core.blockActions.duplicateBlock(editor.selectedBlock.value!)\n      \"\n      @update-settings=\"editor.updateSettings\"\n    />\n\n    <!-- Cloud sidebars + modals — only mount after cloud init completes -->\n    <CloudPanels\n      v-if=\"!isInitializing && isAuthReady\"\n      ref=\"cloudPanelsRef\"\n      :config=\"props.config\"\n      :editor=\"editor\"\n      :core=\"core\"\n      :panel-state=\"panelState\"\n      :plan-config-instance=\"planConfigInstance\"\n      :test-email=\"testEmail\"\n      :media-lib=\"mediaLib\"\n      :saved-modules-headless=\"savedModulesHeadless\"\n      :show-save-module-dialog=\"showSaveModuleDialog\"\n      :save-module-pre-selected-block-id=\"saveModulePreSelectedBlockId\"\n      :show-module-browser-modal=\"showModuleBrowserModal\"\n      @update:show-save-module-dialog=\"showSaveModuleDialog = $event\"\n      @update:save-module-pre-selected-block-id=\"\n        saveModulePreSelectedBlockId = $event\n      \"\n      @update:show-module-browser-modal=\"showModuleBrowserModal = $event\"\n      @send-test-email=\"handleSendTestEmail\"\n      @module-insert=\"handleModuleInsert\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.tpl-restore-btn-enter-active {\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.tpl-restore-btn-leave-active {\n  transition:\n    opacity 150ms ease-in,\n    transform 150ms ease-in;\n}\n\n.tpl-restore-btn-enter-from,\n.tpl-restore-btn-leave-to {\n  opacity: 0;\n  transform: translateY(-8px) scale(0.9);\n}\n\n.tpl-restore-btn-enter-to,\n.tpl-restore-btn-leave-from {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n</style>\n"],"mappings":";;;;;;AAiDA,SAAgB,GACd,GAC0B;CAC1B,IAAM,EAAE,gBAAa,WAAQ,YAAS,qBAAkB,aAAU,eAChE,GAEI,IAA0B,EAC9B,KACD,EACK,IAAqB,EAA6B,KAAK,EACvD,IAAuB,EAA4B,KAAK,EAK1D,IAAY;AAChB,SAAqB;AACnB,MAAY;GACZ;CAEF,IAAM,IAAuB,QACrB,EAAmB,UAAU,KACpC,EACK,IAA2B,QACzB,EAAwB,OAAO,UAAU,SAAS,EAAE,CAC3D,EACK,IAA2B,QACzB,EAAwB,OAAO,UAAU,SAAS,GACzD,EACK,IAA6B,QAC3B,EAAwB,OAAO,YAAY,SAAS,GAC3D;CAED,SAAS,IAA4B;AACnC,EAAI,EAAO,MAAM,UAAU,MAAM,CAAC,EAAwB,UACxD,EAAwB,QAAQ,GAAmB;GACjD;GACA,YAAY,EAAO,MAAM,SAAS;GAClC,WAAW;GACX;GACD,CAAC,EACF,EAAwB,MAAM,eAAe;;CAIjD,SAAS,EAAc,GAA8C;AAGnE,EAFA,EAAO,WAAW,EAAS,SAAS,GAAM,EAC1C,EAAQ,OAAO,EACf,EAAiB,OAAO;;CAG1B,eAAe,EACb,GACe;AACX,UAEJ;OAAI,EAAmB,OAAO;AAE5B,IADA,EAAmB,QAAQ,GAC3B,EAAO,WAAW,EAAS,SAAS,GAAM;AAC1C;;GAGE,EAAO,MAAM,WAAW,EAAO,aAAa,KAC9C,MAAM,EAAO,gBAAgB,EACzB,OAGN,EAAqB,QAAQ,gBAAgB,EAAO,QAAQ,MAAM,EAElE,GAAU,OAAO,EACjB,EAAmB,QAAQ,GAC3B,EAAO,WAAW,EAAS,SAAS,GAAM;;;CAG5C,eAAe,IAAwC;AACjD,SAAC,EAAmB,SAAS,CAAC,EAAwB,OAE1D,KAAI;AAMF,OALA,MAAM,EAAwB,MAAM,gBAClC,EAAmB,MAAM,GAC1B,EACG,MACJ,MAAM,EAAwB,MAAM,eAAe,EAC/C,GAAW;YACP;AACR,GAAK,MACH,EAAmB,QAAQ,MAC3B,EAAqB,QAAQ,MAC7B,GAAU,QAAQ;;;CAKxB,SAAS,IAAsB;AACzB,GAAC,EAAmB,SAAS,CAAC,EAAqB,UAEvD,EAAO,WAAW,EAAqB,OAAO,GAAM,EAEpD,EAAmB,QAAQ,MAC3B,EAAqB,QAAQ,MAE7B,GAAU,QAAQ;;CAGpB,eAAe,IAAqC;AAC9C,OACA,EAAwB,SAC1B,MAAM,EAAwB,MAAM,eAAe;;AAIvD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;ACrJH,SAAgB,KAA+C;CAC7D,IAAM,IAAc,EAAuB,KAAK,EAE1C,IAAa,EAAS;EAC1B,WAAW,EAAY,UAAU;EACjC,MAAM,MAAO,EAAY,QAAQ,IAAI,YAAY;EAClD,CAAC,EACI,IAAmB,EAAS;EAChC,WAAW,EAAY,UAAU;EACjC,MAAM,MAAO,EAAY,QAAQ,IAAI,YAAY;EAClD,CAAC,EACI,IAAsB,EAAS;EACnC,WAAW,EAAY,UAAU;EACjC,MAAM,MAAO,EAAY,QAAQ,IAAI,qBAAqB;EAC3D,CAAC,EACI,IAAe,EAAS;EAC5B,WAAW,EAAY,UAAU;EACjC,MAAM,MAAO,EAAY,QAAQ,IAAI,aAAa;EACnD,CAAC,EAEI,IAAqB,EAAI,GAAM,EAC/B,IAAmB,EAAI,GAAM,EAC7B,IAAqB,EAAiC,KAAA,EAAU,EAChE,IAAa,EAAI,GAAM,EACvB,IAAY,EAAwB,KAAK,EAEzC,IAAiB,QAAe,EAAY,UAAU,KAAK,EAE3D,IAAkB,QAAiC;EACvD,IAAM,IAAI,EAAY;AAGtB,SAFI,MAAM,aAAa,MAAM,sBAAsB,MAAM,YAChD,IACF;GACP,EAEI,IAAiB,QAEnB,EAAW,SACX,EAAY,UAAU,aACtB,EAAY,UAAU,sBACtB,EAAY,UAAU,UACzB;CAED,SAAS,IAAqB;AAC5B,IAAW,QAAQ,CAAC,EAAW;;CAGjC,SAAS,EAAsB,GAA0B;AAEvD,EADA,EAAW,QAAQ,IACnB,EAAY,QAAQ,EAAY,UAAU,IAAU,OAAO;;AAO7D,QAJA,GAAe,SAAiB;AAC9B,IAAW,QAAQ;GACnB,EAEK;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;AC/EH,SAAgB,GACd,GAC4B;CAC5B,IAAM,EAAE,2BAAwB,yBAAsB,eAAY,GAE5D,IAAyB,EAAI,GAAM,EACnC,IAA2B,EAAI,GAAM,EAErC,EAAE,OAAO,MAAkC,QACzC;AACJ,IAAyB,QAAQ;IAEnC,GACA,EAAE,WAAW,IAAO,CACrB;CAED,SAAS,IAA8B;AAEnC,IAAuB,SACvB,CAAC,EAAuB,SACxB,GAAsB,KAAK,KAC3B,CAAC,EAAQ,UAKX,EAAuB,QAAQ,IAC/B,EAAyB,QAAQ,IACjC,GAA+B;;AAGjC,QAAO;EACL;EACA;EACD;;;;ACtBH,SAAgB,GACd,GAC4B;CAC5B,IAAM,EAAE,uBAAoB,aAAU,cAAW,GAE3C,IAAqB,QAEvB,EAAmB,WAAW,gBAAgB,IAC9C,EAAS,kBAAkB,MAC9B,EACK,IAAmB,QACvB,EAAmB,WAAW,aAAa,CAC5C,EACK,IAAmB,QAAe,CAAC,CAAC,EAAO,MAAM,UAAU,GAAG,EAC9D,IAAiB,QACrB,EAAmB,WAAW,cAAc,CAC7C,EACK,IAAgB,QACd,EAAmB,OAAO,OAAO,OAAO,iBAAiB,KAChE,EACK,IAAgB,QACd,EAAmB,OAAO,OAAO,kBAAkB,EAC1D,EAEK,IAAkB,EAAI,GAAM,EAC5B,IAAa,EAAgC,OAAO,EACpD,IAAmB,EAAI,GAAG,EAE1B,EAAE,OAAO,MAAyB,QAChC;AACJ,IAAW,QAAQ;IAErB,KACA,EAAE,WAAW,IAAO,CACrB;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;ACzDH,SAAgB,GACd,GAC4B;CAC5B,IAAM,EAAE,mBAAgB,qBAAkB,0BAAuB,GAE7D,IAA8D;CAElE,eAAe,IAAkD;AAE/D,MAAI,GAAgB;GAClB,IAAM,IAAO,MAAM,EAAe,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC;AAEzD,UADK,IACE;IAAE,KAAK,EAAK;IAAK,KAAK,EAAK,YAAY,KAAA;IAAW,GADvC;;AAapB,SANA,AAEE,OADA,EAAa,KAAK,EACH,OAEjB,EAAmB,QAAQ,CAAC,SAAS,EACrC,EAAiB,QAAQ,IAClB,IAAI,SAA6B,MAAY;AAClD,QAAgB,MAAW;AACzB,MAAQ,EAAO;;IAEjB;;CAGJ,SAAS,EAAkB,GAAuB;AAGhD,EAFA,EAAiB,QAAQ,IACzB,IAAe;GAAE,KAAK,EAAK;GAAK,KAAK,EAAK,YAAY,KAAA;GAAW,CAAC,EAClE,IAAe;;CAGjB,SAAS,IAAgC;AAGvC,EAFA,EAAiB,QAAQ,IACzB,IAAe,KAAK,EACpB,IAAe;;AAUjB,QAPA,QAAqB;AACnB,EAEE,OADA,EAAa,KAAK,EACH;GAEjB,EAEK;EACL;EACA;EACA;EACD;;;;ACuFH,SAAgB,GACd,GAC8B;CAC9B,IAAM,EAAE,WAAQ,iBAAc,iBAAc,SAAM,0BAChD,GAGI,IAAiB,EAAI,GAAK,EAC1B,IAAc,EAAI,GAAM,EACxB,IAAY,EAAkB,KAAK,EACrC,IAAa,IAGX,IAAyD,EAC7D,OAAO,MACR,EAGG,IAAsD,MACtD,IAAmE,MAGjE,IAAc,IAAI,EAAY;EAClC,GAAG,EAAO;EACV,SAAS,EAAO;EACjB,CAAC,EAEI,IAAqB,GAAc;EACvC;EACA,SAAS,EAAO;EACjB,CAAC,EAGI,IAA4B,kBAA0B,IAAI,KAAK,CAAC,EAGhE,IAAS,GAAU;EACvB;EACA,mBAAmB,EAAO,OAAO;EACjC,kBAAkB,EAAO;EACzB,SAAS,EAAO;EAChB,cAAc;EACf,CAAC,EAGI,IAAY,GAAa;EAC7B;EACA,SAAS,EAAO;EACjB,CAAC;AAEF,CAAI,EAAO,KAAK,WACd,GAAe;EACb;EACA,SAAS,EAAU;EACnB,aAAa,EAAO,IAAI;EACzB,CAAC;CASJ,IAAI,IAA8C;AAElD,CAAI,EAAO,eAAe,YACxB,IAAgB,EAAiB;EAC/B;EACA;EACA,SAAS,EAAU;EACnB,SAAS,EAAO;EAChB,sBAAsB,EAAO,cAAc;EAC3C,oBAAoB,EAAO,cAAc;EACzC,eAAe,EAAO,cAAc;EACpC,iBAAiB,EAAO,cAAc;EACvC,CAAC,EAEF,QACQ,EAAe,aAAa,QACjC,MAAoB;AACnB,IAA0B,QAAQ;IAEpC,EAAE,WAAW,IAAM,CACpB,EAED,GAA0B,GAAQ,EAAc;CAGlD,IAAM,IAAyB,QAE3B,CAAC,CAAC,EAAO,eAAe,WACxB,EAAmB,WAAW,gBAAgB,CACjD,EAGK,IAAO,GAAc;EACzB;EACA,QAAQ;GACN,SAAS,EAAO;GAChB,OAAO,KAAA;GACP,eAAe,EAAO;GACtB,cAAc,EAAE;GAChB,WAAW,EAAO;GAClB,mBAAmB,EAAO;GAC1B,gBAAgB;GAChB,eAAe,GAA4B,EAAO;GAClD,cAAc;AACZ,MAAW,SAAS,CAAC,OAAO,MAAQ;AAClC,OAAO,UAAU,EAAa;MAC9B;;GAEL;EACD;EACA;EACA,gBAAgB,IACZ,EACE,yBACE,EAAe,8BAA8B,EAChD,GACD,KAAA;EACJ,iBAAiB;GACf,UAAU,YAAY;AACpB,IAAI,EAAO,aAAa,KACtB,MAAM,EAAO,gBAAgB,EAC7B,GAAoB,wBAAwB,OAAO,eAAe;;GAGtE,UAAU,EAAO,oBAAA;GACjB,eACE,EAAO,aAAa,MAAS,EAAmB,WAAW,YAAY;GAC1E;EACD,yBAAyB,EACvB,mBAAmB,IAAI,EAAa,OAAO,SAAS,IACrD;EACD,iBAAiB,EACf,oBAAoB,GAAkB,uBAAuB,EAC9D;EACF,CAAC,EAGI,IAAgB,GAAqB;EACzC;EACA,4BAA4B,GAAe,cAAc,MAAM,UAAU;EACzE,SAAS,EAAK,QAAQ;EACvB,CAAC;AACF,KAAmB;CAGnB,IAAM,IAAkB,GAAmB;EACzC;EACA;EACA,SAAS,EAAK;EACd,kBAAkB,EAAK;EACvB,UAAU,EAAK;EACf,SAAS,EAAO;EACjB,CAAC;AACF,KAAqB;CAGrB,IAAM,IAAa,IAAoB,EACjC,IAAW,GAAY,EAAO,GAAG,EAEjC,IAAe,GAAqB;EACxC;EACA;EACA;EACD,CAAC,EAEI,IAAW,GAAqB;EACpC,gBAAgB,EAAO;EACvB,kBAAkB,EAAW;EAC7B,oBAAoB,EAAW;EAChC,CAAC;AAGF,IAAY;EACV,aAAa,EAAO;EACpB,YAAY,EAAO;EACpB,CAAC;CAEF,IAAM,IAAW,EAAU;EACzB;EACA,sBAAsB,EAAO;EAC7B,yBAAyB,EAAmB,WAAW,eAAe;EACvE,CAAC,EAEI,IAAY,EAAa;EAC7B;EACA,qBAAqB,EAAO,MAAM,UAAU,MAAM;EAClD,YAAY,EAAO,MAAM;EACzB,aAAa,MAAuB,EAAS,WAAW,EAAW;EACnE,SAAS,EAAO;EAChB;EACA,mBAAmB,EAAO;EAC3B,CAAC,EAEI,IAAmB,GAAY;EACnC;EACA,qBAAqB,EAAO,MAAM,UAAU,MAAM;EAClD,mBAAmB,EAAU,aAAa;EAC1C,WAAW,EAAO;EAClB,SAAS,EAAO;EAChB;EACA,4BACE,EAAO,eAAe,MACtB,EAAmB,WAAW,aAAa;EAC9C,CAAC;AAEF,IAAmB;EACjB,UAAU;EACV,SAAS,EAAU;EACpB,CAAC;CAEF,IAAM,IAAuB,GAAgB;EAC3C;EACA,SAAS,EAAO;EACjB,CAAC,EACI,IAAuB,EAAI,GAAM,EACjC,IAA+B,EAAmB,KAAK,EACvD,IAAyB,EAAI,GAAM,EAEnC,IAAkB,GAAmB;EACzC;EACA,qBAAqB,EAAO,MAAM,UAAU,MAAM;EACnD,CAAC;CAGF,SAAS,EAAqB,GAAuB;AAGnD,EAFA,EAAW,aAAa,QAAQ,IAEhC,qBAAqB;AACnB,MAAoB,EAAE,cAAc,EAAQ;IAC5C;;AAYJ,CARA,EAAQ,GAAsB,EAAS,mBAAmB,EAC1D,EAAQ,IAAkB,EAAY,EACtC,EAAQ,GAAe,EAAS,EAChC,EAAQ,GAAc,EAAiB,EACvC,EAAQ,GAA4B,EAAqB,EACzD,EAAQ,GAAa,EAAgB,EAGrC,EAAQ,GAAkB;EACxB,MAAM;EACN,IAAI;EACJ,UAAU;GACR,gBAAgB,MACd,EAAiB,oBAAoB,MAAM,IAAI,EAAQ,IAAI;GAC7D,cAAc;GACf;EACD,cAAc;GACZ,iBAAiB,MAAoB;AAEnC,IADA,EAA6B,QAAQ,KAAW,MAChD,EAAqB,QAAQ;;GAE/B,mBAAmB;AACjB,MAAuB,QAAQ;;GAEjC,aAAa,QAAe,EAAqB,QAAQ,MAAM,OAAO;GACvE;EACF,CAA8B;CAG/B,SAAS,EAAkB,GAAiC;AACrD,IAAmB,WAAW,sBAAsB,KACzD,EAAK,eAAe,QAAQ;;CAG9B,SAAS,EAAW,GAAsB;AACxC,IAAO,WAAW,EAAM;;CAI1B,eAAe,KAA4B;AAEzC,EADA,EAAe,QAAQ,IACvB,EAAU,QAAQ;AAElB,MAAI;AAEF,OADA,MAAM,EAAY,YAAY,EAC1B,EAAY;AAChB,KAAY,QAAQ;GAEpB,IAAM,IAAe,MAAM,GAAmB,EAAE,gBAAa,CAAC;AAC9D,OAAI,EAAY;AAEhB,OAAI,CAAC,EAAa,IAAI,GACpB,OAAU,MAAM,4CAA4C;AAG9D,OAAI,CAAC,EAAa,KAAK,GACrB,OAAU,MACR,4CAA4C,EAAa,KAAK,QAAQ,MAAM,EAAa,KAAK,UAAU,KACzG;AAYH,OATK,EAAa,UAAU,MAC1B,GAAO,KACL,kCACA,EAAa,UAAU,SAAS,iBAChC,0CACD,EAGH,MAAM,EAAmB,aAAa,EAClC,EAAY;AA2BhB,GAzBA,EAAa,sBACX,EAAmB,WAAW,eAAe,CAC9C,EAGC,EAAO,cAAc,UACrB,EAAmB,WAAW,gBAAgB,IAE9C,EAAK,qBAAqB,EAAO,aAAa,EAI9C,EAAO,SACP,EAAmB,WAAW,sBAAsB,KAEpD,EAAK,eAAe,QAAQ,EAAO,QAInC,EAAO,YAAY,MACnB,EAAmB,WAAW,gBAAgB,IAE9C,EAAqB,aAAa,EAGpC,EAAK,QAAQ;WACN,GAAO;AACd,OAAI,EAAY;GAChB,IAAM,IACJ,aAAiB,QACb,IACI,MAAM,yBAAyB,EAAE,OAAO,GAAO,CAAC;AAE1D,GADA,EAAU,QAAQ,GAClB,EAAO,UAAU,EAAa;YACtB;AACR,GAAK,MACH,EAAe,QAAQ;;;CAK7B,SAAS,IAAgB;AAKvB,EAJA,IAAa,IACb,EAAa,kBAAkB,EAC/B,EAAU,YAAY,EACtB,EAAK,SAAS,EACd,EAAO,aAAa;;AAGtB,QAAO;EACL;EACA;EACA;EACA,mBAAmB;EAEnB;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACD;;;;ACjiBH,eAAsB,GACpB,GACA,GACe;CACf,IAAM,IAAc,OAAO,MAAgC;AACzD,MAAI,EAAc,EAAM,EAAE;GACxB,IAAM,IAAc;AACpB,OAAI;AACF,MAAY,eACV,MAAM,EAAS,kBAAkB,EAAY;WACzC;AACN,MAAY,eAAe,mCAAmC,EAAY,WAAW;;;AAIzF,MAAI,EAAM,SAAS,aAAa,cAAc,GAAO;GACnD,IAAM,IAAe;AACrB,QAAK,IAAM,KAAU,EAAa,SAChC,MAAK,IAAM,KAAS,EAClB,OAAM,EAAY,EAAM;;;AAMhC,MAAK,IAAM,KAAS,EAAQ,OAC1B,OAAM,EAAY,EAAM;;;;ACA5B,SAAgB,GACd,GACyB;CACzB,IAAM,EACJ,WACA,WACA,cACA,uBACA,oBACA,SACA,aACA,iBACA,mBACE;CAEJ,SAAS,IAAqB;AAC5B,SAAO,EAAuB,EAAmB,OAAO,MAAO,UAAU;;CAG3E,eAAe,EAAe,GAA8C;EAC1E,IAAM,IAAW,MAAM,EAAO,OAAO,EAAQ;AAK7C,SAJI,GAAa,GAAS,KAC1B,EAAO,WAAW,EAAS,EAC3B,EAAgB,qBAAqB,EACrC,EAAU,QAAQ,EAAS,IAAI,GAAoB,CAAC,EAC7C;;CAGT,eAAe,EAAa,GAAuC;EACjE,IAAM,IAAW,MAAM,EAAO,KAAK,EAAW;AAK9C,SAJI,GAAa,GAAS,KAC1B,EAAO,SAAS,EAAS,EACzB,EAAgB,qBAAqB,EACrC,EAAU,QAAQ,EAAS,IAAI,GAAoB,CAAC,EAC7C;;CAGT,eAAe,IAAoC;AAEjD,EADA,EAAa,gBAAgB,QAAQ,IACrC,EAAa,WAAW,QAAQ;AAChC,MAAI;AAGF,OADA,MAAM,GAAsB,EAAO,QAAQ,OAAO,EAAK,SAAS,EAC5D,GAAa,CAAE,OAAU,MAAM,kCAAkC;GAErE,IAAM,IAAW,MAAM,EAAO,MAAM;AACpC,OAAI,GAAa,CAAE,OAAU,MAAM,kCAAkC;AAGrE,GADA,EAAgB,qBAAqB,EACrC,EAAgB,wBAAwB,OAAO,eAAe;GAE9D,IAAM,IAAe,MAAM,EAAS,WAAW,EAAS,GAAG;AAC3D,OAAI,GAAa,CAAE,OAAU,MAAM,kCAAkC;GAErE,IAAM,IAAyB;IAC7B,YAAY,EAAS;IACrB,MAAM,EAAa;IACnB,MAAM,EAAa;IACnB,SAAS,EAAS;IACnB;AAOD,UALA,EAAO,SAAS,EAAW,EAE3B,EAAa,WAAW,QAAQ,SAChC,EAAa,sBAAsB,EAE5B;WACA,GAAO;AAMd,SALK,GAAa,KAChB,EAAa,WAAW,QAAQ,SAChC,EAAa,iBAAiB,QAC5B,aAAiB,QAAQ,EAAM,UAAU,gBAEvC;YACE;AACR,GAAK,GAAa,KAChB,EAAa,gBAAgB,QAAQ;;;AAK3C,QAAO;EAAE;EAAgB;EAAc;EAAc;;;;AC9EvD,SAAgB,GACd,GACwB;CACxB,IAAM,IAAY,EAAI,GAAM,EACxB,IAAqD,MAEnD,IAAe,QACb,EAAK,WAAW,OAAO,eAAe,iBAAiB,GAC9D,EAEK,IAAiB,QACrB,EAAa,QACT,EAAK,OAAO,MAAM,QAAQ,MAAM,EAAE,aAAa,QAAQ,GACvD,EAAE,CACP,EAEK,IAAc,QAAe,EAAe,MAAM,SAAS,EAAE;CAEnE,eAAe,EACb,GACkB;AAOlB,SANK,EAAY,SAIjB,IAAU,GACV,EAAU,QAAQ,IACX,OALL,MAAM,GAAK,EACJ;;CAOX,eAAe,IAAgC;EAC7C,IAAM,IAAM;AAGZ,EAFA,IAAU,MACV,EAAU,QAAQ,IACd,KACF,MAAM,GAAK;;CAIf,SAAS,IAAe;AAEtB,EADA,IAAU,MACV,EAAU,QAAQ;;AAGpB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD;;;;;;;;;;;;EClFH,IAAM,IAAO,GAKP,EAAE,GAAG,MAAW,GAAoB;yBAIxC,EAuEa,GAAA;GAtEX,sBAAmB;GACnB,sBAAmB;GACnB,oBAAiB;GACjB,kBAAe;;oBAkET,CA/DE,EAAA,QAAA,GAAA,EADR,EAgEM,OAAA;;IA9DJ,MAAK;IACL,cAAW;IACV,cAAY,EAAA,EAAM,CAAC,SAAS;IAC7B,OAAM;IACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,SAAA,EAAA,CAAA,OAAA,CAAA;OAEjB,EAuDM,OAvDN,IAuDM;IApDJ,EAWS,UAXT,IAWS,CAVP,EAIE,EAAA,EAAA,EAAA;KAHC,MAAM;KACN,gBAAc;KACf,OAAM;QAER,EAIK,MAJL,IAIK,EADA,EAAA,EAAM,CAAC,SAAS,MAAK,EAAA,EAAA,CAAA,CAAA;IAI5B,EAEI,KAFJ,IAEI,EADC,EAAA,EAAM,CAAC,SAAS,KAAI,EAAA,EAAA;IAGzB,EAiBK,MAjBL,IAiBK,EAAA,EAAA,GAAA,EAdH,EAaK,GAAA,MAAA,EAZa,EAAA,SAAT,YADT,EAaK,MAAA;KAXF,KAAG,GAAK,EAAM,OAAM,GAAI,EAAM,WAAO;KACtC,OAAM;QAEN,EAEO,QAFP,IAEO,EADF,EAAM,QAAO,EAAA,EAAA,EAElB,EAIO,QAJP,IAIO,EADF,EAAM,OAAM,EAAA,EAAA,CAAA,CAAA;IAKrB,EAeS,UAfT,IAeS,CAdP,EAMS,UAAA;KALP,MAAK;KACL,OAAM;KACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;SAET,EAAA,EAAM,CAAC,SAAS,OAAM,EAAA,EAAA,EAE3B,EAMS,UAAA;KALP,MAAK;KACL,OAAM;KACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,UAAA;SAET,EAAA,EAAM,CAAC,SAAS,QAAO,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EExDtC,IAAM,IAAkB,QAChB,OAAO,iCACd,EACK,IAAkB,QAChB,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CACd,EACK,IAAgB,QAA2B,OAAO,+BAAuB,EAqBzE,EAAE,GAAG,GAAQ,QAAQ,MAAgB,GAAoB;yBAI7D,EA6MS,UA7MT,IA6MS;GAlMP,EAcM,OAdN,IAcM,CAVI,EAAA,aAAa,cAAc,UAAK,oBAAA,GAAA,EADxC,EAUO,QAVP,IAUO,EALH,EAAA,EAAW,CAAC,EAAA,EAAM,CAAC,OAAO,eAAa;UAAsB,EAAA,aAAa,cAAc;SAAwB,EAAA,aAAa,cAAc;;GASjJ,EA4BM,OA5BN,IA4BM;IAzBJ,EAGE,IAAA;KAFC,UAAU,EAAA,OAAO,MAAM;KACvB,UAAQ,EAAA,OAAO;;IAElB,EAGE,IAAA;KAFC,aAAW,EAAA,OAAO,MAAM;KACxB,UAAQ,EAAA,OAAO;;IAElB,EAGE,IAAA;KAFC,gBAAc,EAAA,OAAO,MAAM;KAC3B,UAAQ,EAAA,OAAO;;IAGV,EAAA,iBAAiB,EAAA,0BAAA,GAAA,EADzB,EAIE,EAAA,EAAA,EAAA;;KAFC,eAAe,EAAA,cAAc,cAAc;KAC3C,gBAAc,EAAA,UAAU,YAAY;;IAG/B,EAAA,gBAAgB,wBAAwB,SAAA,GAAA,EADhD,EAOE,EAAA,EAAA,EAAA;;KALC,WAAW,EAAA,gBAAgB,yBAAyB;KACpD,cAAY,EAAA,gBAAgB,yBAAyB;KACrD,gBAAc,EAAA,gBAAgB,2BAA2B;KACzD,QAAM,EAAA,gBAAgB;KACtB,YAAU,EAAA,gBAAgB;;;;;;;;;GAK/B,EAiJM,OAjJN,IAiJM;IA5II,EAAA,aAAa,WAAW,UAAK,WAAA,GAAA,EADrC,EAQM,OAAA;;KANJ,aAAU;KACV,OAAM;KACL,gBAAc,EAAA,aAAa,iBAAiB;QAE7C,EAA8C,EAAA,EAAA,EAAA;KAAhC,MAAM;KAAK,gBAAc;UAAO,MAC9C,EAAG,EAAA,EAAM,CAAC,OAAO,WAAU,EAAA,EAAA,CAAA,EAAA,GAAA,GAAA,IAGhB,EAAA,aAAa,WAAW,UAAK,WAAA,GAAA,EAD1C,EAOM,OAPN,IAOM,CAFJ,EAAwC,EAAA,EAAA,EAAA;KAAhC,MAAM;KAAK,gBAAc;UAAO,MACxC,EAAG,EAAA,EAAM,CAAC,OAAO,MAAK,EAAA,EAAA,CAAA,CAAA,IAGX,EAAA,OAAO,MAAM,WAAA,GAAA,EAD1B,EASM,OATN,IASM,CAAA,AAAA,EAAA,OAJJ,EAEQ,QAAA,EADN,OAAM,uEAAqE,EAAA,MAAA,GAAA,EAAA,EACrE,MACR,EAAG,EAAA,EAAM,CAAC,OAAO,QAAO,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAKP,EAAA,iBAAiB,UAAU,SAAmB,EAAA,aAAa,iBAAiB,SAAA,GAAA,EAD/F,EAkCS,UAAA;;KA7BN,cAAuB,EAAA,iBAAiB,gBAAgB,QAAK,IAAA,GAAsB,EAAA,EAAM,CAAC,SAAS,OAAM,IAAK,EAAA,iBAAiB,gBAAgB,MAAK,KAAkB,EAAA,EAAM,CAAC,SAAS;KAKtL,iBAAe,EAAA,WAAW,aAAa;KACvC,OAAK,EAAE,EAAA,EAAc,CAAA;KACrB,OAAK,EAAA;uBAA+B,EAAA,WAAW,aAAa,QAAA,uBAAA;aAAuF,EAAA,WAAW,aAAa,QAAA,kBAAA;;;KAS3K,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,aAAa,QAAK,CAAI,EAAA,WAAW,aAAa;;KAEjE,EAA8C,EAAA,GAAA,EAAA;MAA9B,MAAM;MAAK,gBAAc;;OAAK,MAC9C,EAAG,EAAA,EAAM,CAAC,SAAS,OAAM,GAAG,KAC5B,EAAA;KACqB,EAAA,iBAAiB,gBAAgB,QAAK,KAAA,CAAqB,EAAA,WAAW,aAAa,SAAA,GAAA,EADxG,EAQO,QARP,IAQO,EADF,EAAA,iBAAiB,gBAAgB,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;;IAM1B,EAAA,aAAa,mBAAmB,SAAmB,EAAA,aAAa,iBAAiB,SAAA,GAAA,EADpG,EAuCM,OAAA;;KAlCH,MAAM,MAAQ,EAAA,WAAW,UAAU,QAAQ;KAC5C,OAAM;QAEN,EAYS,UAAA;KAXN,iBAAe,EAAA,WAAW,WAAW;KACtC,OAAK,EAAA,CAAC,wNACe,EAAA,WAAW,eAAe,QAAA,uBAAA,mBAAA,CAAA;KAK9C,SAAK,AAAA,EAAA,OAAA,GAAA,GAAA,MAAO,EAAA,WAAW,gBAAX,EAAA,WAAW,aAAY,GAAA,EAAA,EAAA,CAAA,OAAA,CAAA;QAEpC,EAAiE,EAAA,EAAA,EAAA;KAAtD,MAAM;KAAK,gBAAc;KAAG,OAAM;UAAoB,MACjE,EAAG,EAAA,EAAM,CAAC,OAAO,OAAM,EAAA,EAAA,CAAA,EAAA,IAAA,GAAA,EAEzB,EAiBa,GAAA;KAhBX,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACf,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;;sBAUT,CAPE,EAAA,WAAW,WAAW,SAAA,GAAA,EAD9B,EAQM,OARN,IAQM,CAJJ,EAGE,EAAA,EAAA,EAAA;MAFC,kBAAgB,EAAA,WAAW,gBAAgB;MAC3C,UAAQ,EAAA,WAAW;;;;IAQpB,EAAA,UAAU,UAAU,SAAS,EAAA,aAAa,iBAAiB,SAAA,GAAA,EADnE,EAgBS,UAAA;;KAdN,OAAK,EAAE,EAAA,EAAc,CAAA;KACtB,OAAA;MAAA,oBAAA;MAAA,OAAA;MAAA,gBAAA;MAIC;KACA,UAAqB,EAAA,UAAU,UAAU,SAAK,CAAK,EAAA,aAAa,iBAAiB;KAGjF,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,mBAAmB,QAAK;QAE9B,EAAA,UAAU,UAAU,cACjC,EAAwE,EAAA,EAAA,EAAA;;KAAnD,OAAM;KAAe,MAAM;KAAK,gBAAc;WADlC,GAAA,EAAjC,EAAuE,EAAA,EAAA,EAAA;;KAA9B,MAAM;KAAK,gBAAc;WACM,MACxE,EAAG,EAAA,EAAM,CAAC,UAAU,OAAM,EAAA,EAAA,CAAA,EAAA,IAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAI5B,EAaS,UAAA;KAZN,OAAK,EAAE,EAAA,EAAc,CAAA;KACtB,OAAA;MAAA,oBAAA;MAAA,OAAA;MAAA,gBAAA;MAIC;KACA,UAAU,EAAA;KACV,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,OAAA;QAEA,EAAA,iBACb,EAAwE,EAAA,EAAA,EAAA;;KAAnD,OAAM;KAAe,MAAM;KAAK,gBAAc;WADtD,GAAA,EAAb,EAAsD,EAAA,GAAA,EAAA;;KAA9B,MAAM;KAAK,gBAAc;WACuB,MACxE,EAAG,EAAA,WAAW,EAAA,EAAM,CAAC,OAAO,SAAS,EAAA,EAAM,CAAC,OAAO,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EEvP/D,IAAM,IAAgB,QAA2B,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CAAuB,EACzE,IAAkB,QAChB,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CACd,EACK,IAAyB,QACvB,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CACd,EACK,IAAuB,QACrB,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CACd,EACK,IAAiB,QACf,OAAO,0BAAA,MAAA,MAAA,EAAA,EAAA,CACd,EACK,IAAmB,QACjB,OAAO,kCACd,EACK,IAAqB,QACnB,OAAO,oCACd,EACK,IAAoB,EAAqB,aAEtC,MADS,OAAO,sBACd,kBACT,EAgBI,IAAO;EAYb,SAAS,EACP,GACA,GACA,GACM;AAGN,GAFA,EAAK,QAAQ,QAAQ,EACrB,EAAO,WAAW,EAAQ,EAC1B,EAAK,iBAAiB,OAAO;;EAG/B,SAAS,EACP,GACA,GACM;AACN,KAAK,iBAAiB,GAAK,EAAI;;EAOjC,IAAM,IAAkB,EAAoC,KAAK;EAGjE,SAAS,EAAsB,GAAuB;AACpD,KAAgB,OAAO,cAAc,EAAQ;;SAG/C,EAAa,EAAE,0BAAuB,CAAC;GAIrC,EAIE,EAAA,EAAA,EAAA;IAHC,SAAS,EAAA,WAAW,WAAW;IAC/B,aAAW,MAAuB,EAAa,GAAG,EAAA,MAAM,EAAA,OAAM;IAC9D,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,WAAW,QAAK;;GAGrC,EAGE,EAAA,EAAA,EAAA;IAFC,SAAS,EAAA,WAAW,iBAAiB;IACrC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,iBAAiB,QAAK;;GAG3C,EAKE,EAAA,EAAA,EAAA;IAJC,SAAS,EAAA,WAAW,oBAAoB;IACxC,uBAAqB,EAAA,OAAO,QAAQ,MAAM,OAAO,SAAM;IACvD,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,oBAAoB,QAAK;IAC3C,SAAK,AAAA,EAAA,QAAG,MAAuB,EAAa,GAAG,EAAA,MAAM,EAAA,OAAM;;GAG9D,EAIE,EAAA,EAAA,EAAA;aAHI;IAAJ,KAAI;IACH,SAAS,EAAA,WAAW,aAAa;IACjC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,aAAa,QAAK;;GAGvC,EAOE,EAAA,EAAA,EAAA;IANC,SAAS,EAAA,WAAW,mBAAmB;IACvC,kBAAgB,EAAA,UAAU,cAAc;IACxC,cAAY,EAAA,UAAU,UAAU;IAChC,OAAO,EAAA,UAAU,MAAM;IACvB,QAAI,AAAA,EAAA,QAAG,MAAsB,EAAI,mBAAoB,EAAS;IAC9D,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,WAAW,mBAAmB,QAAK;;;;;;;GAI9B,EAAA,mBAAmB,WAAU,gBAAA,IAAqB,EAAA,OAAO,YAAO,MAAA,GAAA,EAD/E,EAWE,EAAA,EAAA,EAAA;;IAPC,SAAS,EAAA;IACT,yBAAuB,EAAA;IACvB,SAAK,AAAA,EAAA,QAAA,MAAA;AAA2D,KAAlD,EAAI,+BAAA,GAAA,EAA8C,EAAI,uCAAA,KAAA;;IAIpE,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,qBAAqB,aAAW;;GAI3B,EAAA,mBAAmB,WAAU,gBAAA,IAAqB,EAAA,OAAO,YAAO,MAAA,GAAA,EAD/E,EAOE,EAAA,EAAA,EAAA;;IAHC,SAAS,EAAA;IACT,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,iCAAA,GAAA;IACX,UAAQ;;GAGX,EAKE,EAAA,EAAA,EAAA;IAJC,SAAS,EAAA,WAAW,iBAAiB;IACrC,QAAQ,EAAA,WAAW,mBAAmB;IACtC,UAAQ,EAAA,SAAS;IACjB,SAAO,EAAA,SAAS;;;;;;;;;;;;;;;;mBEpJX,EAAA,WAAA,GAAA,EADR,EA+EM,OA/EN,IA+EM,CAAA,AAAA,EAAA,OAAA,EAAA,ybAAA,EAAA,EA1DJ,EAyDM,OAzDN,IAyDM,CAvDJ,EAQM,OARN,IAQM,EAAA,GAAA,EALJ,EAIO,GAAA,MAAA,EAHO,IAAL,MADT,EAIO,OAAA;GAFJ,KAAK;GACN,OAAM;;;;;;;;;;;;;;;EE3BhB,IAAM,IAAO,GAIP,EAAE,GAAG,MAAW,GAAoB;EAE1C,SAAS,EAAgB,GAAsB;AAU7C,UARE,oBAAoB,KACnB,EAAsC,iBAEhC,EAAO,MAAM,aAElB,gBAAgB,KAAU,EAAkC,aACvD,EAAO,MAAM,mBAEf,EAAO,MAAM;;EAGtB,SAAS,EAAgB,GAAuB;AAC9C,UACE,gBAAgB,KAAS,CAAC,CAAE,EAAkC;;mBAOxD,EAAA,WAAW,EAAA,SAAA,GAAA,EADnB,EA+BM,OA/BN,IA+BM;GA1BJ,EAQM,OARN,IAQM,CALJ,EAIE,EAAA,EAAA,EAAA;IAHC,MAAM;IACN,gBAAc;IACf,OAAM;;GAGV,EASM,OATN,IASM,CANJ,EAEK,MAFL,IAEK,EADA,EAAA,EAAM,CAAC,MAAM,MAAK,EAAA,EAAA,EAEvB,EAEI,KAFJ,IAEI,EADC,EAAgB,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,CAAA;GAInB,EAAgB,EAAA,MAAK,GAIP,EAAA,IAAA,GAAA,IAJO,GAAA,EAD9B,EAMS,UAAA;;IAJP,OAAM;IACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,QAAA;QAET,EAAA,EAAM,CAAC,MAAM,MAAK,EAAA,EAAA;;;;;;;;;;;EEzD3B,IAAM,IAAO,GAKP,EAAE,GAAG,MAAW,GAAoB;mBAKhC,EAAA,WAAA,GAAA,EADR,EA6BM,OA7BN,IA6BM,CAzBJ,EASM,OATN,IASM,CANJ,EAIE,EAAA,GAAA,EAAA;GAHC,MAAM;GACN,gBAAc;GACf,OAAM;MAER,EAAiD,QAAA,MAAA,EAAxC,EAAA,EAAM,CAAC,gBAAgB,QAAO,EAAA,EAAA,CAAA,CAAA,EAEzC,EAcM,OAdN,IAcM,CAbJ,EAMS,UAAA;GALP,OAAM;GACN,OAAA,EAAA,oBAAA,eAAqC;GACpC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,SAAA;OAET,EAAA,EAAM,CAAC,gBAAgB,OAAM,EAAA,EAAA,EAElC,EAKS,UAAA;GAJP,OAAM;GACL,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,UAAA;OAET,EAAA,EAAM,CAAC,gBAAgB,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;;;;;;;;;;;;;;;;EEpCzC,IAAM,EAAE,MAAM,GAAS;mBAKb,EAAA,WAAA,GAAA,EADR,EAYM,OAZN,IAYM,EADD,EAAA,EAAC,CAAC,QAAQ,cAAa,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;;;;;;;;;;;;EES9B,IAAM,IAAQ;AAOd,IAAQ,GAAwB,EAAM,kBAAkB;EACxD,IAAM,IAAO,GAMP,IAAiB,EAEb,KAAK,EAET,IAAO,GAAuB;GAClC,QAAQ,EAAM;GACd,cAAc,EAAM;GACpB,cAAc,EAAM;GACpB;GACA,0BACE,EAAe,QACX,EAAE,eAAe,EAAe,MAAM,uBAAsB,GAC5D;GACP,CAAC,EAGI,EACJ,mBACA,gBACA,cACA,uBACA,cACA,kBACA,2BACA,WACA,SACA,iBACA,cACA,aACA,cACA,sBACA,yBACA,eACA,oBACA,mBACA,yBACA,2BACA,iCACA,sBACA,mBACE;EAMJ,eAAe,GAAoB,GAAkC;AACnE,OAAI;AAEF,IADA,MAAM,EAAU,cAAc,EAAU,EACxC,EAAW,mBAAmB,QAAQ;WAChC;;EASV,SAAS,EACP,GACA,GACM;AACN,QAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,QAAQ,KAAK;IAC9C,IAAM,IAAS,EAAW,EAAO,QAAQ,GAAG,EACtC,IAAW,MAAgB,KAAA,IAA8B,KAAA,IAAlB,IAAc;AAC3D,MAAO,SAAS,GAAQ,KAAA,GAAW,KAAA,GAAW,EAAS;;AAEzD,KAAuB,QAAQ;;EAOjC,IAAM,IAAY,GAAkB;GAClC,QAAQ,EAAM;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,aAAa,EAAK;GACnB,CAAC,EAGI,IAAW,GAAiB;GAChC,QAAQ,EAAK,oBAAoB,EAAK,kBAAkB,SAAS,EAAI,EAAE,CAAC;GACxE,YAAY,EAAmB;GAChC,CAAC;EAEF,eAAe,IAA2B;AACxC,SAAM,EAAS,iBACb,EAAU,cAAc,CAAC,OAAO,MAAe,EAAM,OAAO,UAAU,EAAI,CAAC,CAC5E;;SAKH,EAAK,WAAW,QAAQ,GAMxB,QAAgB;AACd,KAAK,YAAY;IACjB,EAEF,QAAkB;AAChB,KAAK,SAAS;IACd,EAMF,EAAa;GACX,kBAAkB,EAAO,QAAQ;GACjC,aAAa,MAA6B,EAAO,WAAW,EAAQ;GACpE,UAAU;GACS;GACnB,QAAQ,EAAU;GAClB,MAAM,EAAU;GAChB,MAAM,EAAU;GAChB,eAAe,EAAU;GAC1B,CAAC,kBAIA,EA0MM,OAAA;GAzMJ,OAAK,EAAA,CAAC,mDAAiD,EAAA,YACjC,EAAA,EAAM,CAAC,MAAM,UAAQ,CAAA,CAAA;GAC1C,kBAAgB,EAAA,EAAI,CAAC,cAAc;GACnC,OAAK,EAAE,EAAA,EAAI,CAAC,YAAY,MAAK;;GAG9B,EAWa,GAAA;IAVX,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;qBAIb,CAFF,EAEE,IAAA,EADC,SAAS,EAAA,EAAc,IAAI,EAAA,EAAM,CAAC,MAAM,WAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;;GAK7C,EAaa,GAAA;IAZX,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;qBAMb,CAJF,EAIE,IAAA;KAHC,OAAO,EAAA,EAAS;KAChB,SAAO,CAAA,CAAI,EAAA,EAAS,IAAA,CAAK,EAAA,EAAc;KACvC,SAAO,EAAA,EAAI,CAAC;;;;;;;;GAIjB,EAkBE,IAAA;IAjBC,QAAQ,EAAA,EAAM;IACd,MAAM,EAAA,EAAI;IACV,iBAAe,EAAA,EAAY;IAC3B,eAAa,EAAA,EAAU;IACvB,oBAAkB,EAAA,EAAe;IACjC,qBAAmB,EAAA,GAAgB;IACnC,cAAY,EAAA,EAAS;IACrB,WAAW,EAAA,EAAS;IACpB,eAAe,EAAA,EAAa;IAC5B,4BAA0B,EAAA,EAAsB;IAChD,aAAW,EAAA,EAAM,CAAC,MAAM,YAAY,EAAA,EAAY,CAAC,gBAAgB;IACjE,oBAA2B,EAAA,EAAM,CAAC,MAAM,YAAoB,EAAA,EAAY,CAAC,gBAAgB,SAAA,CAAkB,EAAA,EAAM,CAAC,MAAM;IAKxH,QAAM;;;;;;;;;;;;;;;GAGT,EAKE,IAAA;IAJC,MAAM,EAAA,EAAQ,CAAC,UAAU;IACzB,QAAQ,EAAA,EAAQ,CAAC,eAAe;IAChC,UAAQ,EAAA,EAAQ,CAAC;IACjB,WAAS,EAAA,EAAQ,CAAC;;;;;;;GAIrB,EAIE,IAAA;IAHC,SAAS,EAAA,EAAe,CAAC,qBAAqB;IAC9C,UAAQ,EAAA,EAAe,CAAC;IACxB,WAAS,EAAA,EAAe,CAAC;;;;;;GAI5B,EAWa,GAAA;IAVX,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;qBAIb,CAFF,EAEE,IAAA,EADC,SAAS,EAAA,GAAa,CAAC,yBAAyB,OAAA,EAAA,MAAA,GAAA,CAAA,UAAA,CAAA,CAAA,CAAA;;;KAKrD,EAA8C,IAAA,MAAA,MAAA,IAAA,EAAA,CAAA,CAAA,GAAA,CAA5B,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;GAG1C,EAiDM,OAAA;IAhDJ,OAAK,EAAA,CAAC,wDAAsD,CAK1C,EAAA,EAAM,CAAC,MAAM,cAAA,2BAA6D,EAAA,EAAU,CAAC,eAAe,QAAA,kCAAA,iCAA2G,EAAA,EAAe,CAAC,qBAAqB,QAAA,oBAAA,aAAA,CAAA,CAAA;IAJtQ,OAAA;KAAA,YAAA;KAAA,oBAAA;KAGC;OAaD,EAiBM,OAjBN,IAiBM,CAhBJ,EAea,GAAA,EAfD,MAAK,mBAAiB,EAAA;qBAcvB,CAZD,EAAA,EAAI,CAAC,iBAAiB,gBAAgB,SAAA,GAAA,EAD9C,EAaS,UAAA;;KAXP,OAAM;KACN,OAAA;MAAA,oBAAA;MAAA,OAAA;MAAA,gBAAA;MAAA,mBAAA;MAKC;KACA,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,EAAI,CAAC,iBAAiB,OAAK;QAEnC,EAA0C,EAAA,GAAA,EAAA;KAA9B,MAAM;KAAK,gBAAc;UAAK,MAC1C,EAAG,EAAA,EAAI,CAAC,EAAE,cAAc,oBAAmB,EAAA,EAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA;;SAIjD,EAYO,QAZP,IAYO,CAXL,EAUE,IAAA;IATC,UAAU,EAAA,EAAM,CAAC,MAAM;IACvB,SAAS,EAAA,EAAM,CAAC,QAAQ;IACxB,qBAAmB,EAAA,EAAM,CAAC,MAAM;IAChC,aAAW,EAAA,EAAM,CAAC,MAAM;IACxB,gBAAc,EAAA,EAAM,CAAC,MAAM;IAC3B,iBAAe,EAAA,EAAa,EAAE,aAAa,SAAS,KAAA;IACpD,eAAc,EAAA,EAAM,CAAC;IACrB,cAAY,AAAA,EAAA,QAAA,MAAE,EAAA,EAAU,CAAC,WAAW,QAAK;IACzC,uBAAqB,AAAA,EAAA,QAAA,MAAE,EAAA,EAAU,CAAC,oBAAoB,QAAK;;;;;;;;;;GAM1D,EAAA,OAAO,aAAQ,MAAA,CAAe,EAAA,EAAY,CAAC,eAAe,SAAA,GAAA,EADlE,EASE,IAAA;;IAPC,kBAAc,CAAY,EAAA,EAAM,CAAC,MAAM,cAAA,2BAA6D,EAAA,EAAU,CAAC,eAAe,QAAA,kCAAA,gCAAA;;GAUjI,EAQM,OAAA;IAPJ,OAAM;IACN,MAAK;IACL,aAAU;IACV,eAAY;IACX,cAAY,EAAA,EAAI,CAAC,EAAE,UAAU;QAE3B,EAAA,EAAI,CAAC,gBAAgB,aAAa,MAAK,EAAA,GAAA,GAAA;KAI5C,EAeE,IAAA;IAbC,kBAAgB,EAAA,EAAM,CAAC,cAAc;IACrC,UAAU,EAAA,EAAM,CAAC,QAAQ,MAAM;IAC/B,gBAAc,EAAA,EAAU,CAAC,eAAe;IACxC,eAAY,AAAA,EAAA,QAAY,MAAY,EAAA,EAAM,CAAC,YAAY,EAAA,EAAM,CAAC,cAAc,MAAO,IAAI,EAAO;IAG9F,eAAY,AAAA,EAAA,QAAA,MAAW,EAAA,EAAI,CAAC,aAAa,YAAY,EAAA,EAAM,CAAC,cAAc,MAAO,GAAE;IAGnF,kBAAe,AAAA,EAAA,QAAA,MAAW,EAAA,EAAI,CAAC,aAAa,eAAe,EAAA,EAAM,CAAC,cAAc,MAAK;IAGrF,kBAAiB,EAAA,EAAM,CAAC;;;;;;aAbhB,EAAA,EAAM,CAAC,MAAM,YAAW,CAAA,CAAA;IAkB1B,EAAA,EAAc,IAAI,EAAA,EAAW,IAAA,GAAA,EADtC,EAqBE,IAAA;;aAnBI;IAAJ,KAAI;IACH,QAAQ,EAAM;IACd,QAAQ,EAAA,EAAM;IACd,MAAM,EAAA,EAAI;IACV,eAAa,EAAA,EAAU;IACvB,wBAAsB,EAAA,EAAkB;IACxC,cAAY,EAAA,EAAS;IACrB,aAAW,EAAA,GAAQ;IACnB,0BAAwB,EAAA,EAAoB;IAC5C,2BAAyB,EAAA,EAAoB;IAC7C,qCAAmC,EAAA,EAA4B;IAC/D,6BAA2B,EAAA,EAAsB;IACjD,iCAA8B,AAAA,EAAA,QAAA,MAAE,EAAA,QAAuB;IACvD,yCAAwC,AAAA,EAAA,QAAA,MAAW,EAAA,QAA+B;IAGlF,mCAAgC,AAAA,EAAA,QAAA,MAAE,EAAA,QAAyB;IAC3D,iBAAiB;IACjB,gBAAe"}

package/dist/cdn/chunks/CollaboratorBar--nO7TX6b.js

@@ -0,0 +1,51 @@
+import { F as e, N as t, S as n, _ as r, at as i, ct as a, d as o, g as s, h as c, lt as l, m as u, p as d } from "./draggable-Bcb86AsV.js";
+import { $ as f } from "./features-DEMb13KS.js";
+import { n as p, r as m } from "./icons-CsLTcirh.js";
+import { t as h } from "./readableTextColor-DhoK4XiZ.js";
+//#region src/cloud/components/CollaboratorBar.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2" }, _ = ["title"], v = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:-space-x-1.5"
+}, y = ["title"], b = ["title"], x = 3, S = /* @__PURE__ */ n({
+	__name: "CollaboratorBar",
+	props: {
+		collaborators: {},
+		isConnected: { type: Boolean }
+	},
+	setup(n) {
+		let S = n, { t: C } = f(), w = d(() => S.collaborators.slice(0, x)), T = d(() => S.collaborators.slice(x)), E = d(() => T.value.length), D = d(() => T.value.map((e) => e.name).join("\n"));
+		function O(e) {
+			let t = e.trim().split(/\s+/);
+			return t.length >= 2 ? (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase() : e.charAt(0).toUpperCase();
+		}
+		return (d, f) => (t(), r("div", g, [u("div", {
+			class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]",
+			style: a({ color: n.isConnected ? "var(--tpl-success)" : "var(--tpl-text-muted)" }),
+			title: n.isConnected ? i(C).collaboration.connected : i(C).collaboration.disconnected
+		}, [n.isConnected ? (t(), c(i(p), {
+			key: 0,
+			size: 12,
+			"stroke-width": 2
+		})) : (t(), c(i(m), {
+			key: 1,
+			size: 12,
+			"stroke-width": 2
+		}))], 12, _), n.collaborators.length > 0 ? (t(), r("div", v, [(t(!0), r(o, null, e(w.value, (e) => (t(), r("div", {
+			key: e.id,
+			class: "tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]",
+			style: a({
+				backgroundColor: e.color,
+				color: i(h)(e.color)
+			}),
+			title: e.name
+		}, l(O(e.name)), 13, y))), 128)), E.value > 0 ? (t(), r("div", {
+			key: 0,
+			class: "tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]",
+			title: D.value
+		}, " +" + l(E.value), 9, b)) : s("", !0)])) : s("", !0)]));
+	}
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=CollaboratorBar--nO7TX6b.js.map

package/dist/cdn/chunks/CollaboratorBar--nO7TX6b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollaboratorBar--nO7TX6b.js","names":[],"sources":["../../../src/cloud/components/CollaboratorBar.vue","../../../src/cloud/components/CollaboratorBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { Collaborator } from \"@templatical/types\";\nimport { useCloudI18nStrict } from \"../../composables\";\nimport { Wifi, WifiOff } from \"@lucide/vue\";\nimport { computed } from \"vue\";\nimport { readableTextColor } from \"../../utils/readableTextColor\";\n\nconst props = defineProps<{\n  collaborators: Collaborator[];\n  isConnected: boolean;\n}>();\n\nconst { t: cloudT } = useCloudI18nStrict();\n\nconst maxVisible = 3;\n\nconst visibleCollaborators = computed(() =>\n  props.collaborators.slice(0, maxVisible),\n);\n\nconst overflowCollaborators = computed(() =>\n  props.collaborators.slice(maxVisible),\n);\n\nconst overflowCount = computed(() => overflowCollaborators.value.length);\n\nconst overflowNames = computed(() =>\n  overflowCollaborators.value.map((c) => c.name).join(\"\\n\"),\n);\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length >= 2) {\n    return (\n      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n    ).toUpperCase();\n  }\n  return name.charAt(0).toUpperCase();\n}\n</script>\n\n<template>\n  <div class=\"tpl-collaborator-bar tpl:flex tpl:items-center tpl:gap-2\">\n    <!-- Connection indicator -->\n    <div\n      class=\"tpl:flex tpl:items-center tpl:gap-1 tpl:text-[11px]\"\n      :style=\"{\n        color: isConnected ? 'var(--tpl-success)' : 'var(--tpl-text-muted)',\n      }\"\n      :title=\"\n        isConnected\n          ? cloudT.collaboration.connected\n          : cloudT.collaboration.disconnected\n      \"\n    >\n      <Wifi v-if=\"isConnected\" :size=\"12\" :stroke-width=\"2\" />\n      <WifiOff v-else :size=\"12\" :stroke-width=\"2\" />\n    </div>\n\n    <!-- Avatar stack -->\n    <div\n      v-if=\"collaborators.length > 0\"\n      class=\"tpl:flex tpl:items-center tpl:-space-x-1.5\"\n    >\n      <div\n        v-for=\"collaborator in visibleCollaborators\"\n        :key=\"collaborator.id\"\n        class=\"tpl-collaborator-avatar tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[10px] tpl:font-bold tpl:transition-transform tpl:duration-150 tpl:hover:z-10 tpl:hover:scale-110 tpl:border-[var(--tpl-bg)]\"\n        :style=\"{\n          backgroundColor: collaborator.color,\n          color: readableTextColor(collaborator.color),\n        }\"\n        :title=\"collaborator.name\"\n      >\n        {{ getInitials(collaborator.name) }}\n      </div>\n      <div\n        v-if=\"overflowCount > 0\"\n        class=\"tpl:relative tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-2 tpl:text-[9px] tpl:font-bold tpl:border-[var(--tpl-bg)] tpl:bg-[var(--tpl-bg-hover)] tpl:text-[var(--tpl-text-muted)]\"\n        :title=\"overflowNames\"\n      >\n        +{{ overflowCount }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;iCAcM,IAAa;;;;;;;EAPnB,IAAM,IAAQ,GAKR,EAAE,GAAG,MAAW,GAAoB,EAIpC,IAAuB,QAC3B,EAAM,cAAc,MAAM,GAAG,EAAW,CACzC,EAEK,IAAwB,QAC5B,EAAM,cAAc,MAAM,EAAW,CACtC,EAEK,IAAgB,QAAe,EAAsB,MAAM,OAAO,EAElE,IAAgB,QACpB,EAAsB,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,CAC1D;EAED,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAQ,EAAK,MAAM,CAAC,MAAM,MAAM;AAMtC,UALI,EAAM,UAAU,KAEhB,EAAM,GAAG,OAAO,EAAE,GAAG,EAAM,EAAM,SAAS,GAAG,OAAO,EAAC,EACrD,aAAa,GAEV,EAAK,OAAO,EAAE,CAAC,aAAa;;yBAKnC,EA0CM,OA1CN,GA0CM,CAxCJ,EAaM,OAAA;GAZJ,OAAM;GACL,OAAK,EAAA,EAAA,OAAmB,EAAA,cAAW,uBAAA,yBAAA,CAAA;GAGnC,OAAgB,EAAA,cAAwB,EAAA,EAAM,CAAC,cAAc,YAAsB,EAAA,EAAM,CAAC,cAAc;MAM7F,EAAA,eAAA,GAAA,EAAZ,EAAwD,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;cACnD,EAA+C,EAAA,EAAA,EAAA;;GAA9B,MAAM;GAAK,gBAAc;gBAKpC,EAAA,cAAc,SAAM,KAAA,GAAA,EAD5B,EAuBM,OAvBN,GAuBM,EAAA,EAAA,GAAA,EAnBJ,EAWM,GAAA,MAAA,EAVmB,EAAA,QAAhB,YADT,EAWM,OAAA;GATH,KAAK,EAAa;GACnB,OAAM;GACL,OAAK,EAAA;qBAA+B,EAAa;WAAwB,EAAA,EAAiB,CAAC,EAAa,MAAK;;GAI7G,OAAO,EAAa;OAElB,EAAY,EAAa,KAAI,CAAA,EAAA,IAAA,EAAA,WAG1B,EAAA,QAAa,KAAA,GAAA,EADrB,EAMM,OAAA;;GAJJ,OAAM;GACL,OAAO,EAAA;KACT,OACE,EAAG,EAAA,MAAa,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/cdn/chunks/CountdownBlock-5YdT1uUu.js

@@ -0,0 +1,93 @@
+import { r as e } from "./rolldown-runtime-BNuo_Jkg.js";
+import { $ as t, F as n, N as r, S as i, _ as a, at as o, ct as s, d as c, g as l, lt as u, m as d, p as f } from "./draggable-Bcb86AsV.js";
+import { Nt as p, cn as m } from "./features-DEMb13KS.js";
+//#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
+}, g = {
+	key: 1,
+	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50"
+}, _ = { class: "tpl:text-center" }, v = /* @__PURE__ */ i({
+	__name: "CountdownBlock",
+	props: {
+		block: {},
+		viewport: {}
+	},
+	setup(e) {
+		let i = e, { t: v } = p(), y = t(Date.now());
+		m(() => {
+			y.value = Date.now();
+		}, 1e3);
+		let b = f(() => {
+			if (!i.block.targetDate) return null;
+			let e = new Date(i.block.targetDate);
+			return isNaN(e.getTime()) ? null : e.getTime();
+		}), x = f(() => b.value ? y.value >= b.value : !1), S = f(() => {
+			if (!b.value || x.value) return {
+				days: 0,
+				hours: 0,
+				minutes: 0,
+				seconds: 0
+			};
+			let e = b.value - y.value, t = Math.floor(e / 1e3);
+			return {
+				days: Math.floor(t / 86400),
+				hours: Math.floor(t % 86400 / 3600),
+				minutes: Math.floor(t % 3600 / 60),
+				seconds: t % 60
+			};
+		}), C = f(() => {
+			let e = [];
+			return i.block.showDays && e.push({
+				value: String(S.value.days).padStart(2, "0"),
+				label: i.block.labelDays
+			}), i.block.showHours && e.push({
+				value: String(S.value.hours).padStart(2, "0"),
+				label: i.block.labelHours
+			}), i.block.showMinutes && e.push({
+				value: String(S.value.minutes).padStart(2, "0"),
+				label: i.block.labelMinutes
+			}), i.block.showSeconds && e.push({
+				value: String(S.value.seconds).padStart(2, "0"),
+				label: i.block.labelSeconds
+			}), e;
+		}), w = f(() => ({
+			backgroundColor: i.block.backgroundColor,
+			fontFamily: i.block.fontFamily || "inherit"
+		})), T = f(() => ({
+			fontSize: `${i.block.digitFontSize}px`,
+			fontWeight: "bold",
+			color: i.block.digitColor,
+			lineHeight: "1.2"
+		})), E = f(() => ({
+			fontSize: `${i.block.labelFontSize}px`,
+			color: i.block.labelColor,
+			marginTop: "4px"
+		})), D = f(() => ({
+			fontSize: `${i.block.digitFontSize}px`,
+			color: i.block.digitColor,
+			fontFamily: i.block.fontFamily || "inherit"
+		}));
+		return (t, i) => e.block.targetDate ? x.value && e.block.hideOnExpiry ? (r(), a("div", g, u(o(v).countdown.hidden), 1)) : x.value ? (r(), a("div", {
+			key: 2,
+			style: s(w.value),
+			class: "tpl:py-4 tpl:text-center"
+		}, [d("span", { style: s({
+			fontSize: `${e.block.digitFontSize}px`,
+			color: e.block.digitColor
+		}) }, u(e.block.expiredMessage), 5)], 4)) : (r(), a("div", {
+			key: 3,
+			style: s(w.value),
+			class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4"
+		}, [(r(!0), a(c, null, n(C.value, (t, n) => (r(), a(c, { key: t.label }, [n > 0 ? (r(), a("span", {
+			key: 0,
+			style: s(D.value),
+			class: "tpl:self-start"
+		}, u(e.block.separator), 5)) : l("", !0), d("div", _, [d("div", { style: s(T.value) }, u(t.value), 5), d("div", { style: s(E.value) }, u(t.label), 5)])], 64))), 128))], 4)) : (r(), a("div", h, u(o(v).countdown.setDate), 1));
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };
+
+//# sourceMappingURL=CountdownBlock-5YdT1uUu.js.map

package/dist/cdn/chunks/CountdownBlock-5YdT1uUu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownBlock-5YdT1uUu.js","names":[],"sources":["../../../src/components/blocks/CountdownBlock.vue","../../../src/components/blocks/CountdownBlock.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type {\n  CountdownBlock as CountdownBlockType,\n  ViewportSize,\n} from \"@templatical/types\";\nimport { useIntervalFn } from \"@vueuse/core\";\nimport { computed, ref } from \"vue\";\nimport { useI18n } from \"../../composables/useI18n\";\n\nconst props = defineProps<{\n  block: CountdownBlockType;\n  viewport: ViewportSize;\n}>();\n\nconst { t } = useI18n();\n\nconst now = ref(Date.now());\nuseIntervalFn(() => {\n  now.value = Date.now();\n}, 1000);\n\nconst targetTime = computed(() => {\n  if (!props.block.targetDate) return null;\n  const date = new Date(props.block.targetDate);\n  return isNaN(date.getTime()) ? null : date.getTime();\n});\n\nconst isExpired = computed(() => {\n  if (!targetTime.value) return false;\n  return now.value >= targetTime.value;\n});\n\nconst remaining = computed(() => {\n  if (!targetTime.value || isExpired.value) {\n    return { days: 0, hours: 0, minutes: 0, seconds: 0 };\n  }\n  const diff = targetTime.value - now.value;\n  const totalSeconds = Math.floor(diff / 1000);\n  return {\n    days: Math.floor(totalSeconds / 86400),\n    hours: Math.floor((totalSeconds % 86400) / 3600),\n    minutes: Math.floor((totalSeconds % 3600) / 60),\n    seconds: totalSeconds % 60,\n  };\n});\n\nconst segments = computed(() => {\n  const result: Array<{ value: string; label: string }> = [];\n  if (props.block.showDays) {\n    result.push({\n      value: String(remaining.value.days).padStart(2, \"0\"),\n      label: props.block.labelDays,\n    });\n  }\n  if (props.block.showHours) {\n    result.push({\n      value: String(remaining.value.hours).padStart(2, \"0\"),\n      label: props.block.labelHours,\n    });\n  }\n  if (props.block.showMinutes) {\n    result.push({\n      value: String(remaining.value.minutes).padStart(2, \"0\"),\n      label: props.block.labelMinutes,\n    });\n  }\n  if (props.block.showSeconds) {\n    result.push({\n      value: String(remaining.value.seconds).padStart(2, \"0\"),\n      label: props.block.labelSeconds,\n    });\n  }\n  return result;\n});\n\nconst containerStyle = computed(() => ({\n  backgroundColor: props.block.backgroundColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n\nconst digitStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  fontWeight: \"bold\" as const,\n  color: props.block.digitColor,\n  lineHeight: \"1.2\",\n}));\n\nconst labelStyle = computed(() => ({\n  fontSize: `${props.block.labelFontSize}px`,\n  color: props.block.labelColor,\n  marginTop: \"4px\",\n}));\n\nconst separatorStyle = computed(() => ({\n  fontSize: `${props.block.digitFontSize}px`,\n  color: props.block.digitColor,\n  fontFamily: props.block.fontFamily || \"inherit\",\n}));\n</script>\n\n<template>\n  <!-- Empty state: no target date -->\n  <div\n    v-if=\"!block.targetDate\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]\"\n  >\n    {{ t.countdown.setDate }}\n  </div>\n\n  <!-- Expired + hidden -->\n  <div\n    v-else-if=\"isExpired && block.hideOnExpiry\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50\"\n  >\n    {{ t.countdown.hidden }}\n  </div>\n\n  <!-- Expired with message -->\n  <div\n    v-else-if=\"isExpired\"\n    :style=\"containerStyle\"\n    class=\"tpl:py-4 tpl:text-center\"\n  >\n    <span\n      :style=\"{\n        fontSize: `${block.digitFontSize}px`,\n        color: block.digitColor,\n      }\"\n    >\n      {{ block.expiredMessage }}\n    </span>\n  </div>\n\n  <!-- Active countdown -->\n  <div\n    v-else\n    :style=\"containerStyle\"\n    class=\"tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4\"\n  >\n    <template v-for=\"(segment, index) in segments\" :key=\"segment.label\">\n      <span v-if=\"index > 0\" :style=\"separatorStyle\" class=\"tpl:self-start\">\n        {{ block.separator }}\n      </span>\n      <div class=\"tpl:text-center\">\n        <div :style=\"digitStyle\">{{ segment.value }}</div>\n        <div :style=\"labelStyle\">{{ segment.label }}</div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}