@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiLogo/variants/TornadoVariant.vue

@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import { useId } from "vue";
+
+// The lottie tornado rebuilt in CSS. The source hides the mark behind
+// inverted alpha mattes that sweep a gap across each bar; same trick here
+// with black shapes in luminance masks. Timing comes straight from the
+// bodymovin json (50fps, frames 50-132 = one 1640ms loop), each segment
+// keeping its original easing. Snap-backs between sweeps are step-end holds
+// so no in-between frame ever paints.
+//
+// The top bar runs full-width under the dot: the resting gap between them is
+// carved by the matte.
+
+const uid = useId();
+const maskTop = `${uid}-top`;
+const maskMid = `${uid}-mid`;
+const maskBot = `${uid}-bot`;
+</script>
+
+<template>
+  <defs>
+    <mask
+      :id="maskTop"
+      maskUnits="userSpaceOnUse"
+    >
+      <path
+        fill="#fff"
+        d="M423.38 178.08L176.97 177.96C163.72 177.96 152.97 188.71 152.97 201.97C152.97 215.23 163.72 225.98 176.97 225.98L423.38 226.1C436.64 226.1 447.39 215.35 447.39 202.09C447.39 188.83 436.64 178.08 423.38 178.08Z"
+      />
+      <path
+        fill="#fff"
+        d="M447.98 201.97C447.98 188.71 437.23 177.96 423.97 177.96C410.71 177.96 399.97 188.71 399.97 201.97C399.97 215.23 410.71 225.98 423.97 225.98C437.23 225.98 447.98 215.23 447.98 201.97Z"
+      />
+      <path
+        class="motion sweep--top"
+        fill="#000"
+        d="M434.45 260.27L434.45 227.26C430.77 227.26 427.96 226.64 423.87 226.64L424.06 226.64C410.5 226.64 399.51 215.99 399.51 202.16L399.32 202.16C399.32 188.33 410.5 177.31 424.06 177.31L423.87 177.31L423.12 157.76L318.0 157.99L317.8 177.19L326.25 177.19C339.8 177.19 350.79 188.4 350.79 202.23L350.79 202.23C350.79 216.06 339.8 227.27 326.25 227.27L319.59 227.27L319.49 260.27L434.45 260.27Z"
+      />
+    </mask>
+    <mask
+      :id="maskMid"
+      maskUnits="userSpaceOnUse"
+    >
+      <path
+        fill="#fff"
+        d="M375.96 276.45L226.06 276.45C212.8 276.45 202.05 287.2 202.05 300.46C202.05 313.72 212.8 324.47 226.06 324.47L375.96 324.47C389.22 324.47 399.97 313.72 399.97 300.46C399.97 287.2 389.22 276.45 375.96 276.45Z"
+      />
+      <path
+        class="motion sweep--mid"
+        fill="#000"
+        d="M237.83 358.97L237.83 325.96C234.15 325.96 230.59 325.96 226.51 325.96L226.51 325.96C212.95 325.96 201.96 314.75 201.96 300.92L201.96 300.92C201.96 287.1 212.95 275.89 226.51 275.89L226.51 275.89L226.51 256.46L86.77 256.79L86.56 275.4L95.02 275.99C108.57 275.99 119.56 287.2 119.56 301.03L119.56 301.03C119.56 314.86 108.57 326.07 95.02 326.07L88.36 327.03L88.26 359.07L237.83 358.97Z"
+      />
+    </mask>
+    <mask
+      :id="maskBot"
+      maskUnits="userSpaceOnUse"
+    >
+      <path
+        fill="#fff"
+        d="M326.88 374.98L275.13 374.98C261.88 374.98 251.13 385.73 251.13 398.99C251.13 412.25 261.88 422.99 275.13 422.99L326.88 422.99C340.14 422.99 350.89 412.25 350.89 398.99C350.89 385.73 340.14 374.98 326.88 374.98Z"
+      />
+      <path
+        class="motion sweep--bot"
+        fill="#000"
+        d="M287.08 457.17L287.08 424.16C283.4 424.16 279.84 424.16 275.75 424.16L275.75 424.16C262.2 424.16 251.21 412.95 251.21 399.12L251.21 399.12C251.21 385.29 262.2 374.08 275.75 374.08L275.75 374.08L275.75 354.66L183.89 354.8L183.68 373.41L192.14 374.0C205.69 374.0 216.68 385.21 216.68 399.04L216.68 399.04C216.68 412.87 205.69 424.08 192.14 424.08L185.48 425.04L185.38 457.08L287.08 457.17Z"
+      />
+    </mask>
+  </defs>
+
+  <path
+    class="badge"
+    d="M532.48 300.0C532.48 364.22 534.64 439.0 486.84 486.96C439.04 534.92 364.22 532.48 300.0 532.48C235.78 532.48 161.0 534.63 113.04 486.84C65.08 439.04 67.52 364.22 67.52 300.0C67.52 235.79 65.41 161.0 113.2 113.04C161.0 65.08 235.83 67.52 300.0 67.52C364.18 67.52 439.0 65.41 486.96 113.2C534.92 161.0 532.48 235.83 532.48 300.0Z"
+  />
+
+  <g :mask="`url(#${maskTop})`">
+    <path
+      class="mark"
+      d="M423.38 178.08L176.97 177.96C163.72 177.96 152.97 188.71 152.97 201.97C152.97 215.23 163.72 225.98 176.97 225.98L423.38 226.1C436.64 226.1 447.39 215.35 447.39 202.09C447.39 188.83 436.64 178.08 423.38 178.08Z"
+    />
+    <path
+      class="mark"
+      d="M447.98 201.97C447.98 188.71 437.23 177.96 423.97 177.96C410.71 177.96 399.97 188.71 399.97 201.97C399.97 215.23 410.71 225.98 423.97 225.98C437.23 225.98 447.98 215.23 447.98 201.97Z"
+    />
+  </g>
+
+  <path
+    class="mark"
+    :mask="`url(#${maskMid})`"
+    d="M375.96 276.45L226.06 276.45C212.8 276.45 202.05 287.2 202.05 300.46C202.05 313.72 212.8 324.47 226.06 324.47L375.96 324.47C389.22 324.47 399.97 313.72 399.97 300.46C399.97 287.2 389.22 276.45 375.96 276.45Z"
+  />
+
+  <path
+    class="mark"
+    :mask="`url(#${maskBot})`"
+    d="M326.88 374.98L275.13 374.98C261.88 374.98 251.13 385.73 251.13 398.99C251.13 412.25 261.88 422.99 275.13 422.99L326.88 422.99C340.14 422.99 350.89 412.25 350.89 398.99C350.89 385.73 340.14 374.98 326.88 374.98Z"
+  />
+</template>
+
+<style scoped>
+.motion {
+    animation-duration: 1640ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+}
+
+.sweep--top {
+    animation-name: tornado-sweep-top;
+}
+
+.sweep--mid {
+    animation-name: tornado-sweep-mid;
+}
+
+.sweep--bot {
+    animation-name: tornado-sweep-bot;
+}
+
+/* source keyframes converted to % of the 82-frame loop */
+@keyframes tornado-sweep-top {
+    0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.97, 0, 0.833, 1); }
+    19.512% { transform: translateX(98.4px); animation-timing-function: step-end; }
+    20.732% { transform: translateX(-246.4px); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    36.585% { transform: translateX(99.3px); animation-timing-function: step-end; }
+    37.805% { transform: translateX(-244.8px); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    56.098% { transform: translateX(99.3px); animation-timing-function: step-end; }
+    57.317% { transform: translateX(-244.8px); animation-timing-function: cubic-bezier(0.167, 0, 0.03, 1); }
+    92.683%, 100% { transform: translateX(0); }
+}
+
+@keyframes tornado-sweep-mid {
+    0%, 23.171% { transform: translateX(0); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    39.024% { transform: translateX(283px); animation-timing-function: step-end; }
+    40.244% { transform: translateX(0.8px); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    58.537% { transform: translateX(283px); animation-timing-function: step-end; }
+    59.756% { transform: translateX(0.8px); animation-timing-function: cubic-bezier(0.167, 0, 0.03, 1); }
+    95.122%, 100% { transform: translateX(282.2px); }
+}
+
+@keyframes tornado-sweep-bot {
+    0%, 25.61% { transform: translateX(0); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    41.463% { transform: translateX(135px); animation-timing-function: step-end; }
+    42.683% { transform: translateX(0); animation-timing-function: cubic-bezier(0.167, 0, 0.833, 1); }
+    60.976% { transform: translateX(135px); animation-timing-function: step-end; }
+    62.195% { transform: translateX(0); animation-timing-function: cubic-bezier(0.167, 0, 0.03, 1); }
+    97.561%, 100% { transform: translateX(134.6px); }
+}
+</style>

package/src/components/UiMenu/UiMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DropdownMenuRoot>
+</template>

package/src/components/UiMenu/UiMenuContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+
+const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
+  sideOffset: 8,
+  align: 'start',
+  side: 'bottom',
+})
+
+const emits = defineEmits<DropdownMenuContentEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1 z-50"
+      data-colors-semantic="light"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/UiMenu/UiMenuGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, DropdownMenuLabel } from 'reka-ui'
+
+defineProps<{
+  label?: string
+}>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="$attrs">
+    <DropdownMenuLabel
+      v-if="label"
+      class="text-content-legends-bold-md text-text-neutral-tertiary px-3 pt-3 pb-1"
+    >
+      {{ label }}
+    </DropdownMenuLabel>
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/src/components/UiMenu/UiMenuItem.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuItemEmits, DropdownMenuItemProps } from 'reka-ui'
+import { DropdownMenuItem, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuItemProps>()
+const emits = defineEmits<DropdownMenuItemEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="{ ...forwarded, ...$attrs }"
+    class="w-full flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-actions-primary-hover-overlay data-[highlighted]:bg-actions-primary-hover-overlay transition-colors text-left outline-none cursor-pointer text-content-text-md-regular text-text-neutral-base"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/src/components/UiMenu/UiMenuLabel.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DropdownMenuLabel } from 'reka-ui'
+</script>
+
+<template>
+  <DropdownMenuLabel v-bind="$attrs">
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/components/UiMenu/UiMenuSeparator.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DropdownMenuSeparator } from 'reka-ui'
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="$attrs">
+    <slot />
+  </DropdownMenuSeparator>
+</template>

package/src/components/UiMenu/UiMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DropdownMenuSub>
+</template>

package/src/components/UiMenu/UiMenuSubContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
+import { DropdownMenuSubContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+
+const props = withDefaults(defineProps<DropdownMenuSubContentProps>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuSubContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1 z-50"
+      data-colors-semantic="light"
+    >
+      <slot />
+    </DropdownMenuSubContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/UiMenu/UiMenuSubTrigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubTriggerProps>()
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="{ ...forwarded, ...$attrs }"
+    class="w-full flex items-center justify-between gap-3 px-3 py-2 rounded-lg hover:bg-actions-primary-hover-overlay data-[highlighted]:bg-actions-primary-hover-overlay data-[state=open]:bg-actions-primary-hover-overlay transition-colors text-left outline-none cursor-pointer"
+  >
+    <slot />
+    <span class="i-ls-chevron-right w-4 h-4 text-text-neutral-tertiary shrink-0" />
+  </DropdownMenuSubTrigger>
+</template>

package/src/components/UiMenu/UiMenuTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/components/UiMenu/index.ts

@@ -0,0 +1,10 @@
+export { default as UiMenu } from './UiMenu.vue'
+export { default as UiMenuTrigger } from './UiMenuTrigger.vue'
+export { default as UiMenuContent } from './UiMenuContent.vue'
+export { default as UiMenuItem } from './UiMenuItem.vue'
+export { default as UiMenuGroup } from './UiMenuGroup.vue'
+export { default as UiMenuLabel } from './UiMenuLabel.vue'
+export { default as UiMenuSub } from './UiMenuSub.vue'
+export { default as UiMenuSubTrigger } from './UiMenuSubTrigger.vue'
+export { default as UiMenuSubContent } from './UiMenuSubContent.vue'
+export { default as UiMenuSeparator } from './UiMenuSeparator.vue'

package/src/components/UiPage/UiPage.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, getCurrentInstance, type Slot } from 'vue'
+import { BREAKPOINT_LG } from '../../utils/breakpoints'
+import useThemeAndModes from '../../composables/useThemeAndModes'
+import { useMobileMenu } from '../../composables/useMobileMenu'
+import UiLoader from '../UiLoader/UiLoader.vue'
+
+// UiShell structure
+// ┌───────────────────────────────────────────────────────┐
+// │                      UiShell                          │
+// │ ┌───────────────────────────────────────────────────┐ │
+// │ │                    #banner                        │ │
+// │ ├───────────────────────────────────────────────────┤ │
+// │ │ ┌─┬─────────────────────────────────────────────┐ │ │
+// │ │ │s│                 UiPage                      │ │ │
+// │ │ │i│ ┌─────────────────────────────────────────┐ │ │ │
+// │ │ │d│ │              #pageHeader                │ │ │ │
+// │ │ │e│ ├─────────────────────────────────────────┤ │ │ │
+// │ │ │m│ │               #pageTabs                 │ │ │ │
+// │ │ │e│ ├─────────────────────────────────────────┤ │ │ │
+// │ │ │n│ │              page-content               │ │ │ │
+// │ │ │u│ │ ┌──────────┬──────────────────────────┐ │ │ │ │
+// │ │ │ │ │ │#leftSlot │     content (2/3)        │ │ │ │ │
+// │ │ │ │ │ │  (1/3)   │ ┌──────────────────────┐ │ │ │ │ │
+// │ │ │ │ │ │          │ │       #header        │ │ │ │ │ │
+// │ │ │ │ │ │          │ ├──────────────────────┤ │ │ │ │ │
+// │ │ │ │ │ │          │ │       #default       │ │ │ │ │ │
+// │ │ │ │ │ │          │ │                      │ │ │ │ │ │
+// │ │ │ │ │ │          │ ├──────────────────────┤ │ │ │ │ │
+// │ │ │ │ │ │          │ │       #footer        │ │ │ │ │ │
+// │ │ │ │ │ │          │ └──────────────────────┘ │ │ │ │ │
+// │ │ │ │ │ └──────────┴──────────────────────────┘ │ │ │ │
+// │ │ │ │ └─────────────────────────────────────────┘ │ │ │
+// │ │ │ └─────────────────────────────────────────────┘ │ │
+// │ │ └─────────────────────────────────────────────────┘ │
+// └─┴─────────────────────────────────────────────────────┘
+
+const props = withDefaults(defineProps<{
+  /**
+   * Extra classes for the inner content `<section>`. Use to override the
+   * default surface, e.g. `bg-surface-neutral-300` instead of the standard
+   * `bg-surface-neutral-bg-main`. Appended after the defaults so it wins on
+   * conflicting utilities.
+   */
+  pageContentClasses?: string
+  /**
+   * Page title surfaced as the label of UiShell's fallback mobile menu topbar
+   * (shown on a headerless page that has a side menu). Lets a page name its
+   * menu row — e.g. "Home" — without reaching into useMobileMenu directly.
+   */
+  title?: string
+}>(), {
+  pageContentClasses: '',
+  title: undefined,
+})
+
+const slots = defineSlots<{
+  banner?(): Slot
+  pageHeader?(): Slot
+  pageTabs?(): Slot
+  leftSlot?(): Slot
+  header?(): Slot
+  footer?(): Slot
+  default?(): Slot
+}>()
+
+// Check for slot presence
+const bannerSlot = computed(() => !!slots.banner)
+const pageHeaderSlot = computed(() => !!slots.pageHeader)
+const pageTabsSlot = computed(() => !!slots.pageTabs)
+const leftSlot = computed(() => !!slots.leftSlot)
+const headerSlot = computed(() => !!slots.header)
+const footerSlot = computed(() => !!slots.footer)
+
+// Feed the page title to UiShell's fallback mobile menu topbar. Watched so a
+// reactive title updates live, and cleared on unmount so it doesn't leak to
+// the next route.
+const { setMenuLabel } = useMobileMenu()
+watch(() => props.title, (title) => setMenuLabel(title ?? null), { immediate: true })
+onBeforeUnmount(() => setMenuLabel(null))
+
+const app = getCurrentInstance()
+if (!app) {
+  throw new Error('No current instance found')
+}
+const responsive = computed(() => app.appContext.config.globalProperties.$responsive)
+const displayLeftSlot = computed(() => responsive.value.width >= BREAKPOINT_LG)
+
+const UiPage = ref<HTMLElement | undefined>()
+const PageContent = ref<HTMLElement | undefined>()
+
+const { addElementToWatch } = useThemeAndModes()
+
+// The page content historically forces light mode. Only lift that pin when
+// the internal theming tooling is enabled, so the stored content mode
+// (driven by the ThemePicker) can apply; for everyone else the content
+// stays light regardless of what localStorage may hold.
+const isInternalThemingEnabled = localStorage.getItem('ls-internal-theming') === 'true'
+
+onMounted(() => {
+  addElementToWatch(
+    'content',
+    {
+      selector: '[data-name="ui-page-content"]',
+      element: PageContent.value!,
+      ...(isInternalThemingEnabled ? {} : { modeOverride: 'light' }),
+    })
+})
+
+</script>
+
+<template>
+  <main
+    ref="UiPage"
+    data-name="ui-page-wrapper"
+    class="ui-page h-full flex flex-col"
+  >
+    <section
+      v-if="bannerSlot"
+      data-name="banner"
+    >
+      <slot name="banner" />
+    </section>
+
+    <section
+      class="page-view flex-1 flex flex-col min-h-0"
+    >
+      <section
+        v-if="pageHeaderSlot"
+        ref="pageHeader"
+        data-name="pageHeader"
+        class="page-header p-4 md:p-8 md:pl-0 relative"
+      >
+        <slot name="pageHeader" />
+      </section>
+
+      <!-- Teleport Target to the pageTabs slot -->
+      <div id="ui-page-tabs-teleport-target" />
+
+      <section
+        v-if="pageTabsSlot"
+        data-name="pageTabs"
+      >
+        <slot name="pageTabs" />
+      </section>
+
+      <section
+        ref="PageContent"
+        data-name="pageContent"
+        class="page-content flex-1 overflow-y-auto w-full grid has-[>:nth-child(2)]:lg:grid-cols-[1fr_2fr] lg:gap-x-8 min-h-0"
+        :data-colors-semantic="isInternalThemingEnabled ? undefined : 'light'"
+      >
+        <aside
+          v-if="leftSlot && displayLeftSlot"
+          data-name="leftSlot"
+          class="left-slot"
+        >
+          <slot name="leftSlot" />
+        </aside>
+
+        <div class="min-w-0 overflow-hidden rounded-tl-xl">
+          <section
+            :class="[
+              'content min-w-0 overflow-y-auto h-full bg-surface-neutral-bg-main grid shadow-shadows-drop-shadow-2xl rounded-tl-xl',
+              // Nudge the content down only when it sits flush at the top — i.e.
+              // no page header and no left slot to align against.
+              !pageHeaderSlot && !leftSlot ? 'mt-1' : '',
+              headerSlot ? 'grid-rows-[min-content]' : '',
+              props.pageContentClasses,
+            ]"
+            data-name="ui-shell-content"
+          >
+            <section
+              v-if="headerSlot"
+              data-name="header"
+              class="content-header p-4 sm:p-6"
+            >
+              <slot name="header" />
+            </section>
+
+            <section
+              data-name="main-content"
+              class="route-content w-full min-w-0 flex flex-col"
+            >
+              <slot>
+                <UiLoader />
+              </slot>
+            </section>
+
+            <section
+              v-if="footerSlot"
+              name="footer"
+            >
+              <slot name="footer" />
+            </section>
+          </section>
+        </div>
+      </section>
+    </section>
+  </main>
+</template>

package/src/components/UiPageHeader/UiPageHeader.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, useSlots, watch, type Slot } from 'vue'
+import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
+import UiButton from '../UiButton/UiButton.vue'
+import { useMobileMenu } from '../../composables/useMobileMenu'
+import type { RouteLocationRaw } from 'vue-router'
+
+const slots = useSlots()
+
+const props = withDefaults(defineProps<{
+  title?: string
+  iconStart?: string
+  showBackButton?: boolean
+  showLogo?: boolean
+  showMobileMenu?: boolean
+  allowGlobalMobileMenu?: boolean
+  logoTo?: RouteLocationRaw | null
+  titleSize?: 'sm' | 'md' | 'lg' | 'xl'
+}>(), {
+  showLogo: false,
+  showBackButton: false,
+  showMobileMenu: true,
+  titleSize: 'md',
+  logoTo: '/',
+  allowGlobalMobileMenu: true,
+})
+
+defineSlots<{
+  slotA?: () => Slot
+  slotB?: () => Slot
+  title?: () => Slot
+}>()
+
+const hasSlotA = computed(() => !!slots.slotA)
+const hasSlotB = computed(() => !!slots.slotB)
+
+// Title is one step smaller on mobile, scaling up to the configured size at
+// `md+` so long titles don't dominate narrow screens.
+const fontSizeMap: Record<'sm' | 'md' | 'lg' | 'xl', string> = {
+  sm: 'text-title-sm-bold',
+  md: 'text-title-sm-bold md:text-title-md-bold',
+  lg: 'text-title-md-bold md:text-title-lg-bold',
+  xl: 'text-title-lg-bold md:text-title-xl',
+}
+
+const { toggle, registerTrigger, unregisterTrigger } = useMobileMenu()
+
+// Let UiShell know a header-owned open-menu trigger exists, so it skips its
+// own fallback hamburger. Only count it while the header actually renders one.
+let registered = false
+const syncTrigger = (active: boolean) => {
+  if (active && !registered) {
+    registerTrigger()
+    registered = true
+  } else if (!active && registered) {
+    unregisterTrigger()
+    registered = false
+  }
+}
+
+watch(() => props.allowGlobalMobileMenu, syncTrigger, { immediate: true })
+
+onBeforeUnmount(() => syncTrigger(false))
+
+</script>
+
+<template>
+  <div
+    class="flex flex-1 min-w-0 justify-between gap-5 md:gap-8 items-center"
+  >
+    <div class="flex min-w-0 items-center gap-2">
+      <div v-if="showLogo">
+        <router-link
+          :to="logoTo ? logoTo : '#'"
+          class="grid items-center w-8 h-8"
+        >
+          <img
+            :src="LivestormLogo"
+            alt="Livestorm logo"
+            class="w-6 h-6"
+          >
+        </router-link>
+      </div>
+      <div
+        v-if="allowGlobalMobileMenu"
+        class="md:hidden"
+      >
+        <UiButton
+          color="neutral"
+          variant="tertiary"
+          icon="i-ls-menu"
+          @click="toggle"
+        />
+      </div>
+      <div v-if="showBackButton">
+        <UiButton
+          color="neutral"
+          variant="tertiary"
+          icon="i-ls-back"
+        />
+      </div>
+      <div
+        v-if="iconStart"
+        :class="[iconStart, 'w-8 h-8 text-text-neutral-base']"
+      />
+      <div
+        :class="[fontSizeMap[props.titleSize], 'text-text-neutral-base']"
+        class="min-w-0 grow truncate"
+      >
+        {{ title }}
+      </div>
+      <slot name="title" />
+    </div>
+    <div
+      v-if="hasSlotA"
+      class="min-w-0 flex-1"
+    >
+      <slot name="slotA" />
+    </div>
+
+    <div
+      v-if="hasSlotB"
+      class="flex shrink-0 items-center gap-4"
+    >
+      <slot name="slotB" />
+    </div>
+  </div>
+</template>