@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/global.d.ts

@@ -13,29 +13,41 @@ 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'
 import type UiHorizontalSeparator from './components/UiHorizontalSeparator/UiHorizontalSeparator.vue'
 import type UiInputCheckbox from './components/UiInputCheckbox/UiInputCheckbox.vue'
+import type UiInputEmoji from './components/UiInputEmoji/UiInputEmoji.vue'
+import type UiInputRadio from './components/UiInputRadio/UiInputRadio.vue'
+import type UiInputRadioGroup from './components/UiInputRadio/UiInputRadioGroup.vue'
 import type UiInputSelect from './components/UiInputSelect/UiInputSelect.vue'
 import type UiInputTextarea from './components/UiInputTextarea/UiInputTextarea.vue'
 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'
@@ -47,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'
@@ -67,7 +86,10 @@ import type UiStepperIndicator from './components/UiStepper/UiStepperIndicator.v
 import type UiStepperItem from './components/UiStepper/UiStepperItem.vue'
 import type UiStepperSeparator from './components/UiStepper/UiStepperSeparator.vue'
 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'
@@ -106,29 +128,41 @@ 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
     UiHorizontalSeparator: typeof UiHorizontalSeparator
     UiInputCheckbox: typeof UiInputCheckbox
+    UiInputEmoji: typeof UiInputEmoji
+    UiInputRadio: typeof UiInputRadio
+    UiInputRadioGroup: typeof UiInputRadioGroup
     UiInputSelect: typeof UiInputSelect
     UiInputTextarea: typeof UiInputTextarea
     UiLabel: typeof UiLabel
     UiList: typeof UiList
     UiListItem: typeof UiListItem
     UiLoader: typeof UiLoader
+    UiSpinnerIcon: typeof UiSpinnerIcon
     UiLogo: typeof UiLogo
     UiMenu: typeof UiMenu
     UiMenuContent: typeof UiMenuContent
@@ -140,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
@@ -160,7 +201,10 @@ declare module 'vue' {
     UiStepperItem: typeof UiStepperItem
     UiStepperSeparator: typeof UiStepperSeparator
     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' },
+]

package/src/theming/primitiveTokens.ts

@@ -0,0 +1,71 @@
+import {
+  seedToOklch,
+  generateBrandOklch,
+  generateNeutralOklch,
+  oklchToRgb,
+  oklchToRgba,
+  ALPHA_STEPS,
+  type OklchColor,
+} from './colorScale'
+import {
+  generateLegacyBrandOklch,
+  generateLegacyNeutralOklch,
+} from './legacyColorScale'
+
+// --- Token generation ---
+
+// Emit one CSS var per rung, kebab-casing the scale key so 100 -> "100",
+// lightBg -> "light-bg", darkBg -> "dark-bg".
+function emitScale(map: Record<string, string>, prefix: string, scale: object): void {
+  for (const [key, color] of Object.entries(scale)) {
+    const suffix = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+    map[`${prefix}-${suffix}`] = oklchToRgb(color as OklchColor)
+  }
+}
+
+export function generateTokenMap(seedHex: string): Record<string, string> {
+  const seed = seedToOklch(seedHex)
+  const brand = generateBrandOklch(seed)
+  const neutral = generateNeutralOklch(seed)
+  const map: Record<string, string> = {}
+
+  emitScale(map, '--color-brand', brand)
+  emitScale(map, '--color-neutral', neutral)
+  emitScale(map, '--color-livestorm', generateLegacyBrandOklch(seed))
+  emitScale(map, '--color-grey', generateLegacyNeutralOklch(seed))
+
+  // The dark neutral-alpha ramp darkens its base as the alpha grows, matching
+  // the static ui-tokens: neutral-800 for 100/200/300/400, neutral-900 for
+  // 500/600/700, darkBg for 800/900. A single base leaves the heavier steps a
+  // rung too light (the shell alpha-600 overlay shifts on apply), so we pick
+  // the base per step. Every other ramp keeps one base across all steps.
+  const neutralAlphaDarkBases: OklchColor[] = [
+    neutral[800], neutral[800], neutral[800], neutral[800],
+    neutral[900], neutral[900], neutral[900],
+    neutral.darkBg, neutral.darkBg,
+  ]
+  const sameBase = (base: OklchColor): OklchColor[] => ALPHA_STEPS.map(() => base)
+
+  const alphaRamps: Array<{ prefix: string; bases: OklchColor[] }> = [
+    { prefix: '--color-brand-alpha-dark', bases: sameBase(brand[600]) },
+    { prefix: '--color-brand-alpha-light', bases: sameBase(brand[400]) },
+    { prefix: '--color-neutral-alpha-dark', bases: neutralAlphaDarkBases },
+    { prefix: '--color-neutral-alpha-light', bases: sameBase(neutral[100]) },
+  ]
+
+  for (const { prefix, bases } of alphaRamps) {
+    bases.forEach((base, i) => {
+      map[`${prefix}-${(i + 1) * 100}`] = oklchToRgba(base, ALPHA_STEPS[i])
+    })
+  }
+
+  return map
+}
+
+// --- Public API ---
+
+export function generatePrimitiveTokens(seedHex: string, selector = '[data-colors-primitive="dynamic"]'): string {
+  const map = generateTokenMap(seedHex)
+  const lines = Object.entries(map).map(([prop, val]) => `  ${prop}: ${val};`)
+  return `${selector} {\n${lines.join('\n')}\n}`
+}

package/src/utils/effectiveOpacity.ts

@@ -0,0 +1,8 @@
+/** Opacity an element is painted with once every ancestor's opacity applies, for browser specs */
+export function effectiveOpacity (target: Element): number {
+  let opacity = 1
+  for (let el: Element | null = target; el && el !== document.documentElement; el = el.parentElement) {
+    opacity *= Number(getComputedStyle(el).opacity)
+  }
+  return opacity
+}

package/src/utils/i18n.ts

@@ -11,13 +11,19 @@ const FALLBACK_BUNDLES: Record<string, Record<string, string>> = {
   en: {
     general_close: 'Close',
     general_dialog_title: 'Dialog',
+    'general_form_multiselect-select-all': 'Select all',
     'general_misc_copied-text': 'Copied!',
+    'general_table_more-actions': 'More actions',
+    'general_table_select-row': 'Select row',
     'room_bottom-bar_controls-label_more': 'More',
   },
   fr: {
     general_close: 'Fermer',
     general_dialog_title: 'Dialog',
+    'general_form_multiselect-select-all': 'Tout sélectionner',
     'general_misc_copied-text': 'Copié !',
+    'general_table_more-actions': 'Plus d\'actions',
+    'general_table_select-row': 'Sélectionner la ligne',
     'room_bottom-bar_controls-label_more': 'Plus',
   },
 }

package/src/utils/numbers.ts

@@ -58,4 +58,4 @@ function formatPercentage (value: number | undefined | null, options?: Percentag
   return result
 }
 
-export { formatNumber, formatPercentage, preventLessThanZero }
+export { formatNumber, formatPercentage }

package/src/utils/responsive.d.ts

@@ -0,0 +1,14 @@
+// `allowJs` does not apply to files resolved inside `node_modules`, so consumers
+// importing this package's sources need declarations for its plain-JS modules.
+import type { Plugin } from 'vue'
+import type { ResponsiveGlobalComponentProperty } from './responsive.types'
+
+/**
+ * Viewport state shared by the whole app. Lazily created on first use, so
+ * components work with no plugin registration: installing the plugin below is
+ * only needed to customize the flags or to read `$responsive` in templates.
+ */
+export declare function useResponsive (): ResponsiveGlobalComponentProperty
+
+declare const responsive: Plugin
+export default responsive

package/src/utils/tokenColor.ts

@@ -0,0 +1,9 @@
+/** Computed colour of a token as the cascade resolves it inside `scope`, for browser specs */
+export function tokenColor (name: string, scope: Element = document.body): string {
+  const probe = document.createElement('span')
+  probe.style.color = `var(${name})`
+  scope.append(probe)
+  const color = getComputedStyle(probe).color
+  probe.remove()
+  return color
+}