@livestorm/ui-vue 2.0.4 → 3.0.0

package/src/components/UiMenu/UiMenuContent.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <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"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuGroup.vue

@@ -10,7 +10,7 @@ defineProps<{
   <DropdownMenuGroup v-bind="$attrs">
     <DropdownMenuLabel
       v-if="label"
-      class="text-content-legends-bold-md text-text-neutral-tertiary px-3 pt-3 pb-1"
+      class="text-content-legends-bold-md text-text-neutral-secondary px-3 pt-3 pb-1"
     >
       {{ label }}
     </DropdownMenuLabel>

package/src/components/UiMenu/UiMenuItem.vue

@@ -11,7 +11,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 <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"
+    class="w-full flex items-center gap-2 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay transition-colors text-left outline-none cursor-pointer text-content-text-md-regular text-text-neutral-base"
   >
     <slot />
   </DropdownMenuItem>

package/src/components/UiMenu/UiMenuSubContent.vue

@@ -14,7 +14,7 @@ const forwarded = useForwardPropsEmits(props, emits)
   <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"
+      class="bg-surface-neutral-bg-main rounded-xl border border-borders-neutral-light shadow-lg p-1.5 flex flex-col gap-0.5 z-50"
       data-colors-semantic="light"
     >
       <slot />

package/src/components/UiMenu/UiMenuSubTrigger.vue

@@ -9,9 +9,9 @@ const forwarded = useForwardProps(props)
 <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"
+    class="w-full flex items-center justify-between gap-3 min-h-10 px-3 py-1.5 rounded-lg hover:bg-actions-neutral-hover-overlay data-[highlighted]:bg-actions-neutral-hover-overlay data-[state=open]:bg-actions-neutral-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" />
+    <span class="i-ph-caret-right w-4 h-4 text-text-neutral-tertiary shrink-0" />
   </DropdownMenuSubTrigger>
 </template>

package/src/components/UiPage/UiPage.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch, getCurrentInstance, type Slot } from 'vue'
+import { computed, onBeforeUnmount, ref, watch, getCurrentInstance, type Slot } from 'vue'
 import { BREAKPOINT_LG } from '../../utils/breakpoints'
 import { useResponsive } from '../../utils/responsive'
-import useThemeAndModes from '../../composables/useThemeAndModes'
+import { useContentMode } from '../../composables/useContentMode'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import UiLoader from '../UiLoader/UiLoader.vue'
 
@@ -36,6 +36,24 @@ import UiLoader from '../UiLoader/UiLoader.vue'
 // │ │ └─────────────────────────────────────────────────┘ │
 // └─┴─────────────────────────────────────────────────────┘
 
+/**
+ * Headroom sizes, in px: the gap above the content card that lets the shell
+ * background show through. One map so the page frame has a single source of
+ * truth — retune here rather than at call sites.
+ */
+const HEADROOM_GAP_PX = {
+  none: 0,
+  sm: 4,
+  md: 10,
+  lg: 16,
+  xl: 24,
+} as const
+
+type HeadroomGap = keyof typeof HEADROOM_GAP_PX
+
+/** Used when the card sits flush at the top and no size is given. */
+const DEFAULT_HEADROOM_GAP: HeadroomGap = 'md'
+
 const props = withDefaults(defineProps<{
   /**
    * Extra classes for the inner content `<section>`. Use to override the
@@ -50,9 +68,30 @@ const props = withDefaults(defineProps<{
    * menu row — e.g. "Home" — without reaching into useMobileMenu directly.
    */
   title?: string
+  /**
+   * The shape of the page inside the content card.
+   * - `document` (default): the card scrolls as a single column. The common
+   *   dashboard page — lists, forms, detail views.
+   * - `app`: the card fills the available height and never scrolls itself;
+   *   the page owns its own scroll regions. For editor-style pages (split
+   *   panes, canvases) that would otherwise opt out of UiPage entirely.
+   */
+  variant?: 'document' | 'app'
+  /**
+   * Headroom above the content card, letting the shell background show
+   * through. Sizes map to px via `HEADROOM_GAP_PX`.
+   *
+   * Left unset, the card gets `DEFAULT_HEADROOM_GAP` only when it sits flush
+   * at the top — i.e. there is no page header or left slot already offsetting
+   * it. Naming a size applies it in either case, and `none` removes the gap
+   * on a page that would otherwise get the default.
+   */
+  headroomGap?: HeadroomGap
 }>(), {
   pageContentClasses: '',
   title: undefined,
+  variant: 'document',
+  headroomGap: undefined,
 })
 
 const slots = defineSlots<{
@@ -65,6 +104,12 @@ const slots = defineSlots<{
   default?(): Slot
 }>()
 
+// An `app` page manages its own scrolling, so every level from the page
+// content down to the card must stop scrolling and stop growing past the
+// viewport — otherwise a split-pane editor gets a second, outer scrollbar.
+const isApp = computed(() => props.variant === 'app')
+const scrollClass = computed(() => (isApp.value ? 'overflow-hidden' : 'overflow-y-auto'))
+
 // Check for slot presence
 const bannerSlot = computed(() => !!slots.banner)
 const pageHeaderSlot = computed(() => !!slots.pageHeader)
@@ -73,6 +118,38 @@ const leftSlot = computed(() => !!slots.leftSlot)
 const headerSlot = computed(() => !!slots.header)
 const footerSlot = computed(() => !!slots.footer)
 
+// Row track for the card grid. An `app` page needs its main row to take the
+// leftover height and be allowed to shrink (minmax(0,1fr)), so nested
+// overflow containers resolve against a real height instead of growing.
+// Spelled out as literals: Tailwind only generates classes it can see as
+// complete strings in the source.
+const cardRowsClass = computed(() => {
+  if (!isApp.value) { return headerSlot.value ? 'grid-rows-[min-content]' : '' }
+  if (headerSlot.value && footerSlot.value) { return 'grid-rows-[min-content_minmax(0,1fr)_min-content]' }
+  if (headerSlot.value) { return 'grid-rows-[min-content_minmax(0,1fr)]' }
+  if (footerSlot.value) { return 'grid-rows-[minmax(0,1fr)_min-content]' }
+  return 'grid-rows-[minmax(0,1fr)]'
+})
+
+// A named size always wins; otherwise fall back to the default, and only when
+// the card is flush at the top (a page header or left slot already provides
+// the offset). Applied as an inline style rather than a utility so the value
+// does not depend on Tailwind's `--spacing` fallback resolving to 0.25rem.
+// A zero gap emits no style at all, so `none` and "already offset" produce
+// identical markup.
+//
+// Padding on the clipping wrapper rather than a margin on the card: the card
+// is `h-full`, so a margin would push a full-height box down inside a fixed
+// height, overflowing by exactly the gap and clipping that much off the
+// bottom. As padding it shrinks the box the card measures itself against.
+const headroomGapStyle = computed(() => {
+  const size = props.headroomGap ?? (
+    !pageHeaderSlot.value && !leftSlot.value ? DEFAULT_HEADROOM_GAP : 'none'
+  )
+  const px = HEADROOM_GAP_PX[size]
+  return px ? { paddingTop: `${px}px` } : undefined
+})
+
 // 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.
@@ -92,23 +169,9 @@ 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' }),
-    })
-})
+// Follow the stored content mode via the shared composable (also used by the
+// settings shell), so the page content's data-colors-semantic stays in sync.
+const { contentMode } = useContentMode(PageContent, '[data-name="ui-page-content"]')
 
 </script>
 
@@ -132,7 +195,7 @@ onMounted(() => {
         v-if="pageHeaderSlot"
         ref="pageHeader"
         data-name="pageHeader"
-        class="page-header p-4 md:p-8 md:pl-0 relative"
+        class="page-header p-4 md:px-8 md:py-6 md:pl-0 relative"
       >
         <slot name="pageHeader" />
       </section>
@@ -150,8 +213,11 @@ onMounted(() => {
       <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'"
+        :class="[
+          'page-content flex-1 w-full grid has-[>:nth-child(2)]:lg:grid-cols-[1fr_2fr] lg:gap-x-8 min-h-0',
+          scrollClass,
+        ]"
+        :data-colors-semantic="contentMode"
       >
         <aside
           v-if="leftSlot && displayLeftSlot"
@@ -161,14 +227,15 @@ onMounted(() => {
           <slot name="leftSlot" />
         </aside>
 
-        <div class="min-w-0 overflow-hidden rounded-tl-xl">
+        <div
+          class="min-w-0 overflow-hidden rounded-tl-xl"
+          :style="headroomGapStyle"
+        >
           <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]' : '',
+              'content min-w-0 h-full bg-surface-neutral-bg-main grid shadow-shadows-drop-shadow-2xl rounded-tl-xl',
+              scrollClass,
+              cardRowsClass,
               props.pageContentClasses,
             ]"
             data-name="ui-shell-content"
@@ -183,7 +250,13 @@ onMounted(() => {
 
             <section
               data-name="main-content"
-              class="route-content w-full min-w-0 flex flex-col"
+              :class="[
+                'route-content w-full min-w-0 flex flex-col',
+                // Let the row shrink so an editor's own overflow containers
+                // resolve against a real height. Scoped to `app` so the 15
+                // existing document pages keep their current growth behaviour.
+                isApp ? 'min-h-0' : '',
+              ]"
             >
               <slot>
                 <UiLoader />

package/src/components/UiPageHeader/UiPageHeader.vue

@@ -1,7 +1,7 @@
 <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 UiLogo from '../UiLogo/UiLogo.vue'
 import { useMobileMenu } from '../../composables/useMobileMenu'
 import type { RouteLocationRaw } from 'vue-router'
 
@@ -65,8 +65,15 @@ onBeforeUnmount(() => syncTrigger(false))
 </script>
 
 <template>
+  <!--
+    min-h-10 keeps the header a stable height whether or not a page fills the
+    action slots. Without it the row is sized by its tallest child — a bare
+    title is 32px but an action button is 40px — so the header, and the content
+    card below it, shifted by 8px between pages like Events and People.
+    A floor, not a fixed height: taller or wrapped content still grows.
+  -->
   <div
-    class="flex flex-1 min-w-0 justify-between gap-5 md:gap-8 items-center"
+    class="flex flex-1 min-w-0 justify-between gap-5 md:gap-8 items-center min-h-10"
   >
     <div class="flex min-w-0 items-center gap-2">
       <div v-if="showLogo">
@@ -74,11 +81,13 @@ onBeforeUnmount(() => syncTrigger(false))
           :to="logoTo ? logoTo : '#'"
           class="grid items-center w-8 h-8"
         >
-          <img
-            :src="LivestormLogo"
-            alt="Livestorm logo"
-            class="w-6 h-6"
-          >
+          <UiLogo
+            :height="1.5"
+            :width="1.5"
+            :themed="false"
+            :animated="false"
+            inverted="auto"
+          />
         </router-link>
       </div>
       <div
@@ -88,7 +97,7 @@ onBeforeUnmount(() => syncTrigger(false))
         <UiButton
           color="neutral"
           variant="tertiary"
-          icon="i-ls-menu"
+          icon="i-ph-list"
           @click="toggle"
         />
       </div>
@@ -96,7 +105,7 @@ onBeforeUnmount(() => syncTrigger(false))
         <UiButton
           color="neutral"
           variant="tertiary"
-          icon="i-ls-back"
+          icon="i-ph-arrow-left"
         />
       </div>
       <div
@@ -124,5 +133,16 @@ onBeforeUnmount(() => syncTrigger(false))
     >
       <slot name="slotB" />
     </div>
+
+    <!--
+      Teleport target for page-level actions, so a component deep inside the
+      page content (e.g. a settings section) can surface its primary action
+      here without threading props up. `contents` keeps the empty target out
+      of the flex layout, so pages that don't use it are unaffected.
+    -->
+    <div
+      id="ui-page-header-actions-teleport-target"
+      class="contents"
+    />
   </div>
 </template>

package/src/components/UiRoomButton/UiRoomButton.vue

@@ -57,7 +57,7 @@ const isIconOnly = computed(() => !slots.default);
         >
           <svg
             v-if="loading"
-            class="h-4 w-4 shrink-0 animate-spin"
+            class="size-5 shrink-0 animate-spin"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -78,7 +78,7 @@ const isIconOnly = computed(() => !slots.default);
           </svg>
           <div
             v-else-if="icon"
-            class="h-4 w-4 shrink-0"
+            class="size-5 shrink-0"
             :class="icon"
           />
           <slot />
@@ -117,7 +117,7 @@ const isIconOnly = computed(() => !slots.default);
   >
     <svg
       v-if="loading"
-      class="h-4 w-4 shrink-0 animate-spin"
+      class="size-5 shrink-0 animate-spin"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -138,7 +138,7 @@ const isIconOnly = computed(() => !slots.default);
     </svg>
     <div
       v-else-if="icon"
-      class="h-4 w-4 shrink-0"
+      class="size-5 shrink-0"
       :class="icon"
     />
     <slot />

package/src/components/UiShell/UiShell.vue

@@ -69,7 +69,7 @@ const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
           <UiButton
             color="neutral"
             variant="tertiary"
-            icon="i-ls-menu"
+            icon="i-ph-list"
             :aria-label="fallbackLabel"
             @click="toggle"
           />

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import LivestormLogo from '@livestorm/ui-tokens/output/vectors/logos/livestorm-white.svg'
 import type { Slot } from 'vue'
 import type { SideMenuCollapsedItem, SideMenuItemProps, SideMenuMoreItem } from './types'
 import UiSideMenuItem from './UiSideMenuItem.vue'
+import UiLogo from '../UiLogo/UiLogo.vue'
 import UiButton from '../UiButton/UiButton.vue'
 import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
@@ -189,17 +189,20 @@ function handleLogoClick (event: MouseEvent) {
     <!-- Top -->
     <div class="flex flex-col md:items-center gap-8">
       <div class="flex items-center justify-between">
-        <img
+        <UiLogo
           v-if="showLivestormLogo"
-          :src="LivestormLogo"
-          :alt="logoAlt"
-          class="w-10 h-10 ml-4 md:ml-0"
-          role="img"
+          :height="2.5"
+          :width="2.5"
+          :themed="false"
+          :animated="false"
+          inverted="auto"
+          :label="logoAlt"
+          class="ml-4 md:ml-0"
           @click="handleLogoClick"
-        >
+        />
         <div class="md:hidden">
           <UiButton
-            icon="i-ls-x-stream"
+            icon="i-ph-x"
             variant="tertiary"
             color="neutral"
             size="lg"
@@ -289,7 +292,7 @@ function handleLogoClick (event: MouseEvent) {
             <UiPopoverTrigger class="w-full cursor-pointer">
               <UiSideMenuItem
                 :label="translate('room_bottom-bar_controls-label_more')"
-                icon="i-ls-more-horizontal"
+                icon="i-ph-dots-three"
                 :is-active="false"
                 :inside-interactive="true"
                 :badge="moreBadge"
@@ -420,7 +423,7 @@ function handleLogoClick (event: MouseEvent) {
             <UiPopoverTrigger class="cursor-pointer">
               <UiSideMenuItem
                 :label="translate('room_bottom-bar_controls-label_more')"
-                icon="i-ls-more-vertical"
+                icon="i-ph-dots-three-vertical"
                 :is-active="false"
                 :inside-interactive="true"
               />

package/src/components/UiSideMenu/UiSideMenuItemContent.vue

@@ -103,7 +103,7 @@ const textAlignClass = computed(() => {
         isActive ? 'bg-actions-neutral-active-overlay text-actions-neutral-idle' : 'text-actions-neutral-idle-alpha-strong',
         // Avatar box is 40px; on mobile `p-1` makes its total height (48px)
         // match icon items (`p-3` + 24px icon). Both are 40px on desktop.
-        hasAvatarSlot ? 'p-1 md:p-0' : 'p-3',
+        hasAvatarSlot ? 'p-1 md:p-0' : 'p-2.5',
       ]"
     >
       <!-- Icon/avatar wrapper: anchors the notification badge to the icon's
@@ -119,7 +119,7 @@ const textAlignClass = computed(() => {
         <div
           v-if="icon"
           :class="[
-            'w-6 h-6 md:w-4 md:h-4',
+            'w-6 h-6 md:w-5 md:h-5',
             icon
           ]"
           aria-hidden="true"

package/src/components/UiStepper/UiStepperIndicator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { StepperIndicatorProps } from 'reka-ui'
 import { StepperIndicator } from 'reka-ui'
+import { useIconSize } from '../../composables/useIconSize'
 
 type Size = 'sm' | 'md' | 'lg'
 
@@ -13,16 +14,12 @@ interface UiStepperIndicatorProps extends StepperIndicatorProps {
 const { size = 'md', showCheckmark = true, icon } = defineProps<UiStepperIndicatorProps>()
 
 const sizeClasses = {
-  sm: 'size-6 text-content-text-md-regular',
-  md: 'size-8 text-content-text-md-regular',
-  lg: 'size-10 text-content-text-lg-regular',
+  sm: 'size-8 text-content-text-md-regular',
+  md: 'size-10 text-content-text-md-regular',
+  lg: 'size-12 text-content-text-lg-regular',
 }
 
-const iconSizeClasses = {
-  sm: 'size-3',
-  md: 'size-4',
-  lg: 'size-5',
-}
+const iconSizeClass = useIconSize(() => size)
 </script>
 
 <template>
@@ -34,13 +31,13 @@ const iconSizeClasses = {
     <span
       v-if="icon"
       class="stepper-custom-icon"
-      :class="[iconSizeClasses[size], icon]"
+      :class="[iconSizeClass, icon]"
     />
 
     <span
       v-if="showCheckmark"
-      class="stepper-checkmark i-ls-check"
-      :class="iconSizeClasses[size]"
+      class="stepper-checkmark i-ph-check"
+      :class="iconSizeClass"
     />
 
     <span class="stepper-number">