From bb628a7c0da56c73aabf0491862e865aad697666 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Mon, 23 Feb 2026 18:48:34 +0700
Subject: [PATCH] feat(calendar-lab): switch demo route to tldraw canvas
 preview

---
 .../lab/CrmCalendarZoomTldrawLab.client.vue   | 63 +++++++++++++++++++
 frontend/app/pages/calendar-zoom-lab.vue      |  4 +-
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue

diff --git a/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue b/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue
new file mode 100644
index 0000000..9242fe7
--- /dev/null
+++ b/frontend/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const tldrawUrl = "https://www.tldraw.com";
+</script>
+
+<template>
+  <section class="tldraw-lab-root">
+    <div class="tldraw-lab-toolbar">
+      <p class="tldraw-lab-title">tldraw demo (infinite canvas)</p>
+      <a
+        class="btn btn-xs btn-outline"
+        :href="tldrawUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Open in new tab
+      </a>
+    </div>
+
+    <iframe
+      class="tldraw-lab-frame"
+      :src="tldrawUrl"
+      title="tldraw demo"
+      loading="lazy"
+      referrerpolicy="no-referrer"
+      allowfullscreen
+    />
+  </section>
+</template>
+
+<style scoped>
+.tldraw-lab-root {
+  height: calc(100dvh - 1rem);
+  min-height: 640px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: color-mix(in oklab, var(--color-base-100) 95%, transparent);
+}
+
+.tldraw-lab-toolbar {
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 10px;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
+  background: color-mix(in oklab, var(--color-base-100) 94%, transparent);
+}
+
+.tldraw-lab-title {
+  font-size: 0.78rem;
+  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+}
+
+.tldraw-lab-frame {
+  width: 100%;
+  height: calc(100% - 42px);
+  border: 0;
+}
+</style>
diff --git a/frontend/app/pages/calendar-zoom-lab.vue b/frontend/app/pages/calendar-zoom-lab.vue
index 3f4611d..5b82a7d 100644
--- a/frontend/app/pages/calendar-zoom-lab.vue
+++ b/frontend/app/pages/calendar-zoom-lab.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import CrmCalendarZoomLab from "~~/app/components/workspace/calendar/lab/CrmCalendarZoomLab.vue";
+import CrmCalendarZoomTldrawLab from "~~/app/components/workspace/calendar/lab/CrmCalendarZoomTldrawLab.client.vue";
 </script>
 
 <template>
   <main class="h-dvh w-full bg-base-200/40 p-2">
-    <CrmCalendarZoomLab />
+    <CrmCalendarZoomTldrawLab />
   </main>
 </template>