@leavepulse/ui 0.29.4 → 0.30.0

package/dist/index.js

@@ -2,84 +2,88 @@ import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
 import { _ as _2 } from "./chunks/LpAddressInput-Bk6D8Bcy.js";
 import { _ as _3 } from "./chunks/LpMapPicker-CXvoTrAe.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-BJk3b-u4.js";
-import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
-import { _ as _7 } from "./chunks/LpAvatar-D3l4nabg.js";
-import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
-import { _ as _9 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
-import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
-import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
-import { _ as _12 } from "./chunks/LpCard-D0M2ZCnB.js";
-import { _ as _13 } from "./chunks/LpChart-Bmw7y34Z.js";
+import { _ as _4 } from "./chunks/LpActionBar-CxmBZpGu.js";
+import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
+import { _ as _6 } from "./chunks/LpAppShell-DnocEJAu.js";
+import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
+import { _ as _8 } from "./chunks/LpAvatar-D3l4nabg.js";
+import { _ as _9 } from "./chunks/LpBadge-BPodVcJa.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
+import { _ as _11 } from "./chunks/LpButton-5VXXCjwF.js";
+import { _ as _12 } from "./chunks/LpCalendar-B7ZL0ty3.js";
+import { _ as _13 } from "./chunks/LpCard-D0M2ZCnB.js";
+import { default as default2 } from "./components/LpChart.vue.js";
 import { CHART_PALETTE, axisTicks, formatTick, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-BO0zuuPh.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-rS_6mO3D.js";
-import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _16 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
-import { _ as _17 } from "./chunks/LpContextMenu-B6WBLleS.js";
-import { _ as _18 } from "./chunks/LpDatePicker-dY2q4dr4.js";
-import { _ as _19 } from "./chunks/LpDisclosure-BnwP4Q-b.js";
-import { _ as _20 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _21 } from "./chunks/LpDrawer-DAJN5rGK.js";
-import { _ as _22 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
-import { default as default3 } from "./components/LpDropzone.vue.js";
-import { _ as _23 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
-import { _ as _24 } from "./chunks/LpFileTree-DfFqY__1.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-BWX1KZwk.js";
+import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
+import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
+import { default as default3 } from "./components/LpCommandPalette.vue.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
+import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
+import { _ as _19 } from "./chunks/LpDatePicker-dY2q4dr4.js";
+import { _ as _20 } from "./chunks/LpDisclosure-C1_YkMrd.js";
+import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
+import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
+import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
+import { default as default4 } from "./components/LpDropzone.vue.js";
+import { _ as _24 } from "./chunks/LpEmptyState-BV3q7Qyi.js";
+import { _ as _25 } from "./chunks/LpFileTree-DfFqY__1.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _25 } from "./chunks/LpFormField-fV_2ZdCk.js";
-import { _ as _26 } from "./chunks/LpIcon-CCnX5_2j.js";
-import { default as default4 } from "./components/LpImageEditor.vue.js";
-import { _ as _27 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _28 } from "./chunks/LpInput-CYcTL9gj.js";
-import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
+import { _ as _26 } from "./chunks/LpFormField-fV_2ZdCk.js";
+import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
+import { default as default5 } from "./components/LpImageEditor.vue.js";
+import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
+import { _ as _29 } from "./chunks/LpInput-CYcTL9gj.js";
+import { _ as _30 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
-import { _ as _31 } from "./chunks/LpLogViewer-CVaGfTF_.js";
-import { _ as _32 } from "./chunks/LpModal-D_o-56To.js";
-import { _ as _33 } from "./chunks/LpNotificationBell-CTsIcPqX.js";
-import { _ as _34 } from "./chunks/LpNumberField-NPE8Bumx.js";
-import { _ as _35 } from "./chunks/LpNumberFlow-amWYaeuA.js";
-import { _ as _36 } from "./chunks/LpOtpInput-DqaT0Z75.js";
-import { _ as _37 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _38 } from "./chunks/LpPasswordInput-DrYE4J5d.js";
-import { _ as _39 } from "./chunks/LpPie-BL1vTDSM.js";
-import { _ as _40 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
+import { _ as _31 } from "./chunks/LpLink-BHZ1CLlF.js";
+import { _ as _32 } from "./chunks/LpLogViewer-TSRyt3t9.js";
+import { _ as _33 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _34 } from "./chunks/LpNotificationBell-CTsIcPqX.js";
+import { _ as _35 } from "./chunks/LpNumberField-NPE8Bumx.js";
+import { _ as _36 } from "./chunks/LpNumberFlow-amWYaeuA.js";
+import { _ as _37 } from "./chunks/LpOtpInput-DqaT0Z75.js";
+import { _ as _38 } from "./chunks/LpPagination-CeGuNe_q.js";
+import { _ as _39 } from "./chunks/LpPasswordInput-DrYE4J5d.js";
+import { _ as _40 } from "./chunks/LpPie-BL1vTDSM.js";
+import { _ as _41 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _41 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _42 } from "./chunks/LpProgress-Btq5W4Ut.js";
-import { _ as _43 } from "./chunks/LpRadio-CL-pI0_O.js";
-import { _ as _44 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _45 } from "./chunks/LpRollingText-CM5gkSeF.js";
-import { _ as _46 } from "./chunks/LpScrollArea-D8xyKXcF.js";
-import { _ as _47 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _48 } from "./chunks/LpSection-aM6J_u51.js";
-import { _ as _49 } from "./chunks/LpSelect-ANIVtrpM.js";
-import { _ as _50 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _51 } from "./chunks/LpShift-DXNsauQZ.js";
-import { default as default5 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _52 } from "./chunks/LpSidebar-C_Mr-JPI.js";
-import { _ as _53 } from "./chunks/LpSkeleton-CTI-vBgW.js";
-import { _ as _54 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _55 } from "./chunks/LpSparkline-C6xQ2dwv.js";
-import { _ as _56 } from "./chunks/LpStat-CDanpzU0.js";
-import { _ as _57 } from "./chunks/LpStepper-Wtl-6nUh.js";
-import { _ as _58 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { default as default6 } from "./components/LpTable.vue.js";
-import { _ as _59 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _60 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _61 } from "./chunks/LpTextarea-BMIOfw5l.js";
+import { _ as _42 } from "./chunks/LpPopover-8268UmlC.js";
+import { _ as _43 } from "./chunks/LpProgress-Btq5W4Ut.js";
+import { _ as _44 } from "./chunks/LpRadio-CL-pI0_O.js";
+import { _ as _45 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
+import { _ as _46 } from "./chunks/LpRollingText-CM5gkSeF.js";
+import { _ as _47 } from "./chunks/LpScrollArea-D8xyKXcF.js";
+import { _ as _48 } from "./chunks/LpSegmented-BmpanyAo.js";
+import { _ as _49 } from "./chunks/LpSection-aM6J_u51.js";
+import { _ as _50 } from "./chunks/LpSelect-ANIVtrpM.js";
+import { _ as _51 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _52 } from "./chunks/LpShift-DXNsauQZ.js";
+import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
+import { _ as _53 } from "./chunks/LpSidebar-CWSbczWi.js";
+import { _ as _54 } from "./chunks/LpSkeleton-CTI-vBgW.js";
+import { _ as _55 } from "./chunks/LpSlider-B1SF3pRV.js";
+import { _ as _56 } from "./chunks/LpSparkline-C6xQ2dwv.js";
+import { _ as _57 } from "./chunks/LpStat-CDanpzU0.js";
+import { _ as _58 } from "./chunks/LpStepper-Wtl-6nUh.js";
+import { _ as _59 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { default as default7 } from "./components/LpTable.vue.js";
+import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _62 } from "./chunks/LpTextarea-BMIOfw5l.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
-import { D, _ as _62, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
-import { _ as _63 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _64 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _65 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _66 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
-import { _ as _67 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
+import { D, _ as _63, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
+import { _ as _64 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _65 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _66 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _67 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
+import { _ as _68 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { useLayout } from "./layout/useLayout.js";
+import { useClipboard } from "./composables/useClipboard.js";
 import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
@@ -124,78 +128,81 @@ function parseConfig(json) {
 export {
   CHART_PALETTE,
   D as DEFAULT_SURFACE,
+  DEFAULT_SWATCHES,
   _ as LayoutCanvas,
+  _4 as LpActionBar,
   _2 as LpAddressInput,
-  _4 as LpAlert,
-  _5 as LpAppShell,
-  _6 as LpAutocomplete,
-  _7 as LpAvatar,
-  _8 as LpBadge,
-  _9 as LpBreadcrumbs,
-  _10 as LpButton,
-  _11 as LpCalendar,
-  _12 as LpCard,
-  _13 as LpChart,
+  _5 as LpAlert,
+  _6 as LpAppShell,
+  _7 as LpAutocomplete,
+  _8 as LpAvatar,
+  _9 as LpBadge,
+  _10 as LpBreadcrumbs,
+  _11 as LpButton,
+  _12 as LpCalendar,
+  _13 as LpCard,
+  default2 as LpChart,
   _14 as LpCheckbox,
   _15 as LpCodeBlock,
-  default2 as LpCommandPalette,
-  _16 as LpConfirmDialog,
-  _17 as LpContextMenu,
-  _18 as LpDatePicker,
-  _19 as LpDisclosure,
-  _20 as LpDivider,
-  _21 as LpDrawer,
-  _22 as LpDropdownMenu,
-  default3 as LpDropzone,
-  _23 as LpEmptyState,
-  _24 as LpFileTree,
-  _25 as LpFormField,
-  _26 as LpIcon,
-  default4 as LpImageEditor,
-  _27 as LpInfraNode,
-  _28 as LpInput,
-  _29 as LpLightbox,
-  _30 as LpLink,
-  _31 as LpLogViewer,
+  _16 as LpColorPicker,
+  default3 as LpCommandPalette,
+  _17 as LpConfirmDialog,
+  _18 as LpContextMenu,
+  _19 as LpDatePicker,
+  _20 as LpDisclosure,
+  _21 as LpDivider,
+  _22 as LpDrawer,
+  _23 as LpDropdownMenu,
+  default4 as LpDropzone,
+  _24 as LpEmptyState,
+  _25 as LpFileTree,
+  _26 as LpFormField,
+  _27 as LpIcon,
+  default5 as LpImageEditor,
+  _28 as LpInfraNode,
+  _29 as LpInput,
+  _30 as LpLightbox,
+  _31 as LpLink,
+  _32 as LpLogViewer,
   _3 as LpMapPicker,
-  _32 as LpModal,
-  _33 as LpNotificationBell,
-  _34 as LpNumberField,
-  _35 as LpNumberFlow,
-  _36 as LpOtpInput,
-  _37 as LpPagination,
-  _38 as LpPasswordInput,
-  _40 as LpPhoneInput,
-  _39 as LpPie,
-  _41 as LpPopover,
-  _42 as LpProgress,
-  _43 as LpRadio,
-  _44 as LpRadioGroup,
-  _45 as LpRollingText,
-  _46 as LpScrollArea,
-  _48 as LpSection,
-  _47 as LpSegmented,
-  _49 as LpSelect,
-  _50 as LpServiceNode,
-  _51 as LpShift,
-  default5 as LpShortcutsDialog,
-  _52 as LpSidebar,
-  _53 as LpSkeleton,
-  _54 as LpSlider,
-  _55 as LpSparkline,
-  _56 as LpStat,
-  _57 as LpStepper,
-  _58 as LpSwitch,
-  default6 as LpTable,
-  _59 as LpTableOfContents,
-  _60 as LpTabs,
-  _61 as LpTextarea,
-  _62 as LpThemeSwitcher,
-  _63 as LpTilt,
-  _64 as LpToaster,
-  _65 as LpTooltip,
-  _66 as LpTopologyCanvas,
-  _67 as LpUptimeBar,
+  _33 as LpModal,
+  _34 as LpNotificationBell,
+  _35 as LpNumberField,
+  _36 as LpNumberFlow,
+  _37 as LpOtpInput,
+  _38 as LpPagination,
+  _39 as LpPasswordInput,
+  _41 as LpPhoneInput,
+  _40 as LpPie,
+  _42 as LpPopover,
+  _43 as LpProgress,
+  _44 as LpRadio,
+  _45 as LpRadioGroup,
+  _46 as LpRollingText,
+  _47 as LpScrollArea,
+  _49 as LpSection,
+  _48 as LpSegmented,
+  _50 as LpSelect,
+  _51 as LpServiceNode,
+  _52 as LpShift,
+  default6 as LpShortcutsDialog,
+  _53 as LpSidebar,
+  _54 as LpSkeleton,
+  _55 as LpSlider,
+  _56 as LpSparkline,
+  _57 as LpStat,
+  _58 as LpStepper,
+  _59 as LpSwitch,
+  default7 as LpTable,
+  _60 as LpTableOfContents,
+  _61 as LpTabs,
+  _62 as LpTextarea,
+  _63 as LpThemeSwitcher,
+  _64 as LpTilt,
+  _65 as LpToaster,
+  _66 as LpTooltip,
+  _67 as LpTopologyCanvas,
+  _68 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -212,6 +219,7 @@ export {
   e as bootstrapTheme,
   checkStateOf,
   checkedCount,
+  clampHsv,
   computeStats,
   countBlocks,
   countLeaves,
@@ -229,11 +237,15 @@ export {
   fileNameOf,
   flagEmoji,
   formatAddress,
+  formatColor,
   formatModified,
   formatSize,
   formatTick,
+  hsvToHsl,
+  hsvToRgb,
   isAppleKeyboard,
   i as isBrokenBackdropEngine,
+  isLight,
   l as leavepulse,
   h as light,
   j as lime,
@@ -243,7 +255,11 @@ export {
   moveLeaf,
   niceScale,
   n as nord,
+  normalizeHue,
+  opaqueCss,
+  parseColor,
   parseConfig,
+  parseHex,
   parseTheme,
   prefersReducedMotion,
   presets,
@@ -253,6 +269,8 @@ export {
   reorderTab,
   resizeAt,
   resolveSlices,
+  rgbToHex,
+  rgbToHsv,
   r as rose,
   serializeConfig,
   serializeLayout,
@@ -266,6 +284,7 @@ export {
   m as themeToCssVars,
   tileUrl,
   unproject,
+  useClipboard,
   useFormDraft,
   useHotkeys,
   useInputFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.29.4",
+  "version": "0.30.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -4,6 +4,7 @@
 export const COMPONENT_NAMES = [
   "LayoutCanvas",
   "LayoutNode",
+  "LpActionBar",
   "LpAddressInput",
   "LpAlert",
   "LpAppShell",
@@ -17,6 +18,7 @@ export const COMPONENT_NAMES = [
   "LpChart",
   "LpCheckbox",
   "LpCodeBlock",
+  "LpColorPicker",
   "LpCommandPalette",
   "LpConfirmDialog",
   "LpContextMenu",

package/src/components/LpActionBar.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+/*
+ * A bar that rises from the bottom of the window to ask for one decision, then
+ * leaves. Unsaved changes with Save/Discard, a cookie notice, "3 rows selected"
+ * with a bulk action, an update waiting to be applied.
+ *
+ * It is deliberately NOT a dialog and NOT a toast, because it is neither:
+ *
+ *   A dialog takes the page hostage. The whole point of an unsaved-changes bar
+ *   is that you can keep editing while it sits there — trapping focus and
+ *   dimming the form behind it would be answering a question the user has not
+ *   been asked yet.
+ *
+ *   A toast leaves on a timer. A decision that vanishes after four seconds is a
+ *   decision the user can miss, and "your changes were lost because you looked
+ *   away" is the outcome. This stays until something resolves it.
+ *
+ * So: fixed to the bottom, above the page but below modals, never focus-
+ * trapped, and it does not close itself. `role="region"` with an accessible
+ * name rather than `alertdialog` — it is a landmark you can Tab into, not a
+ * thing demanding an answer before anything else can happen.
+ */
+import { computed, nextTick, ref, useSlots, watch } from "vue"
+import { useBarStack } from "./actionBar"
+import { CLOSE_ICON } from "./dropdown"
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+
+export interface ActionBarAction {
+  label: string
+  /** Leading icon (any name LpIcon takes). */
+  icon?: string
+  /** Mirrors LpButton's variants; the default reads as the primary action. */
+  variant?: "solid" | "action" | "outline" | "soft" | "ghost" | "muted" | "light" | "danger"
+  disabled?: boolean
+  /** Shows a spinner in place of the icon and blocks repeat clicks. */
+  loading?: boolean
+  onClick?: () => void | Promise<void>
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Shown or not (v-model:open, or a plain :open). */
+    open?: boolean
+    /** Lead line — "You have unsaved changes". */
+    title?: string
+    /** Second line, quieter. Long explanations belong here, not in the title. */
+    description?: string
+    /** Leading icon. Omit for a bar that is purely text + buttons. */
+    icon?: string
+    /**
+     * Buttons on the right, in reading order. The LAST one is the primary and
+     * gets the solid treatment unless it says otherwise — the confirming action
+     * sits closest to the edge the thumb and the eye finish on.
+     */
+    actions?: ActionBarAction[]
+    /** Adds a "✕" that emits `dismiss`. For notices, not for decisions. */
+    dismissible?: boolean
+    /**
+     * Tone. `danger` for a destructive pending action; the default stays neutral
+     * because most of these bars are routine and a page edged in red for every
+     * unsaved field trains people to ignore red.
+     */
+    variant?: "default" | "danger"
+    /**
+     * How wide the bar runs.
+     *
+     * "contained" (the default) keeps it to the width of its own content, up to
+     * a cap, and centres it: a bar carrying six words and two buttons has no
+     * business spanning a 1920px display, and stretching it puts the buttons a
+     * screen away from the field you were editing.
+     *
+     * "full" spans the viewport edge to edge — for a cookie notice, which reads
+     * as part of the page frame rather than as a message about one thing on it.
+     * Its CONTENTS are still capped and centred, so the buttons stay beside the
+     * text instead of being flung to the far corner.
+     */
+    width?: "contained" | "full"
+    /**
+     * Cap for the bar (or, when `width="full"`, for the row inside it). Any CSS
+     * length. Defaults to a comfortable measure for a line of text and two or
+     * three buttons — wider for `full`, whose job is to span the page and whose
+     * contents therefore sit on the page's own measure, not a card's.
+     */
+    maxWidth?: string
+    /** Accessible name for the landmark. Falls back to `title`. */
+    ariaLabel?: string
+  }>(),
+  {
+    open: true,
+    actions: () => [],
+    variant: "default",
+    width: "contained",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+  (e: "dismiss"): void
+}>()
+
+const slots = useSlots()
+
+// The last action is the primary one unless the caller has said otherwise; the
+// rest default to `ghost` so a bar with three buttons still has one obvious
+// answer instead of three competing ones.
+const resolvedActions = computed(() =>
+  props.actions.map((a, i) => ({
+    ...a,
+    variant:
+      a.variant ??
+      (i === props.actions.length - 1
+        ? props.variant === "danger"
+          ? ("danger" as const)
+          : ("solid" as const)
+        : ("ghost" as const)),
+  })),
+)
+
+const hasBody = computed(() => !!props.title || !!props.description || !!slots.default)
+
+/**
+ * 36rem for a contained bar: a line of text and two or three buttons, at about
+ * the measure prose stays comfortable at — wider starts reading as a page
+ * element, which a contained bar is not. A full-width bar IS page furniture, so
+ * its row sits on the shell's own measure (LpAppShell centres content at
+ * max-w-6xl) rather than being squeezed into a card's width, which cropped the
+ * description of a cookie notice halfway through a word.
+ */
+const maxWidth = computed(() => props.maxWidth ?? (props.width === "full" ? "72rem" : "36rem"))
+
+function run(action: ActionBarAction) {
+  if (action.disabled || action.loading) return
+  void action.onClick?.()
+}
+
+function dismiss() {
+  emit("dismiss")
+  emit("update:open", false)
+}
+
+/* ── stacking ─────────────────────────────────────
+   Two bars at once is ordinary — a cookie notice over a form that has just been
+   edited — and both are translucent, so overlapping them makes each unreadable
+   through the other. Each open bar takes a slot and rides above the ones that
+   opened before it. */
+const root = ref<HTMLElement | null>(null)
+const { register, unregister, setHeight, offset, bars } = useBarStack()
+
+const stackOffset = computed(() => {
+  // `bars` is read so the offset recomputes when a bar below is added, resized
+  // or removed; the value itself comes from the registry.
+  void bars.value
+  return offset()
+})
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (!isOpen) {
+      unregister()
+      return
+    }
+    register()
+    await nextTick()
+    if (root.value) setHeight(root.value.getBoundingClientRect().height)
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <!-- Teleported so the bar is pinned to the VIEWPORT rather than to whatever
+       container it was declared in: a `position: fixed` element inside an
+       ancestor that has a transform, filter or backdrop-filter anchors to that
+       ancestor instead, and the kit is full of such ancestors (any panel with a
+       blur). Declaring it next to the form it belongs to should not decide
+       where on screen it lands. -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]"
+      leave-active-class="animate-[rise-out_var(--duration-fast)_ease]"
+    >
+      <div
+        v-if="open"
+        ref="root"
+        role="region"
+        :aria-label="ariaLabel ?? title"
+        class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-modal) flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        :class="width === 'full' ? '' : 'p-3 sm:p-4'"
+        :style="{ translate: `0 -${stackOffset}px` }"
+      >
+        <div
+          class="lp-skin-panel pointer-events-auto flex items-center gap-3 border-solid bg-surface-overlay"
+          :class="[
+            // A full-width bar is the page's own furniture: square, edge to
+            // edge, and only its top border drawn, so it reads as a frame
+            // rather than as a card that happens to be very wide.
+            width === 'full'
+              ? 'w-full justify-center border-x-0 border-b-0 px-4 py-3 sm:px-6'
+              : 'w-full rounded-card px-4 py-3',
+            variant === 'danger' ? 'border-danger/40' : 'border-line',
+          ]"
+          :style="width === 'full' ? undefined : { maxWidth }"
+        >
+          <!-- `full` keeps its contents on the same measure as a contained bar,
+               so the buttons stay next to the words instead of being pushed to
+               the far edge of a wide display. -->
+          <div
+            class="flex w-full items-center gap-3"
+            :style="{ maxWidth }"
+          >
+          <LpIcon
+            v-if="icon"
+            :name="icon"
+            :size="18"
+            :class="['shrink-0', variant === 'danger' ? 'text-danger' : 'text-brand']"
+          />
+
+          <!-- min-w-0 so a long description truncates instead of pushing the
+               buttons off the end of the bar. -->
+          <div v-if="hasBody" class="min-w-0 flex-1">
+            <slot>
+              <p v-if="title" class="truncate text-sm font-medium text-ink">{{ title }}</p>
+              <p v-if="description" class="truncate text-xs text-muted">{{ description }}</p>
+            </slot>
+          </div>
+          <div v-else class="flex-1" />
+
+          <!-- Buttons never shrink: the bar gives up text before it gives up
+               the thing you came here to click. -->
+          <div class="flex shrink-0 items-center gap-2">
+            <slot name="actions">
+              <LpButton
+                v-for="(action, i) in resolvedActions"
+                :key="i"
+                :variant="action.variant"
+                size="sm"
+                :disabled="action.disabled || action.loading"
+                @click="run(action)"
+              >
+                <LpIcon
+                  v-if="action.loading"
+                  name="lucide:loader-circle"
+                  :size="15"
+                  class="animate-spin"
+                />
+                <LpIcon v-else-if="action.icon" :name="action.icon" :size="15" />
+                {{ action.label }}
+              </LpButton>
+            </slot>
+
+            <button
+              v-if="dismissible"
+              type="button"
+              aria-label="Dismiss"
+              class="group -mr-1 flex size-8 shrink-0 items-center justify-center rounded-control text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              @click="dismiss"
+            >
+              <LpIcon name="lucide:x" :size="16" :class="CLOSE_ICON" />
+            </button>
+          </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>