@livestorm/ui-vue 3.0.0 → 4.0.0

package/src/composables/usePullGesture.ts

@@ -0,0 +1,142 @@
+import { computed, ref, toValue, type MaybeRefOrGetter } from 'vue'
+
+interface UsePullGestureOptions {
+  /**
+   * Pointer travel (px, ascending) at which each stage is reached. An empty
+   * list disables the gesture.
+   */
+  stages: MaybeRefOrGetter<number[]>
+  /**
+   * Travel (px) up to which the element tracks the pointer 1:1; resistance
+   * builds beyond it. Defaults to the last stage.
+   */
+  resistFrom?: MaybeRefOrGetter<number | undefined>
+  /**
+   * Visible travel the pulled element tends toward once resisting. Defaults to
+   * five times the last stage.
+   */
+  maxOffset?: MaybeRefOrGetter<number | undefined>
+  /** Called on release when at least one stage was reached. */
+  onRelease?: (stage: number) => void
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+const REST: Point = { x: 0, y: 0 }
+
+// Travel (px) under which a press still counts as a click, not a drag.
+const DRAG_SLOP = 4
+
+// Detent at each stage: the element holds still for this much travel past
+// the threshold, then catches up at double speed over the same distance.
+const DETENT = 8
+
+function detentLag (distance: number, stages: number[]) {
+  return stages.reduce(
+    (lag, threshold) => lag + Math.max(0, DETENT - Math.abs(distance - threshold - DETENT)),
+    0,
+  )
+}
+
+// Free travel up to `free`, then an iOS-style rubber band lets the visible
+// travel approach `max` asymptotically.
+function resist (distance: number, free: number, max: number) {
+  if (distance <= free) return distance
+  const tail = max - free
+  if (tail <= 0) return free
+  const beyond = distance - free
+  return free + (tail * beyond) / (beyond + tail)
+}
+
+/**
+ * Pull gesture in any direction with staged thresholds: the element follows
+ * the pointer through the stages and resists beyond the last one. Bind the
+ * returned pointer handlers to the pulled element and apply `offset` as its
+ * translation; on release the state snaps back to rest.
+ */
+export function usePullGesture (options: UsePullGestureOptions) {
+  const isPulling = ref(false)
+  const delta = ref<Point>(REST)
+  let pointerId: number | null = null
+  let start: Point = REST
+  let didDrag = false
+
+  const stages = computed(() => toValue(options.stages))
+  const enabled = computed(() => stages.value.length > 0)
+  const lastStage = computed(() => stages.value[stages.value.length - 1] ?? 0)
+  const resistFrom = computed(() => toValue(options.resistFrom) ?? lastStage.value)
+  const maxOffset = computed(() => toValue(options.maxOffset) ?? lastStage.value * 5)
+  const distance = computed(() => Math.hypot(delta.value.x, delta.value.y))
+  const stage = computed(() => stages.value.filter(threshold => distance.value >= threshold).length)
+  const offset = computed<Point>(() => {
+    if (distance.value === 0) return REST
+    const eased = distance.value - detentLag(distance.value, stages.value)
+    const ratio = resist(eased, resistFrom.value, maxOffset.value) / distance.value
+    return { x: delta.value.x * ratio, y: delta.value.y * ratio }
+  })
+
+  function reset () {
+    isPulling.value = false
+    delta.value = REST
+    pointerId = null
+  }
+
+  function onPointerDown (event: PointerEvent) {
+    if (!enabled.value || !event.isPrimary || event.button !== 0) return
+    pointerId = event.pointerId
+    start = { x: event.clientX, y: event.clientY }
+    didDrag = false
+    isPulling.value = true
+    // Keep receiving move/up events once the pointer leaves the element.
+    ;(event.currentTarget as Element | null)?.setPointerCapture?.(event.pointerId)
+  }
+
+  function track (event: PointerEvent) {
+    delta.value = { x: event.clientX - start.x, y: event.clientY - start.y }
+    if (distance.value > DRAG_SLOP) didDrag = true
+  }
+
+  function onPointerMove (event: PointerEvent) {
+    if (!isPulling.value || event.pointerId !== pointerId) return
+    track(event)
+  }
+
+  function onPointerUp (event: PointerEvent) {
+    if (!isPulling.value || event.pointerId !== pointerId) return
+    // A fast drag can end past the last delivered move: judge the release position.
+    track(event)
+    const reached = stage.value
+    reset()
+    if (reached > 0) options.onRelease?.(reached)
+  }
+
+  function onPointerCancel (event: PointerEvent) {
+    if (event.pointerId !== pointerId) return
+    reset()
+  }
+
+  /**
+   * Whether the press that just ended was a drag. Lets a click handler ignore
+   * the click the browser fires after a drag; the next press starts clean.
+   */
+  function consumeDrag () {
+    const wasDrag = didDrag
+    didDrag = false
+    return wasDrag
+  }
+
+  return {
+    enabled,
+    isPulling,
+    stage,
+    offset,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    consumeDrag,
+  }
+}

package/src/composables/useThemeAndModes.ts

@@ -1,4 +1,5 @@
 import { useStorage } from '@vueuse/core'
+import { storedThemingApplies } from './storedThemingApplies'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
 import {
   THEME_LIST,
@@ -124,10 +125,35 @@ export default function useThemeAndModes (
     list.value.set(selector, { element, modeOverride })
   }
 
+  /**
+   * Drops an element from the watch list. The registries outlive every
+   * component that registers with them, so an element that unmounts without
+   * this stays referenced — and keeps being written to — for the life of the
+   * page.
+   *
+   * The element is part of the descriptor because a selector is a surface, not
+   * an instance: where two instances of one surface overlap (a route leaving
+   * while its replacement mounts), the leaving one must not drop the entry the
+   * incoming one just registered.
+   * @param listType Which registry the element was added to.
+   * @param descriptor The selector it was registered under, and the element itself.
+   * @returns void
+   */
+  function removeElementToWatch (
+    listType: 'mode' | 'content',
+    { selector, element }: { selector: string, element: HTMLElement }
+  ) {
+    const list = listType === 'mode' ? modeTemplateRefsToWatch : contentTemplateRefsToWatch
+    if (list.value.get(selector)?.element === element) {
+      list.value.delete(selector)
+    }
+  }
+
   return {
     initOnAppMounted,
     registerWatchers,
     addElementToWatch,
+    removeElementToWatch,
     updateContentMode,
 
     updateTheme,
@@ -214,7 +240,8 @@ const DYNAMIC_TOKENS_STORAGE_KEY = 'customThemeTokens'
  */
 function applyStoredDynamicTokens () {
   try {
-    if (localStorage.getItem('ls-internal-theming') !== 'true') return
+    // Seed tokens are picker output — same consumption rule as stored modes.
+    if (!storedThemingApplies()) return
 
     const stored = localStorage.getItem(DYNAMIC_TOKENS_STORAGE_KEY)
     if (!stored) return

package/src/css/body.css

@@ -14,6 +14,21 @@
     line-height: 1.5;
     font-weight: 400;
     color: var(--color-grey-700);
+    font-feature-settings: 'cv01', 'cv05', 'cv09', 'cv11', 'ss03';
+    font-optical-sizing: auto;
+    font-kerning: normal;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
   }
 }
 
@@ -34,5 +49,5 @@
   https://css-tricks.com/almanac/selectors/f/focus-visible/#aa-how-do-browsers-determine-when-something-is-focus-visible
 */
 *:focus-visible:not(input, .base-input, textarea, .v-popper__popper, .focus-indicator-none, [contenteditable]) {
-  @apply ring-2 ring-inset ring-focus-ring;
+  @apply focus-ring;
 }

package/src/css/fonts.css

@@ -1,10 +1,44 @@
 /*
-  Inter via Google Fonts — kept OUT of the base stylesheet (./style) on
-  purpose: a third-party font request must be the consumer's choice (GDPR,
-  self-hosting). Apps that want the quick path import this file once:
+  Inter Variable, served from the inter-ui package (OFL-1.1) - kept OUT of
+  the base stylesheet (./style) on purpose: loading a font must stay the
+  consumer's choice. Apps that want the quick path import this file once:
 
     import '@livestorm/ui-vue/fonts'
 
-  The monorepo keeps loading it through ui-vue-legacy's style chain.
+  The Latin subsets come last so the browser tries them first; it downloads a
+  full file only for text they do not cover. Their unicode-range is the
+  subset's own character map.
 */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable/InterVariable-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable-latin/InterVariable-subset.woff2') format('woff2');
+  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('inter-ui/variable-latin/InterVariable-Italic-subset.woff2') format('woff2');
+  unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-200B, U+2010-2027, U+202F-2055, U+2057, U+205F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
+}

package/src/global.d.ts

@@ -13,18 +13,26 @@ import type UiButtonGroup from './components/UiButtonGroup/UiButtonGroup.vue'
 import type UiButtonGroupItem from './components/UiButtonGroup/UiButtonGroupItem.vue'
 import type UiCard from './components/UiCard/UiCard.vue'
 import type UiCarousel from './components/UiCarousel/UiCarousel.vue'
+import type UiChoice from './components/UiChoice/UiChoice.vue'
 import type UiColorField from './components/UiColorField/UiColorField.vue'
 import type UiColorPicker from './components/UiColorPicker/UiColorPicker.vue'
+import type UiCombobox from './components/UiCombobox/UiCombobox.vue'
+import type UiDataTable from './components/UiDataTable/UiDataTable.vue'
 import type UiDialog from './components/UiDialog/UiDialog.vue'
 import type UiDialogClose from './components/UiDialog/UiDialogClose.vue'
 import type UiDialogContent from './components/UiDialog/UiDialogContent.vue'
 import type UiDialogFooter from './components/UiDialog/UiDialogFooter.vue'
 import type UiDialogTrigger from './components/UiDialog/UiDialogTrigger.vue'
+import type UiDrawer from './components/UiDrawer/UiDrawer.vue'
+import type UiDrawerContent from './components/UiDrawer/UiDrawerContent.vue'
+import type UiDrawerTrigger from './components/UiDrawer/UiDrawerTrigger.vue'
 import type UiDropdown from './components/UiDropdown/UiDropdown.vue'
 import type UiDropdownContent from './components/UiDropdown/UiDropdownContent.vue'
+import type UiDropdownGroup from './components/UiDropdown/UiDropdownGroup.vue'
 import type UiDropdownItem from './components/UiDropdown/UiDropdownItem.vue'
 import type UiDropdownSeparator from './components/UiDropdown/UiDropdownSeparator.vue'
 import type UiDropdownTrigger from './components/UiDropdown/UiDropdownTrigger.vue'
+import type UiEmojiPickerList from './components/UiEmojiPickerList/UiEmojiPickerList.vue'
 import type UiEmptyState from './components/UiEmptyState/UiEmptyState.vue'
 import type UiFieldWrapper from './components/UiFieldWrapper/UiFieldWrapper.vue'
 import type UiFormField from './components/UiForm/UiFormField.vue'
@@ -39,6 +47,7 @@ import type UiLabel from './components/UiLabel/UiLabel.vue'
 import type UiList from './components/UiList/UiList.vue'
 import type UiListItem from './components/UiListItem/UiListItem.vue'
 import type UiLoader from './components/UiLoader/UiLoader.vue'
+import type UiSpinnerIcon from './components/UiLoader/UiSpinnerIcon.vue'
 import type UiLogo from './components/UiLogo/UiLogo.vue'
 import type UiMenu from './components/UiMenu/UiMenu.vue'
 import type UiMenuContent from './components/UiMenu/UiMenuContent.vue'
@@ -50,14 +59,21 @@ import type UiMenuSub from './components/UiMenu/UiMenuSub.vue'
 import type UiMenuSubContent from './components/UiMenu/UiMenuSubContent.vue'
 import type UiMenuSubTrigger from './components/UiMenu/UiMenuSubTrigger.vue'
 import type UiMenuTrigger from './components/UiMenu/UiMenuTrigger.vue'
+import type UiNestedOptions from './components/UiNestedOptions/UiNestedOptions.vue'
 import type UiPage from './components/UiPage/UiPage.vue'
 import type UiPageHeader from './components/UiPageHeader/UiPageHeader.vue'
+import type UiPagination from './components/UiPagination/UiPagination.vue'
+import type UiPane from './components/UiPane/UiPane.vue'
+import type UiPaneContent from './components/UiPane/UiPaneContent.vue'
+import type UiPaneTrigger from './components/UiPane/UiPaneTrigger.vue'
 import type UiPopover from './components/UiPopover/UiPopover.vue'
 import type UiPopoverAnchor from './components/UiPopover/UiPopoverAnchor.vue'
 import type UiPopoverContent from './components/UiPopover/UiPopoverContent.vue'
 import type UiPopoverTrigger from './components/UiPopover/UiPopoverTrigger.vue'
 import type UiProgress from './components/UiProgress/UiProgress.vue'
+import type UiRating from './components/UiRating/UiRating.vue'
 import type UiRoomButton from './components/UiRoomButton/UiRoomButton.vue'
+import type UiRoomCountdown from './components/UiRoomCountdown/UiRoomCountdown.vue'
 import type UiShell from './components/UiShell/UiShell.vue'
 import type UiSideMenu from './components/UiSideMenu/UiSideMenu.vue'
 import type UiSideMenuBottom from './components/UiSideMenu/UiSideMenuBottom.vue'
@@ -72,6 +88,8 @@ import type UiStepperSeparator from './components/UiStepper/UiStepperSeparator.v
 import type UiStepperTitle from './components/UiStepper/UiStepperTitle.vue'
 import type UiSwitch from './components/UiSwitch/UiSwitch.vue'
 import type UiTable from './components/UiTable/UiTable.vue'
+import type UiTableActionsCell from './components/UiTable/UiTableActionsCell.vue'
+import type UiTableActionsHeaderCell from './components/UiTable/UiTableActionsHeaderCell.vue'
 import type UiTableBody from './components/UiTable/UiTableBody.vue'
 import type UiTableCell from './components/UiTable/UiTableCell.vue'
 import type UiTableHeader from './components/UiTable/UiTableHeader.vue'
@@ -110,18 +128,26 @@ declare module 'vue' {
     UiButtonGroupItem: typeof UiButtonGroupItem
     UiCard: typeof UiCard
     UiCarousel: typeof UiCarousel
+    UiChoice: typeof UiChoice
     UiColorField: typeof UiColorField
     UiColorPicker: typeof UiColorPicker
+    UiCombobox: typeof UiCombobox
+    UiDataTable: typeof UiDataTable
     UiDialog: typeof UiDialog
     UiDialogClose: typeof UiDialogClose
     UiDialogContent: typeof UiDialogContent
     UiDialogFooter: typeof UiDialogFooter
     UiDialogTrigger: typeof UiDialogTrigger
+    UiDrawer: typeof UiDrawer
+    UiDrawerContent: typeof UiDrawerContent
+    UiDrawerTrigger: typeof UiDrawerTrigger
     UiDropdown: typeof UiDropdown
     UiDropdownContent: typeof UiDropdownContent
+    UiDropdownGroup: typeof UiDropdownGroup
     UiDropdownItem: typeof UiDropdownItem
     UiDropdownSeparator: typeof UiDropdownSeparator
     UiDropdownTrigger: typeof UiDropdownTrigger
+    UiEmojiPickerList: typeof UiEmojiPickerList
     UiEmptyState: typeof UiEmptyState
     UiFieldWrapper: typeof UiFieldWrapper
     UiFormField: typeof UiFormField
@@ -136,6 +162,7 @@ declare module 'vue' {
     UiList: typeof UiList
     UiListItem: typeof UiListItem
     UiLoader: typeof UiLoader
+    UiSpinnerIcon: typeof UiSpinnerIcon
     UiLogo: typeof UiLogo
     UiMenu: typeof UiMenu
     UiMenuContent: typeof UiMenuContent
@@ -147,14 +174,21 @@ declare module 'vue' {
     UiMenuSubContent: typeof UiMenuSubContent
     UiMenuSubTrigger: typeof UiMenuSubTrigger
     UiMenuTrigger: typeof UiMenuTrigger
+    UiNestedOptions: typeof UiNestedOptions
     UiPage: typeof UiPage
     UiPageHeader: typeof UiPageHeader
+    UiPagination: typeof UiPagination
+    UiPane: typeof UiPane
+    UiPaneContent: typeof UiPaneContent
+    UiPaneTrigger: typeof UiPaneTrigger
     UiPopover: typeof UiPopover
     UiPopoverAnchor: typeof UiPopoverAnchor
     UiPopoverContent: typeof UiPopoverContent
     UiPopoverTrigger: typeof UiPopoverTrigger
     UiProgress: typeof UiProgress
+    UiRating: typeof UiRating
     UiRoomButton: typeof UiRoomButton
+    UiRoomCountdown: typeof UiRoomCountdown
     UiShell: typeof UiShell
     UiSideMenu: typeof UiSideMenu
     UiSideMenuBottom: typeof UiSideMenuBottom
@@ -169,6 +203,8 @@ declare module 'vue' {
     UiStepperTitle: typeof UiStepperTitle
     UiSwitch: typeof UiSwitch
     UiTable: typeof UiTable
+    UiTableActionsCell: typeof UiTableActionsCell
+    UiTableActionsHeaderCell: typeof UiTableActionsHeaderCell
     UiTableBody: typeof UiTableBody
     UiTableCell: typeof UiTableCell
     UiTableHeader: typeof UiTableHeader

package/src/theming/colorScale.ts

@@ -0,0 +1,173 @@
+import { parse, converter, clampChroma, formatHex } from 'culori'
+
+// --- OKLCH lightness & chroma targets ---
+// Calibrated to reproduce the static ui-tokens palette exactly at the
+// Livestorm seed (#3073ff = brand 500), pinned by colorScale.spec.ts.
+// l = target lightness, cf = chroma factor (x seed chroma), hOff = hue
+// offset, so other seeds keep the palette's hue drift.
+//
+// 500 is a fixed rung like every other step (its l happens to be the
+// Livestorm seed's own). The seed only contributes hue and chroma, otherwise
+// a light or dark seed would break the light-to-dark ordering of the ramp.
+
+export const BRAND_SCALE = {
+  100: { l: 0.9823, cf: 0.0376, hOff: 8.79 },
+  200: { l: 0.9577, cf: 0.0906, hOff: 4.75 },
+  300: { l: 0.9290, cf: 0.1542, hOff: 1.04 },
+  400: { l: 0.7250, cf: 0.6476, hOff: 0.44 },
+  500: { l: 0.5961, cf: 1, hOff: 0 },
+  600: { l: 0.4428, cf: 0.9451, hOff: 0.66 },
+  700: { l: 0.3137, cf: 0.7551, hOff: 0.89 },
+  800: { l: 0.2729, cf: 0.6492, hOff: 0.79 },
+  900: { l: 0.2412, cf: 0.5471, hOff: 0.34 },
+} as const
+
+export const NEUTRAL_SCALE = {
+  lightBg: { l: 0.9904, cf: 0.0206, hOff: -4.21 },
+  100: { l: 0.9760, cf: 0.0318, hOff: 6.01 },
+  200: { l: 0.9549, cf: 0.0452, hOff: 4.82 },
+  300: { l: 0.9278, cf: 0.0646, hOff: 5.95 },
+  400: { l: 0.7065, cf: 0.2241, hOff: 5.20 },
+  500: { l: 0.5686, cf: 0.3199, hOff: 4.13 },
+  600: { l: 0.4480, cf: 0.3622, hOff: 3.67 },
+  // 650/675: dark elevated-surface primitives (surface-neutral-elevated-200/100)
+  // from the 2026-09 Supernova sync; calibrated like the rest of the ramp.
+  650: { l: 0.4091, cf: 0.3771, hOff: 3.65 },
+  675: { l: 0.3584, cf: 0.3331, hOff: 2.93 },
+  700: { l: 0.3109, cf: 0.3019, hOff: 2.71 },
+  800: { l: 0.2609, cf: 0.2425, hOff: 3.52 },
+  900: { l: 0.2219, cf: 0.1955, hOff: 4.56 },
+  darkBg: { l: 0.1847, cf: 0.1470, hOff: 4.16 },
+} as const
+
+export const ALPHA_STEPS = [0.04, 0.08, 0.12, 0.2, 0.32, 0.52, 0.72, 0.84, 0.92] as const
+
+// --- Types ---
+
+export interface ScaleStep {
+  l: number
+  cf: number
+  hOff: number
+}
+
+export interface OklchColor {
+  mode: 'oklch'
+  l: number
+  c: number
+  h: number
+}
+
+export interface BrandScale {
+  100: string; 200: string; 300: string
+  400: string; 500: string; 600: string
+  700: string; 800: string; 900: string
+}
+
+interface NeutralScale {
+  lightBg: string; darkBg: string
+  100: string; 200: string; 300: string
+  400: string; 500: string; 600: string
+  650: string; 675: string
+  700: string; 800: string; 900: string
+}
+
+// --- Color math ---
+
+const toOklch = converter('oklch')
+const toRgb = converter('rgb')
+
+export function seedToOklch(hex: string): OklchColor {
+  const parsed = parse(hex)
+  if (!parsed) throw new Error(`Invalid color: ${hex}`)
+  const oklch = toOklch(parsed)
+  return {
+    mode: 'oklch',
+    l: oklch.l ?? 0,
+    c: oklch.c ?? 0,
+    h: oklch.h ?? 0,
+  }
+}
+
+// Recover the seed (hue + chroma) whose brand rung `step` renders as `hex` —
+// the inverse of stepOklch: undo the rung's chroma factor and hue offset.
+// Generation reads only hue + chroma, so lightness is carried through but
+// irrelevant. NOTE: this round-trips losslessly only for rungs whose forward
+// transform stays in sRGB gamut — the cf≈1 rungs (400/500/600). Light/dark
+// rungs clamp on the way out and cannot be inverted exactly, hence the narrow
+// step type.
+export function seedFromBrandStep(hex: string, step: 400 | 500 | 600): OklchColor {
+  const seed = seedToOklch(hex)
+  const { cf, hOff } = BRAND_SCALE[step]
+  return { mode: 'oklch', l: seed.l, c: seed.c / cf, h: seed.h - hOff }
+}
+
+function clampedOklch(seed: OklchColor, l: number, cf: number, hue: number = seed.h): OklchColor {
+  const clamped = clampChroma({ mode: 'oklch', l, c: seed.c * cf, h: hue }, 'oklch')
+  return { mode: 'oklch', l: clamped.l, c: clamped.c, h: clamped.h ?? hue }
+}
+
+export function oklchToHex(color: OklchColor): string {
+  return formatHex(color)
+}
+
+// sRGB string forms matching the ui-tokens convention (rgb / rgba). Applied
+// app tokens use these so they line up exactly with the static palette and the
+// hex swatch previews, instead of round-tripping through the browser's own
+// oklch pipeline (which can quantize a rung differently).
+function rgbChannels(color: OklchColor): [number, number, number] {
+  const { r, g, b } = toRgb(color)
+  const to255 = (v: number) => Math.round(Math.min(1, Math.max(0, v)) * 255)
+  return [to255(r), to255(g), to255(b)]
+}
+
+export function oklchToRgb(color: OklchColor): string {
+  const [r, g, b] = rgbChannels(color)
+  return `rgb(${r}, ${g}, ${b})`
+}
+
+export function oklchToRgba(color: OklchColor, alpha: number): string {
+  const [r, g, b] = rgbChannels(color)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+// --- Scale generators ---
+// One pair of helpers drives every ramp (brand, neutral, legacy, email): a
+// scale lives in its {l, cf, hOff} table and is applied to the seed here, so
+// there is a single place that turns a table into colors.
+
+export function stepOklch(seed: OklchColor, target: ScaleStep): OklchColor {
+  return clampedOklch(seed, target.l, target.cf, seed.h + target.hOff)
+}
+
+// Object.keys() widens to string[]; the cast restores the table's key type.
+export function scaleToOklch<K extends PropertyKey>(
+  seed: OklchColor,
+  table: Record<K, ScaleStep>,
+): Record<K, OklchColor> {
+  const out = {} as Record<K, OklchColor>
+  for (const key of Object.keys(table) as unknown as K[]) {
+    out[key] = stepOklch(seed, table[key])
+  }
+  return out
+}
+
+export function scaleToHex<K extends PropertyKey>(
+  seed: OklchColor,
+  table: Record<K, ScaleStep>,
+): Record<K, string> {
+  const out = {} as Record<K, string>
+  for (const key of Object.keys(table) as unknown as K[]) {
+    out[key] = oklchToHex(stepOklch(seed, table[key]))
+  }
+  return out
+}
+
+export const generateBrandOklch = (seed: OklchColor): Record<keyof BrandScale, OklchColor> =>
+  scaleToOklch(seed, BRAND_SCALE)
+
+export const generateNeutralOklch = (seed: OklchColor): Record<keyof NeutralScale, OklchColor> =>
+  scaleToOklch(seed, NEUTRAL_SCALE)
+
+export const generateBrandScale = (seed: OklchColor): BrandScale => scaleToHex(seed, BRAND_SCALE)
+
+export const generateNeutralScale = (seed: OklchColor): NeutralScale => scaleToHex(seed, NEUTRAL_SCALE)

package/src/theming/legacyColorScale.ts

@@ -0,0 +1,58 @@
+import { scaleToOklch, scaleToHex, type OklchColor } from './colorScale'
+
+// --- Legacy OKLCH targets ---
+// Calibrated to reproduce the static legacy palette (--color-livestorm-*,
+// --color-grey-*) exactly at the Livestorm seed (#3073ff). Same l/cf/hOff
+// scheme as colorScale.ts.
+
+const LEGACY_BRAND_SCALE = {
+  100: { l: 0.9673, cf: 0.0697, hOff:  7.45 },
+  200: { l: 0.9247, cf: 0.1567, hOff:  5.10 },
+  300: { l: 0.8398, cf: 0.3526, hOff:  3.60 },
+  400: { l: 0.7232, cf: 0.6433, hOff:  3.08 },
+  // no 500 in the legacy palette
+  600: { l: 0.5316, cf: 1.1786, hOff:  0.66 },
+  700: { l: 0.4428, cf: 0.9453, hOff:  0.66 },
+  800: { l: 0.3595, cf: 0.8656, hOff:  1.67 },
+} as const
+
+const LEGACY_NEUTRAL_SCALE = {
+  100: { l: 0.9759, cf: 0.0132, hOff:   2.00 },
+  200: { l: 0.9469, cf: 0.0269, hOff: -22.72 },
+  300: { l: 0.8605, cf: 0.0702, hOff: -27.13 },
+  600: { l: 0.5258, cf: 0.1230, hOff: -22.05 },
+  700: { l: 0.4634, cf: 0.1139, hOff: -20.73 },
+  900: { l: 0.2831, cf: 0.0610, hOff: -33.07 },
+} as const
+
+// --- Types ---
+
+type LegacyBrandStep = 100 | 200 | 300 | 400 | 600 | 700 | 800
+type LegacyNeutralStep = 100 | 200 | 300 | 600 | 700 | 900
+
+interface LegacyBrandScale {
+  100: string; 200: string; 300: string; 400: string
+  600: string; 700: string; 800: string
+}
+
+interface LegacyNeutralScale {
+  100: string; 200: string; 300: string
+  600: string; 700: string; 900: string
+}
+
+export const LEGACY_BRAND_STEPS: readonly LegacyBrandStep[] = [100, 200, 300, 400, 600, 700, 800] as const
+export const LEGACY_NEUTRAL_STEPS: readonly LegacyNeutralStep[] = [100, 200, 300, 600, 700, 900] as const
+
+// --- Generators ---
+
+export const generateLegacyBrandOklch = (seed: OklchColor): Record<LegacyBrandStep, OklchColor> =>
+  scaleToOklch(seed, LEGACY_BRAND_SCALE)
+
+export const generateLegacyNeutralOklch = (seed: OklchColor): Record<LegacyNeutralStep, OklchColor> =>
+  scaleToOklch(seed, LEGACY_NEUTRAL_SCALE)
+
+export const generateLegacyBrandScale = (seed: OklchColor): LegacyBrandScale =>
+  scaleToHex(seed, LEGACY_BRAND_SCALE)
+
+export const generateLegacyNeutralScale = (seed: OklchColor): LegacyNeutralScale =>
+  scaleToHex(seed, LEGACY_NEUTRAL_SCALE)

package/src/theming/presetColors.ts

@@ -0,0 +1,33 @@
+import { seedToOklch, generateBrandScale } from './colorScale'
+
+const PRESET_COLORS = [
+  '#9b6dd7', '#4829c7', '#0b42c3', '#1e7fb8',
+  '#1ba8a0', '#0e7a5e', '#2d8c4e', '#5a7a11',
+  '#8a7b12', '#b0780e', '#d05a3a', '#a12244',
+  '#c41560', '#d436a8', '#9b21c4', '#6321a8',
+] as const
+
+interface PresetSwatch {
+  seed: string
+  light: string
+  dark: string
+}
+
+export const presetSwatches: PresetSwatch[] = PRESET_COLORS.map((hex) => {
+  const brand = generateBrandScale(seedToOklch(hex))
+  return { seed: hex, light: brand[400], dark: brand[600] }
+})
+
+export interface BrandedPalette extends PresetSwatch {
+  name: string
+}
+
+// Branded workspace palettes from the Email Templates V2 figma, mirrored by
+// @livestorm/ui-tokens (supernova: base = Livestorm, customer1/2/3).
+// seed = brand-500, light = brand-400, dark = brand-600.
+export const brandedPalettes: BrandedPalette[] = [
+  { name: 'Livestorm', seed: '#3073ff', light: '#76a4ff', dark: '#0b42c3' },
+  { name: 'Customer 1', seed: '#d04134', light: '#e5837d', dark: '#9e2114' },
+  { name: 'Customer 2', seed: '#1a8290', light: '#29b0c2', dark: '#115d67' },
+  { name: 'Customer 3', seed: '#9a51e2', light: '#bd8aef', dark: '#7420c9' },
+]