@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/components/UiRoomCountdown/UiRoomCountdown.vue

@@ -0,0 +1,376 @@
+<template>
+  <div class="ui-room-countdown">
+    <div
+      class="ui-room-countdown__dial"
+      :style="{ '--ui-room-countdown-size': sizeValue }"
+      role="timer"
+      aria-live="assertive"
+      :aria-label="isFinished ? label : `${remaining}`"
+    >
+      <div
+        class="ui-room-countdown__glass"
+        :class="{ 'ui-room-countdown__glass--out': live }"
+        aria-hidden="true"
+      />
+
+      <svg
+        class="ui-room-countdown__ring"
+        :class="{ 'ui-room-countdown__ring--out': live }"
+        viewBox="0 0 100 100"
+        aria-hidden="true"
+      >
+        <circle
+          class="ui-room-countdown__track"
+          cx="50"
+          cy="50"
+          r="46"
+        />
+        <circle
+          v-if="!isFinished"
+          class="ui-room-countdown__progress"
+          cx="50"
+          cy="50"
+          r="46"
+          path-length="1"
+          :style="{ animationDuration: `${seconds}s` }"
+        />
+        <g
+          v-if="!isFinished"
+          class="ui-room-countdown__head"
+          :style="{ animationDuration: `${seconds}s` }"
+        >
+          <circle
+            cx="50"
+            cy="4"
+            r="2"
+          />
+        </g>
+        <circle
+          v-if="isStarting"
+          class="ui-room-countdown__spinner"
+          cx="50"
+          cy="50"
+          r="46"
+          path-length="1"
+        />
+      </svg>
+
+      <Transition
+        name="ui-room-countdown-digit"
+        mode="out-in"
+      >
+        <span
+          v-if="!isFinished"
+          :key="remaining"
+          class="ui-room-countdown__digit"
+        >
+          {{ remaining }}
+        </span>
+      </Transition>
+
+      <span
+        v-if="isFinished"
+        class="ui-room-countdown__label"
+      >
+        <span
+          v-if="live"
+          class="ui-room-countdown__rec"
+          aria-hidden="true"
+        />
+        {{ label }}
+      </span>
+    </div>
+
+    <div
+      v-if="$slots.action"
+      class="ui-room-countdown__action"
+    >
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  seconds?: number
+  label?: string
+  size?: 'sm' | 'md' | 'lg'
+  finished?: boolean
+  live?: boolean
+}>(), {
+  seconds: 5,
+  label: 'You are live',
+  size: 'md',
+  finished: false,
+  live: false,
+})
+
+const emit = defineEmits<{
+  tick: [remaining: number]
+  finished: []
+}>()
+
+const remaining = ref(props.seconds)
+let timer: ReturnType<typeof setInterval> | undefined
+
+const isFinished = computed(() => props.finished || remaining.value <= 0)
+
+const isStarting = computed(() => isFinished.value && !props.live)
+
+const sizeValue = computed(() => ({
+  sm: '96px',
+  md: '200px',
+  lg: '288px',
+}[props.size]))
+
+function stop () {
+  clearInterval(timer)
+}
+
+watch(isFinished, (value) => {
+  if (!value) return
+
+  stop()
+  emit('finished')
+})
+
+onMounted(() => {
+  if (isFinished.value) return
+
+  timer = setInterval(() => {
+    remaining.value -= 1
+    emit('tick', remaining.value)
+
+    if (remaining.value <= 0) stop()
+  }, 1000)
+})
+
+onBeforeUnmount(stop)
+</script>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-room-countdown {
+  @apply flex flex-col items-center gap-6 text-text-neutral-base;
+}
+
+.ui-room-countdown__dial {
+  @apply relative grid place-items-center;
+  width: var(--ui-room-countdown-size);
+  height: var(--ui-room-countdown-size);
+  font-size: var(--ui-room-countdown-size);
+}
+
+.ui-room-countdown__glass {
+  @apply absolute inset-[7%] rounded-full bg-surface-neutral-alpha-100;
+  backdrop-filter: blur(var(--blur-blur-lg));
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ui-room-countdown__glass::after {
+  @apply absolute inset-0 rounded-full content-[''];
+  background: radial-gradient(circle, var(--color-surface-neutral-alpha-200) 0%, transparent 70%);
+  animation: ui-room-countdown-breath 1.4s ease-in-out infinite;
+}
+
+.ui-room-countdown__glass--out {
+  @apply opacity-0;
+  transform: scale(1.2);
+}
+
+.ui-room-countdown__ring {
+  @apply absolute inset-0 h-full w-full -rotate-90 overflow-visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+.ui-room-countdown__track {
+  @apply opacity-20;
+}
+
+.ui-room-countdown__ring--out {
+  @apply opacity-0;
+  transform: rotate(-90deg) scale(1.3);
+  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ui-room-countdown__progress {
+  stroke-dasharray: 1;
+  animation: ui-room-countdown-drain linear forwards;
+}
+
+.ui-room-countdown__spinner {
+  stroke-dasharray: 0.18 0.82;
+  transform-origin: 50px 50px;
+  animation: ui-room-countdown-spin 1.4s linear infinite;
+}
+
+.ui-room-countdown__head {
+  fill: currentColor;
+  stroke: none;
+  transform-origin: 50px 50px;
+  animation: ui-room-countdown-orbit linear forwards;
+}
+
+.ui-room-countdown__action {
+  @apply flex items-center justify-center;
+}
+
+.ui-room-countdown__digit {
+  @apply absolute inset-0 grid place-items-center leading-none;
+}
+
+.ui-room-countdown__label {
+  @apply absolute inset-0 flex items-center justify-center leading-none;
+}
+
+.ui-room-countdown__digit {
+  font-size: 0.44em;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.03em;
+}
+
+.ui-room-countdown__label {
+  font-size: 0.095em;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  gap: 0.5em;
+  animation: ui-room-countdown-zoom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
+}
+
+.ui-room-countdown__rec {
+  @apply relative h-[0.5em] w-[0.5em] shrink-0 rounded-full bg-actions-danger-idle;
+  transform-origin: right center;
+  animation: ui-room-countdown-rec-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
+}
+
+.ui-room-countdown__rec::after {
+  @apply absolute inset-0 rounded-full bg-actions-danger-idle content-[''];
+  animation: ui-room-countdown-rec-ping 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s infinite;
+}
+
+.ui-room-countdown-digit-enter-active {
+  animation: ui-room-countdown-digit-in 0.65s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ui-room-countdown-digit-leave-active {
+  transition: all 0.22s cubic-bezier(0.7, 0, 0.84, 0);
+}
+
+.ui-room-countdown-digit-leave-to {
+  opacity: 0;
+  filter: blur(0.03em);
+  transform: scale(0.6);
+}
+
+@keyframes ui-room-countdown-drain {
+  to {
+    stroke-dashoffset: 1;
+  }
+}
+
+@keyframes ui-room-countdown-digit-in {
+  0% {
+    opacity: 0;
+    filter: blur(0.03em);
+    transform: scale(1.3);
+  }
+  45% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  70% {
+    transform: scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(1);
+  }
+}
+
+@keyframes ui-room-countdown-breath {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes ui-room-countdown-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ui-room-countdown-orbit {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ui-room-countdown-zoom {
+  from {
+    opacity: 0;
+    filter: blur(0.02em);
+    transform: scale(0.88);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: scale(1);
+  }
+}
+
+@keyframes ui-room-countdown-rec-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+    margin-right: -1em;
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+    margin-right: 0;
+  }
+}
+
+@keyframes ui-room-countdown-rec-ping {
+  from {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2.2);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-room-countdown__progress,
+  .ui-room-countdown__spinner,
+  .ui-room-countdown__label,
+  .ui-room-countdown__glass,
+  .ui-room-countdown__glass::after,
+  .ui-room-countdown__rec,
+  .ui-room-countdown__rec::after,
+  .ui-room-countdown__head,
+  .ui-room-countdown__ring--out,
+  .ui-room-countdown-digit-enter-active,
+  .ui-room-countdown-digit-leave-active {
+    animation: none;
+    transition: none;
+  }
+}
+</style>

package/src/components/UiShell/UiShell.vue

@@ -6,8 +6,11 @@ import UiButton from '../UiButton/UiButton.vue'
 
 const props = withDefaults(defineProps<{
   openMenuLabel?: string
+  /** The shell canvas (gradient and overlays). Off when the host paints its own surface. */
+  showBackground?: boolean
 }>(), {
   openMenuLabel: 'Menu',
+  showBackground: true,
 })
 
 const slots = useSlots() as {
@@ -29,7 +32,10 @@ const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
     class="ui-shell h-dvh flex flex-col relative"
     data-sizes-primitives="Mode-1"
   >
-    <div class="ui-shell-backgrounds absolute inset-0 grid grid-cols-1 grid-rows-1 z-0">
+    <div
+      v-if="showBackground"
+      class="ui-shell-backgrounds absolute inset-0 grid grid-cols-1 grid-rows-1 z-0"
+    >
       <div class="ui-shell-background col-span-full row-span-full bg-gradient-to-tl from-surface-primary-100 to-surface-primary-300" />
       <div class="ui-shell-background col-span-full row-span-full bg-surface-neutral-invert-alpha-600" />
       <div class="ui-shell-background col-span-full row-span-full bg-surface-primary-alpha-100" />
@@ -44,7 +50,7 @@ const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
     <div class="flex-1 flex w-full relative min-h-0">
       <div
         v-if="slots.sidemenu"
-        class="dashboard-sidebar md:flex shrink-0 text-text-neutral-base flex z-40"
+        class="dashboard-sidebar md:flex shrink-0 text-text-neutral-base flex z-40 [anchor-name:--ui-shell-side-menu]"
       >
         <slot
           name="sidemenu"
@@ -52,7 +58,7 @@ const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
         />
       </div>
 
-      <div class="dashboard-content flex-1 flex flex-col z-10 min-h-0">
+      <div class="dashboard-content flex-1 flex flex-col z-10 min-w-0 min-h-0">
         <!--
           Fallback mobile menu trigger. The hamburger normally lives in
           UiPageHeader, but a page can render without a header — leaving no way

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Slot } from 'vue'
+import type { ComponentPublicInstance, Slot } from 'vue'
 import type { SideMenuCollapsedItem, SideMenuItemProps, SideMenuMoreItem } from './types'
 import UiSideMenuItem from './UiSideMenuItem.vue'
 import UiLogo from '../UiLogo/UiLogo.vue'
@@ -7,10 +7,15 @@ import UiButton from '../UiButton/UiButton.vue'
 import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
 import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
+import UiTooltipProvider from '../UiTooltip/UiTooltipProvider.vue'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import UiTooltipTrigger from '../UiTooltip/UiTooltipTrigger.vue'
+import UiTooltipContent from '../UiTooltip/UiTooltipContent.vue'
 import { useMobileMenu } from '../../composables/useMobileMenu'
+import { usePullGesture } from '../../composables/usePullGesture'
 import { useTranslate } from '../../utils/i18n'
-import { focusFirstMenuItem } from '../../utils'
-import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { focusFirstMenuItem } from '../../utils/a11y'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { SIDE_MENU_LAYOUT_KEY } from './injection'
 const { close, isOpen } = useMobileMenu()
 const translate = useTranslate()
@@ -81,6 +86,8 @@ const slots = defineSlots<{
    * `close` callback to dismiss the popover (e.g. when a nested popover opens).
    */
   collapsedMenuExtra?(props: { close: () => void }): Slot
+  /** Tooltip shown under the logo while it is pulled, with the stage reached so far. */
+  logoPullHint?(props: { stage: number }): Slot
 }>()
 
 const props = withDefaults(defineProps<{
@@ -105,6 +112,16 @@ const props = withDefaults(defineProps<{
    */
   moreBadge?: number | boolean
   showLivestormLogo?: boolean
+  /**
+   * Pointer travel (px, ascending) at which pulling the logo, in any
+   * direction, reaches each stage; `logoPull` emits the stage reached on
+   * release. Empty disables the gesture.
+   */
+  logoPullStages?: number[]
+  /** Travel (px) after which the pulled logo starts resisting; defaults to the last stage. */
+  logoPullResistFrom?: number
+  /** Visible travel the resisting logo tends toward; defaults to five times the last stage. */
+  logoPullMaxOffset?: number
   // Accessibility labels
   logoAlt?: string
   closeMenuLabel?: string
@@ -116,6 +133,9 @@ const props = withDefaults(defineProps<{
   organizationId?: string
 }>(), {
   showLivestormLogo: true,
+  logoPullStages: () => [],
+  logoPullResistFrom: undefined,
+  logoPullMaxOffset: undefined,
   logoAlt: 'Livestorm',
   closeMenuLabel: 'Close navigation menu',
   mainNavigationLabel: 'Main navigation',
@@ -162,7 +182,53 @@ const hasCollapsedMenu = computed(
   () => (!!props.collapsedMenuItems && props.collapsedMenuItems.length > 0) || !!slots.collapsedMenuExtra,
 )
 
+const emit = defineEmits<{
+  logoPull: [stage: number]
+}>()
+
+const pull = usePullGesture({
+  stages: () => props.logoPullStages,
+  resistFrom: () => props.logoPullResistFrom,
+  maxOffset: () => props.logoPullMaxOffset,
+  onRelease: stage => emit('logoPull', stage),
+})
+
+// A lean toward the pull and a size step per stage make the gesture legible;
+// grabbing shrinks the logo a touch, as if lifted out of its socket.
+const LOGO_PULL_DEG_PER_PX = 0.15
+const LOGO_PULL_MAX_DEG = 30
+const LOGO_PULL_GRAB_SHRINK_PCT = 4
+const LOGO_PULL_STAGE_GROWTH_PCT = 6
+
+const logoPullStyle = computed(() => {
+  if (!pull.enabled.value) return undefined
+  const { x, y } = pull.offset.value
+  const shrink = pull.isPulling.value ? LOGO_PULL_GRAB_SHRINK_PCT : 0
+  const lean = Math.max(-LOGO_PULL_MAX_DEG, Math.min(LOGO_PULL_MAX_DEG, x * LOGO_PULL_DEG_PER_PX))
+  return {
+    translate: `${x}px ${y}px`,
+    rotate: `${lean}deg`,
+    scale: String((100 - shrink + pull.stage.value * LOGO_PULL_STAGE_GROWTH_PCT) / 100),
+  }
+})
+
+// Each new stage ticks: a quick overshoot of the logo and a haptic where
+// supported. Reduced motion keeps the haptic only.
+const logo = ref<ComponentPublicInstance | null>(null)
+watch(pull.stage, (stage, previous) => {
+  if (stage <= previous) return
+  if ('vibrate' in navigator) navigator.vibrate(10)
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return
+  const el = logo.value?.$el as HTMLElement | undefined
+  el?.animate?.(
+    [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(1)' }],
+    { duration: 220, easing: 'ease-out' },
+  )
+})
+
 function handleLogoClick (event: MouseEvent) {
+  // The browser still fires a click after a pull; keep it off the click count.
+  if (pull.consumeDrag()) return
   if (event.detail === 4) {
     if (navigator.clipboard && props.organizationId) {
       navigator.clipboard.writeText(props.organizationId)
@@ -182,24 +248,63 @@ function handleLogoClick (event: MouseEvent) {
     <!-- Skip link for accessibility -->
     <router-link
       to="/"
-      class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-blue-600 focus:text-white focus:px-4 focus:py-2 focus:rounded bg-surface-overlay-alpha"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-actions-primary-idle focus:text-text-neutral-invert-base focus:px-4 focus:py-2 focus:rounded-row bg-surface-overlay-alpha"
     >
       {{ skipToMainContentLabel }}
     </router-link>
     <!-- Top -->
     <div class="flex flex-col md:items-center gap-8">
       <div class="flex items-center justify-between">
-        <UiLogo
+        <div
           v-if="showLivestormLogo"
-          :height="2.5"
-          :width="2.5"
-          :themed="false"
-          :animated="false"
-          inverted="auto"
-          :label="logoAlt"
-          class="ml-4 md:ml-0"
-          @click="handleLogoClick"
-        />
+          class="relative ml-4 md:ml-0"
+          :class="{ 'z-10': pull.enabled.value }"
+        >
+          <div
+            v-if="pull.enabled.value"
+            class="logo-pull-socket absolute top-0 left-0 w-10 h-10 rounded-[35%] pointer-events-none"
+            :class="{ 'logo-pull-socket-visible': pull.isPulling.value }"
+          />
+          <!-- Controlled tooltip: shown only while pulling, never on hover. -->
+          <UiTooltipProvider>
+            <UiTooltip :open="!!slots.logoPullHint && pull.isPulling.value">
+              <UiTooltipTrigger as-child>
+                <div
+                  :class="{
+                    'logo-pull touch-none select-none cursor-grab': pull.enabled.value,
+                    'logo-pull-active cursor-grabbing': pull.isPulling.value,
+                  }"
+                  :style="logoPullStyle"
+                  @pointerdown="pull.onPointerDown"
+                  @pointermove="pull.onPointerMove"
+                  @pointerup="pull.onPointerUp"
+                  @pointercancel="pull.onPointerCancel"
+                  @click="handleLogoClick"
+                >
+                  <UiLogo
+                    ref="logo"
+                    :height="2.5"
+                    :width="2.5"
+                    :themed="false"
+                    :animated="false"
+                    inverted="auto"
+                    :label="logoAlt"
+                  />
+                </div>
+              </UiTooltipTrigger>
+              <UiTooltipContent
+                side="bottom"
+                :side-offset="8"
+                update-position-strategy="always"
+              >
+                <slot
+                  name="logoPullHint"
+                  :stage="pull.stage.value"
+                />
+              </UiTooltipContent>
+            </UiTooltip>
+          </UiTooltipProvider>
+        </div>
         <div class="md:hidden">
           <UiButton
             icon="i-ph-x"
@@ -311,14 +416,14 @@ function handleLogoClick (event: MouseEvent) {
               :align="isMobile ? 'center' : 'end'"
               :side-offset="8"
               :collision-padding="16"
-              class="border-none bg-surface-neutral-300 rounded-2xl shadow-shadows-drop-shadow-2xl overflow-hidden data-[state=closed]:hidden"
+              class="border-none bg-surface-neutral-300 shadow-shadows-drop-shadow-2xl overflow-hidden data-[state=closed]:hidden"
               :class="isMobile
                 ? 'w-(--reka-popover-trigger-width)'
                 : 'w-[calc(var(--reka-popover-trigger-width)+2rem)]'"
               data-colors-semantic="light"
               @open-auto-focus="handleOpenAutoFocus"
             >
-              <ul class="flex flex-col md:items-center gap-2 p-2">
+              <ul class="flex flex-col md:items-center gap-2 px-1 py-2">
                 <li
                   v-for="item in collapsedMenuItems"
                   :key="`collapsed-menu-item-${item.label}`"
@@ -432,11 +537,11 @@ function handleLogoClick (event: MouseEvent) {
               side="right"
               align="end"
               :side-offset="8"
-              class="border-none bg-surface-neutral-300 rounded-2xl shadow-shadows-drop-shadow-2xl overflow-hidden"
+              class="border-none bg-surface-neutral-300 shadow-shadows-drop-shadow-2xl overflow-hidden"
               data-colors-semantic="light"
               @open-auto-focus="handleOpenAutoFocus"
             >
-              <div class="flex flex-col md:items-center gap-2 p-2">
+              <div class="flex flex-col md:items-center gap-2 px-1 py-2">
                 <li
                   v-for="item in bottomMenuItems"
                   :key="`popover-menu-item-${item.label}`"
@@ -489,6 +594,38 @@ function handleLogoClick (event: MouseEvent) {
 </template>
 
 <style scoped>
+/* Logo pull: free while dragging, springs back on release. */
+.logo-pull {
+  transition:
+    translate 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    rotate 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    scale 150ms ease-out;
+}
+
+.logo-pull-active {
+  transition: scale 150ms ease-out;
+}
+
+/* Recess left where the logo rests; lingers until the logo has landed. */
+.logo-pull-socket {
+  background: rgb(0 0 0 / 0.12);
+  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.25);
+  opacity: 0;
+  transition: opacity 200ms ease 250ms;
+}
+
+.logo-pull-socket-visible {
+  opacity: 1;
+  transition-delay: 0ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .logo-pull,
+  .logo-pull-socket {
+    transition: none;
+  }
+}
+
 /* Hide the more menu by default */
 .show-on-short-height-desktop-only {
   display: none;