From 77045c4b980d9cfa19b0a77ce1095c61e5348479 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 7 Jan 2026 21:03:02 +0800
Subject: [PATCH] refactor(stage-ui,ui): promote Collapsible and Screen to ui
 package

---
 .../src/pages/devtools/polaroid.vue           |  2 +-
 .../stage-web/src/pages/devtools/polaroid.vue |  2 +-
 .../src/components/data-pane/Container.vue    |  6 +-
 .../src/components/layouts/Section.vue        |  6 +-
 .../src/components/misc/Screen.story.vue      |  2 +-
 .../scenarios/chat/ChatResponsePart.vue       |  6 +-
 .../scenarios/chat/ChatToolCallBlock.vue      |  7 +-
 .../providers/ProviderAdvancedSettings.vue    |  7 +-
 .../stage-ui/src/components/scenes/Live2D.vue |  2 +-
 packages/ui/package.json                      |  1 +
 .../ui/src/components/layouts/collapsible.vue | 38 ++++++++++
 packages/ui/src/components/layouts/index.ts   |  2 +
 packages/ui/src/components/layouts/screen.vue | 72 +++++++++++++++++++
 packages/ui/src/index.ts                      |  1 +
 14 files changed, 133 insertions(+), 21 deletions(-)
 create mode 100644 packages/ui/src/components/layouts/collapsible.vue
 create mode 100644 packages/ui/src/components/layouts/index.ts
 create mode 100644 packages/ui/src/components/layouts/screen.vue

diff --git a/apps/stage-pocket/src/pages/devtools/polaroid.vue b/apps/stage-pocket/src/pages/devtools/polaroid.vue
index 202a1eeb5..4d20356f4 100644
--- a/apps/stage-pocket/src/pages/devtools/polaroid.vue
+++ b/apps/stage-pocket/src/pages/devtools/polaroid.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Screen } from '@proj-airi/stage-ui/components'
 import { Live2DCanvas, Live2DModel } from '@proj-airi/stage-ui/components/scenes'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 
diff --git a/apps/stage-web/src/pages/devtools/polaroid.vue b/apps/stage-web/src/pages/devtools/polaroid.vue
index 202a1eeb5..4d20356f4 100644
--- a/apps/stage-web/src/pages/devtools/polaroid.vue
+++ b/apps/stage-web/src/pages/devtools/polaroid.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Screen } from '@proj-airi/stage-ui/components'
 import { Live2DCanvas, Live2DModel } from '@proj-airi/stage-ui/components/scenes'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 
diff --git a/packages/stage-ui/src/components/data-pane/Container.vue b/packages/stage-ui/src/components/data-pane/Container.vue
index e13bfa19a..59711d6ba 100644
--- a/packages/stage-ui/src/components/data-pane/Container.vue
+++ b/packages/stage-ui/src/components/data-pane/Container.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Collapsable from '../misc/Collapsable.vue'
+import { Collapsible } from '@proj-airi/ui'
 
 withDefaults(defineProps<{
   title?: string
@@ -12,7 +12,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <Collapsable :default="expand">
+  <Collapsible :default="expand">
     <template #trigger="slotProps">
       <button
         class="w-full flex items-center justify-between rounded-lg px-2 py-1 outline-none transition-all duration-250 ease-in-out"
@@ -37,5 +37,5 @@ withDefaults(defineProps<{
     <div gap="1" grid items-center p-1 :class="innerClass">
       <slot />
     </div>
-  </Collapsable>
+  </Collapsible>
 </template>
diff --git a/packages/stage-ui/src/components/layouts/Section.vue b/packages/stage-ui/src/components/layouts/Section.vue
index 6791a08b9..33d2251c8 100644
--- a/packages/stage-ui/src/components/layouts/Section.vue
+++ b/packages/stage-ui/src/components/layouts/Section.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Collapsable from '../misc/Collapsable.vue'
+import { Collapsible } from '@proj-airi/ui'
 
 withDefaults(defineProps<{
   title: string
@@ -13,7 +13,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <Collapsable :default="expand">
+  <Collapsible :default="expand">
     <template #trigger="slotProps">
       <button
         class="w-full flex items-center justify-between rounded-lg px-3 py-2 outline-none transition-all duration-250 ease-in-out sm:px-4 sm:py-3"
@@ -36,5 +36,5 @@ withDefaults(defineProps<{
     <div grid gap-2 :class="[innerClass, size === 'sm' ? 'p-2' : 'p-4']">
       <slot />
     </div>
-  </Collapsable>
+  </Collapsible>
 </template>
diff --git a/packages/stage-ui/src/components/misc/Screen.story.vue b/packages/stage-ui/src/components/misc/Screen.story.vue
index 70641d973..d94aa103b 100644
--- a/packages/stage-ui/src/components/misc/Screen.story.vue
+++ b/packages/stage-ui/src/components/misc/Screen.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Screen from './Screen.vue'
+import { Screen } from '@proj-airi/ui'
 </script>
 
 <template>
diff --git a/packages/stage-ui/src/components/scenarios/chat/ChatResponsePart.vue b/packages/stage-ui/src/components/scenarios/chat/ChatResponsePart.vue
index 1c16b5041..2f215cef4 100644
--- a/packages/stage-ui/src/components/scenarios/chat/ChatResponsePart.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/ChatResponsePart.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ChatAssistantMessage } from '../../../types/chat'
 
+import { Collapsible } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import MarkdownRenderer from '../../markdown/MarkdownRenderer.vue'
-import Collapsable from '../../misc/Collapsable.vue'
 
 const props = defineProps<{
   message: ChatAssistantMessage
@@ -24,7 +24,7 @@ const containerClasses = computed(() => [
 
 <template>
   <div v-if="hasReasoning" :class="containerClasses" flex="~ col" gap-1>
-    <Collapsable :default="false">
+    <Collapsible :default="false">
       <template #trigger="slotProps">
         <button
           class="w-full flex items-center justify-between rounded-lg bg-neutral-100/50 px-2 py-1 text-xs text-neutral-600 outline-none transition-all duration-200 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:text-neutral-400 dark:hover:bg-neutral-700/50"
@@ -51,6 +51,6 @@ const containerClasses = computed(() => [
           text="xs neutral-700 dark:neutral-300"
         />
       </div>
-    </Collapsable>
+    </Collapsible>
   </div>
 </template>
diff --git a/packages/stage-ui/src/components/scenarios/chat/ChatToolCallBlock.vue b/packages/stage-ui/src/components/scenarios/chat/ChatToolCallBlock.vue
index dc1ccb013..f8b6d2cc7 100644
--- a/packages/stage-ui/src/components/scenarios/chat/ChatToolCallBlock.vue
+++ b/packages/stage-ui/src/components/scenarios/chat/ChatToolCallBlock.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Collapsible } from '@proj-airi/ui'
 import { computed } from 'vue'
 
-import Collapsable from '../../misc/Collapsable.vue'
-
 const props = defineProps<{
   toolName: string
   args: string
@@ -20,7 +19,7 @@ const formattedArgs = computed(() => {
 </script>
 
 <template>
-  <Collapsable
+  <Collapsible
     :class="[
       'bg-primary-100/40 dark:bg-primary-900/60 rounded-lg px-2 pb-2 pt-2',
       'flex flex-col gap-2 items-start',
@@ -47,5 +46,5 @@ const formattedArgs = computed(() => {
         {{ formattedArgs }}
       </div>
     </div>
-  </Collapsable>
+  </Collapsible>
 </template>
diff --git a/packages/stage-ui/src/components/scenarios/providers/ProviderAdvancedSettings.vue b/packages/stage-ui/src/components/scenarios/providers/ProviderAdvancedSettings.vue
index ce8715b54..3300e4c2a 100644
--- a/packages/stage-ui/src/components/scenarios/providers/ProviderAdvancedSettings.vue
+++ b/packages/stage-ui/src/components/scenarios/providers/ProviderAdvancedSettings.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Collapsible } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Collapsable from '../../misc/Collapsable.vue'
-
 const props = defineProps<{
   title?: string
   initialVisible?: boolean
@@ -16,7 +15,7 @@ function toggleVisible() {
 </script>
 
 <template>
-  <Collapsable w-full>
+  <Collapsible w-full>
     <template #trigger="slotProps">
       <button
         transition="all ease-in-out duration-250"
@@ -35,5 +34,5 @@ function toggleVisible() {
     <div mt-4>
       <slot />
     </div>
-  </Collapsable>
+  </Collapsible>
 </template>
diff --git a/packages/stage-ui/src/components/scenes/Live2D.vue b/packages/stage-ui/src/components/scenes/Live2D.vue
index 7c76914d9..f48b8708f 100644
--- a/packages/stage-ui/src/components/scenes/Live2D.vue
+++ b/packages/stage-ui/src/components/scenes/Live2D.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Screen } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 
-import Screen from '../misc/Screen.vue'
 import Live2DCanvas from './live2d/Canvas.vue'
 import Live2DModel from './live2d/Model.vue'
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c3536a9a5..ce2a5d524 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,6 +18,7 @@
     ".": "./src/index.ts",
     "./components/animations": "./src/components/Animations/index.ts",
     "./components/form": "./src/components/Form/index.ts",
+    "./components/layouts": "./src/components/layouts/index.ts",
     "./*": "./*"
   },
   "scripts": {
diff --git a/packages/ui/src/components/layouts/collapsible.vue b/packages/ui/src/components/layouts/collapsible.vue
new file mode 100644
index 000000000..2e9400ef3
--- /dev/null
+++ b/packages/ui/src/components/layouts/collapsible.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { TransitionVertical } from '@proj-airi/ui'
+import { watchEffect } from 'vue'
+
+const props = defineProps<{
+  default?: boolean
+  label?: string
+}>()
+const visible = defineModel<boolean>({ default: false })
+watchEffect(() => {
+  if (props.default != null) {
+    visible.value = !!props.default
+  }
+})
+
+function setVisible(value: boolean) {
+  visible.value = value
+  return value
+}
+</script>
+
+<template>
+  <div>
+    <slot name="trigger" v-bind="{ visible, setVisible }">
+      <button
+        :class="['sticky top-0 z-10 flex items-center justify-between px2 py1 text-sm backdrop-blur-xl']"
+        @click="visible = !visible"
+      >
+        <span>
+          {{ props.label ?? 'Collapsable' }}
+        </span> <span op50>{{ visible ? '▲' : '▼' }}</span>
+      </button>
+    </slot>
+    <TransitionVertical>
+      <slot v-if="visible" v-bind="{ visible, setVisible }" />
+    </TransitionVertical>
+  </div>
+</template>
diff --git a/packages/ui/src/components/layouts/index.ts b/packages/ui/src/components/layouts/index.ts
new file mode 100644
index 000000000..140c08473
--- /dev/null
+++ b/packages/ui/src/components/layouts/index.ts
@@ -0,0 +1,2 @@
+export { default as Collapsible } from './collapsible.vue'
+export { default as Screen } from './screen.vue'
diff --git a/packages/ui/src/components/layouts/screen.vue b/packages/ui/src/components/layouts/screen.vue
new file mode 100644
index 000000000..fc5c752ba
--- /dev/null
+++ b/packages/ui/src/components/layouts/screen.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const containerRef = ref<HTMLDivElement>()
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const { width, height } = useWindowSize()
+const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
+
+const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
+const isTablet = computed(() => breakpoints.between('md', 'lg').value)
+const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
+
+const canvasWidth = computed(() => {
+  if (isDesktop.value)
+    return containerElementBounding.width.value
+  else if (isMobile.value)
+    return (width.value - 16) // padding
+  else if (isTablet.value)
+    return (width.value - 16) // padding
+  else
+    return containerElementBounding.width.value
+})
+
+const canvasHeight = ref(0)
+
+watch([width, height, containerRef], () => {
+  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
+
+  if (isDesktop.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = bounding?.height || 0
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+watch([containerElementBounding.width, containerElementBounding.height], () => {
+  if (isDesktop.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isMobile.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else if (isTablet.value) {
+    canvasHeight.value = containerElementBounding.height.value
+  }
+  else {
+    canvasHeight.value = 600
+  }
+})
+
+onMounted(async () => {
+  if (!containerRef.value)
+    return
+
+  containerElementBounding.update()
+})
+</script>
+
+<template>
+  <div ref="containerRef" h-full w-full>
+    <slot :width="canvasWidth" :height="canvasHeight" />
+  </div>
+</template>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 87e8b2854..9ae7b7a00 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,6 +2,7 @@ import './fallback.css'
 
 export * from './components/Animations'
 export * from './components/Form'
+export * from './components/layouts'
 export * from './components/Misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'