feat(resizable): DLT-2097 add DtResizable panel layout component

.gitignore

@@ -80,3 +80,4 @@ SKILLS_TODO*.md
 *.bak
 *.old
 *.deprecated
+.claude/scheduled_tasks.lock

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizable.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="d-w100p" style="height: 300px;">
+    <dt-resizable>
+      <dt-resizable-panel id="ex-sidebar" initial-size="25p" user-min-size="825">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
+          <span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
+        </dt-stack>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="ex-content">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
+          <span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
+        </dt-stack>
+      </dt-resizable-panel>
+    </dt-resizable>
+  </div>
+</template>
+
+<script>
+export default { name: 'ExampleResizable' };
+</script>

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableCollapsible.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="d-w100p" style="height: 300px;">
+    <dt-resizable @panel-collapse="onPanelCollapse">
+      <dt-resizable-panel
+        id="exc-sidebar"
+        initial-size="25p"
+        user-min-size="825"
+        collapsible
+        :collapsed="isCollapsed"
+      >
+        <dt-stack class="d-w100p d-h100p d-bgc-purple-100">
+          <dt-stack direction="row" align="center" justify="end" class="d-px16 d-py8 d-bb d-bc-default">
+            <button class="d-btn d-btn--sm" @click="isCollapsed = true">
+              Close sidebar
+            </button>
+          </dt-stack>
+          <dt-stack align="center" justify="center" class="d-fl1">
+            <span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
+          </dt-stack>
+        </dt-stack>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="exc-content">
+        <dt-stack class="d-w100p d-h100p d-bgc-gold-100">
+          <dt-stack
+            v-if="isCollapsed"
+            direction="row"
+            align="center"
+            class="d-px16 d-py8 d-bb d-bc-default"
+          >
+            <button class="d-btn d-btn--sm" @click="isCollapsed = false">
+              Open sidebar
+            </button>
+          </dt-stack>
+          <dt-stack align="center" justify="center" class="d-fl1">
+            <span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
+          </dt-stack>
+        </dt-stack>
+      </dt-resizable-panel>
+    </dt-resizable>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExampleResizableCollapsible',
+  data () {
+    return { isCollapsed: false };
+  },
+
+  methods: {
+    onPanelCollapse (panelId, collapsed) {
+      if (panelId === 'exc-sidebar') {
+        this.isCollapsed = collapsed;
+      }
+    },
+  },
+};
+</script>

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableOffset.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="d-w100p" style="height: 300px;">
+    <dt-resizable offset-element="#doc-demo-toolbar">
+      <div
+        id="doc-demo-toolbar"
+        class="d-ps-absolute d-t0 d-l0 d-r0 d-zi-base1 d-d-flex d-ai-center
+          d-px16 d-bgc-secondary d-bb d-bc-default d-bgo50"
+        style="height: 48px;"
+      >
+        <span class="d-fs-100">Fixed Toolbar (48px)</span>
+      </div>
+      <dt-resizable-panel id="exo-left" initial-size="50p" class="d-bgc-purple-100">
+        <span class="d-fs-200 d-fw-bold d-fc-purple-400">Left Panel</span>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="exo-right" initial-size="50p" class="d-bgc-gold-100">
+        <span class="d-fs-200 d-fw-bold d-fc-gold-400">Right Panel</span>
+      </dt-resizable-panel>
+    </dt-resizable>
+  </div>
+</template>
+
+<script>
+export default { name: 'ExampleResizableOffset' };
+</script>

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableThreePanel.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="d-w100p" style="height: 300px;">
+    <dt-resizable>
+      <dt-resizable-panel id="ex3-sidebar" initial-size="20p" user-min-size="825">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
+          <span class="d-fs-200 d-fw-bold d-fc-purple-400">Sidebar</span>
+        </dt-stack>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="ex3-content">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
+          <span class="d-fs-200 d-fw-bold d-fc-gold-400">Content</span>
+        </dt-stack>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="ex3-details" initial-size="25p" user-min-size="825">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-green-100">
+          <span class="d-fs-200 d-fw-bold d-fc-green-400">Details</span>
+        </dt-stack>
+      </dt-resizable-panel>
+    </dt-resizable>
+  </div>
+</template>
+
+<script>
+export default { name: 'ExampleResizableThreePanel' };
+</script>

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleResizableVertical.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="d-w100p" style="height: 300px;">
+    <dt-resizable direction="column">
+      <dt-resizable-panel id="exv-top" initial-size="40p">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-purple-100">
+          <span class="d-fs-200 d-fw-bold d-fc-purple-400">Top Panel</span>
+        </dt-stack>
+      </dt-resizable-panel>
+      <dt-resizable-handle />
+      <dt-resizable-panel id="exv-bottom">
+        <dt-stack align="center" justify="center" class="d-w100p d-h100p d-bgc-gold-100">
+          <span class="d-fs-200 d-fw-bold d-fc-gold-400">Bottom Panel</span>
+        </dt-stack>
+      </dt-resizable-panel>
+    </dt-resizable>
+  </div>
+</template>
+
+<script>
+export default { name: 'ExampleResizableVertical' };
+</script>

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -733,6 +733,10 @@
           "text": "Radio Group",
           "link": "/components/radio-group.html"
         },
+        {
+          "text": "Resizable",
+          "link": "/components/resizable.html"
+        },
         {
           "text": "Rich Text Editor",
           "link": "/components/rich-text-editor.html"