@leavepulse/ui 0.45.1 → 0.47.0

package/dist/index.js

@@ -1,101 +1,109 @@
 import { _ } from "./chunks/LayoutCanvas-BkaGXTjx.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CJOYGZlI.js";
+import { _ as _2 } from "./chunks/LpAddressInput-iOJhmRzy.js";
 import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-CnfFVIwC.js";
 import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-B07Lf48e.js";
+import { _ as _6 } from "./chunks/LpAppShell-BmMYcEVx.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
-import { _ as _8 } from "./chunks/LpAvatar-C1XStdOo.js";
+import { _ as _8 } from "./chunks/LpAvatar-Cb1jtOVv.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-CQJd73Gm.js";
 import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
-import { _ as _13 } from "./chunks/LpCard-C2IvucmX.js";
+import { _ as _13 } from "./chunks/LpCard-BdxkMXjo.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-Bkj13CbW.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-ca7ANFyW.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-zz4VGkG4.js";
+import { _ as _16 } from "./chunks/LpColorPicker-BLqPX5Vw.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 { parseCommandQuery, rankCommandItems } from "./components/commandSearch.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-BTVAR4tF.js";
-import { _ as _18 } from "./chunks/LpConfirmHost-Ci_uCHgQ.js";
+import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems } from "./components/commandSearch.js";
+import { commandHasPreview, pushRecent, readRecent, toRecentItem } from "./components/commandPalette.js";
+import { _ as _17 } from "./chunks/LpPalettePreview-CFav_7co.js";
+import { default as default4 } from "./components/LpPaletteHeader.vue.js";
+import { default as default5 } from "./components/LpPaletteFacts.vue.js";
+import { default as default6 } from "./components/LpPaletteStats.vue.js";
+import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
+import { default as default8 } from "./components/LpKeys.vue.js";
+import { comboKeys, comboSteps } from "./components/keys.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-Ca-CTlxT.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-BAaSaT2b.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _19 } from "./chunks/LpContextMenu-BqkAYa9X.js";
-import { _ as _20 } from "./chunks/LpDatePicker-BrdFtSTy.js";
-import { _ as _21 } from "./chunks/LpDateRangePicker-Drd7EbIz.js";
-import { _ as _22 } from "./chunks/LpRangeCalendar-DZuaRV0W.js";
+import { _ as _20 } from "./chunks/LpContextMenu-1cKew_Dc.js";
+import { _ as _21 } from "./chunks/LpDatePicker-BrdFtSTy.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-Drd7EbIz.js";
+import { _ as _23 } from "./chunks/LpRangeCalendar-DZuaRV0W.js";
 import { clampRange, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
-import { _ as _23 } from "./chunks/LpDisclosure-Cc23-JOT.js";
-import { _ as _24 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _25 } from "./chunks/LpDrawer-CfRhHwmE.js";
-import { _ as _26 } from "./chunks/LpDropdownMenu-DdJGQzPn.js";
-import { default as default4 } from "./components/LpDropzone.vue.js";
-import { _ as _27 } from "./chunks/LpEmptyState-BJbZXC8D.js";
-import { _ as _28 } from "./chunks/LpFileTree-CNurOvkV.js";
+import { _ as _24 } from "./chunks/LpDisclosure-Cc23-JOT.js";
+import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
+import { _ as _26 } from "./chunks/LpDrawer-CBFVD624.js";
+import { _ as _27 } from "./chunks/LpDropdownMenu-DrpJJBp0.js";
+import { default as default9 } from "./components/LpDropzone.vue.js";
+import { _ as _28 } from "./chunks/LpEmptyState-BJbZXC8D.js";
+import { _ as _29 } from "./chunks/LpFileTree-bk5VjBey.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _29 } from "./chunks/LpFieldNotice-wtieLUTj.js";
-import { _ as _30 } from "./chunks/LpFormField-CtVYj6tO.js";
-import { _ as _31 } from "./chunks/LpIcon-DYtaid0K.js";
+import { _ as _30 } from "./chunks/LpFieldNotice-wtieLUTj.js";
+import { _ as _31 } from "./chunks/LpFormField-CtVYj6tO.js";
+import { _ as _32 } from "./chunks/LpIcon-DYtaid0K.js";
 import { i, b, a, c } from "./chunks/icons-CkA0njzm.js";
-import { default as default5 } from "./components/LpImageEditor.vue.js";
-import { _ as _32 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _33 } from "./chunks/LpInput-D-YGQbEv.js";
-import { _ as _34 } from "./chunks/LpLightbox-DSDahF23.js";
+import { default as default10 } from "./components/LpImageEditor.vue.js";
+import { _ as _33 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
+import { _ as _34 } from "./chunks/LpInput-D-YGQbEv.js";
+import { _ as _35 } from "./chunks/LpLightbox-EVXzAq62.js";
 import { fileNameOf } from "./components/lightbox.js";
-import { _ as _35 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _36 } from "./chunks/LpLogViewer-KypbgOyo.js";
+import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
+import { _ as _37 } from "./chunks/LpLogViewer-BDFXzvcl.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _37 } from "./chunks/LpMediaGallery-YKr-cQPN.js";
-import { _ as _38 } from "./chunks/LpModal-BzTVeNqe.js";
-import { _ as _39 } from "./chunks/LpModalNav-CjABSGCu.js";
-import { _ as _40 } from "./chunks/LpNotificationBell-CCwyJP5C.js";
-import { _ as _41 } from "./chunks/LpNumberField-B77O-z28.js";
-import { _ as _42 } from "./chunks/LpTimeField-Cqe7fXnh.js";
-import { _ as _43 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
-import { _ as _44 } from "./chunks/LpOtpInput-CziPF3Oq.js";
-import { _ as _45 } from "./chunks/LpPagination-BcDlo3r_.js";
-import { _ as _46 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
-import { _ as _47 } from "./chunks/LpPie-BEJ2SfI6.js";
-import { _ as _48 } from "./chunks/LpPhoneInput-BCbrrhgE.js";
+import { _ as _38 } from "./chunks/LpMediaGallery-BnlkN_1f.js";
+import { _ as _39 } from "./chunks/LpModal-JNa3B_Lr.js";
+import { _ as _40 } from "./chunks/LpModalNav-BAxC9et7.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-DsqSyMwS.js";
+import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
+import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.js";
+import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
+import { _ as _45 } from "./chunks/LpOtpInput-CziPF3Oq.js";
+import { _ as _46 } from "./chunks/LpPagination-BcDlo3r_.js";
+import { _ as _47 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
+import { _ as _48 } from "./chunks/LpPie-BdSnta11.js";
+import { _ as _49 } from "./chunks/LpPhoneInput-BCbrrhgE.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _49 } from "./chunks/LpPopover-DCKeqiVn.js";
-import { _ as _50 } from "./chunks/LpProgress-CBU1iI69.js";
-import { _ as _51 } from "./chunks/LpRadio-B5AfqTpZ.js";
-import { _ as _52 } from "./chunks/LpRadioGroup-DmEW0l78.js";
-import { _ as _53 } from "./chunks/LpRollingText-DB7upf-5.js";
-import { _ as _54 } from "./chunks/LpScrollArea-Bry1fdOM.js";
-import { _ as _55 } from "./chunks/LpSegmented-C09EEam2.js";
-import { _ as _56 } from "./chunks/LpSection-tKEH0jYf.js";
-import { _ as _57 } from "./chunks/LpSelect-DNIL6MB9.js";
-import { _ as _58 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _59 } from "./chunks/LpShift-DXNsauQZ.js";
-import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _60 } from "./chunks/LpSidebar-Bwws_X29.js";
-import { _ as _61 } from "./chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _62 } from "./chunks/LpSlider-Cuzmrd7p.js";
-import { _ as _63 } from "./chunks/LpSparkline-CB80N8SJ.js";
-import { _ as _64 } from "./chunks/LpStat-B-7udBRP.js";
-import { _ as _65 } from "./chunks/LpStepper-C7XiVKZj.js";
-import { _ as _66 } from "./chunks/LpSwitch-OrcOJX9m.js";
-import { default as default7 } from "./components/LpTable.vue.js";
+import { _ as _50 } from "./chunks/LpPopover-DCKeqiVn.js";
+import { _ as _51 } from "./chunks/LpProgress-CBU1iI69.js";
+import { _ as _52 } from "./chunks/LpRadio-B5AfqTpZ.js";
+import { _ as _53 } from "./chunks/LpRadioGroup-DmEW0l78.js";
+import { _ as _54 } from "./chunks/LpRollingText-DB7upf-5.js";
+import { _ as _55 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
+import { _ as _56 } from "./chunks/LpSegmented-C09EEam2.js";
+import { _ as _57 } from "./chunks/LpSection-tKEH0jYf.js";
+import { _ as _58 } from "./chunks/LpSelect-DNIL6MB9.js";
+import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
+import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
+import { _ as _61 } from "./chunks/LpSidebar-DpEiGi8L.js";
+import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
+import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
+import { _ as _64 } from "./chunks/LpSparkline-CB80N8SJ.js";
+import { _ as _65 } from "./chunks/LpStat-B-7udBRP.js";
+import { _ as _66 } from "./chunks/LpStepper-C7XiVKZj.js";
+import { _ as _67 } from "./chunks/LpSwitch-OrcOJX9m.js";
+import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
-import { _ as _67 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
-import { _ as _68 } from "./chunks/LpTabs-29iW1XOx.js";
-import { _ as _69 } from "./chunks/LpTagsInput-D1SuqbhB.js";
+import { _ as _68 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
+import { _ as _69 } from "./chunks/LpTabs-29iW1XOx.js";
+import { _ as _70 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _70 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _71 } from "./chunks/LpThemeSwitcher-B4aVPbNC.js";
-import { _ as _72 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _73 } from "./chunks/LpToaster-DTtWuKvq.js";
-import { _ as _74 } from "./chunks/LpTooltip-CXVKcOXT.js";
-import { _ as _75 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _76 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
-import { _ as _77 } from "./chunks/LpUptimeBar-ugcv25xj.js";
+import { _ as _71 } from "./chunks/LpTextarea-uuScWo6-.js";
+import { _ as _72 } from "./chunks/LpThemeSwitcher-BbYFFT5w.js";
+import { _ as _73 } from "./chunks/LpTilt-B7KHX1zH.js";
+import { _ as _74 } from "./chunks/LpToaster-DTtWuKvq.js";
+import { _ as _75 } from "./chunks/LpTooltip-CXVKcOXT.js";
+import { _ as _76 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _77 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
+import { _ as _78 } from "./chunks/LpUptimeBar-ugcv25xj.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";
@@ -124,7 +132,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _78 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _79 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -182,73 +190,79 @@ export {
   _15 as LpCodeBlock,
   _16 as LpColorPicker,
   default3 as LpCommandPalette,
-  _17 as LpConfirmDialog,
-  _18 as LpConfirmHost,
-  _19 as LpContextMenu,
-  _20 as LpDatePicker,
-  _21 as LpDateRangePicker,
-  _23 as LpDisclosure,
-  _24 as LpDivider,
-  _25 as LpDrawer,
-  _26 as LpDropdownMenu,
-  default4 as LpDropzone,
-  _27 as LpEmptyState,
-  _29 as LpFieldNotice,
-  _28 as LpFileTree,
-  _30 as LpFormField,
-  _31 as LpIcon,
-  default5 as LpImageEditor,
-  _32 as LpInfraNode,
-  _33 as LpInput,
-  _34 as LpLightbox,
-  _35 as LpLink,
-  _36 as LpLogViewer,
+  _18 as LpConfirmDialog,
+  _19 as LpConfirmHost,
+  _20 as LpContextMenu,
+  _21 as LpDatePicker,
+  _22 as LpDateRangePicker,
+  _24 as LpDisclosure,
+  _25 as LpDivider,
+  _26 as LpDrawer,
+  _27 as LpDropdownMenu,
+  default9 as LpDropzone,
+  _28 as LpEmptyState,
+  _30 as LpFieldNotice,
+  _29 as LpFileTree,
+  _31 as LpFormField,
+  _32 as LpIcon,
+  default10 as LpImageEditor,
+  _33 as LpInfraNode,
+  _34 as LpInput,
+  default8 as LpKeys,
+  _35 as LpLightbox,
+  _36 as LpLink,
+  _37 as LpLogViewer,
   _3 as LpMapPicker,
-  _37 as LpMediaGallery,
-  _38 as LpModal,
-  _39 as LpModalNav,
-  _40 as LpNotificationBell,
-  _41 as LpNumberField,
-  _43 as LpNumberFlow,
-  _44 as LpOtpInput,
-  _45 as LpPagination,
-  _46 as LpPasswordInput,
-  _48 as LpPhoneInput,
-  _47 as LpPie,
-  _49 as LpPopover,
-  _50 as LpProgress,
-  _51 as LpRadio,
-  _52 as LpRadioGroup,
-  _22 as LpRangeCalendar,
-  _53 as LpRollingText,
-  _54 as LpScrollArea,
-  _56 as LpSection,
-  _55 as LpSegmented,
-  _57 as LpSelect,
-  _58 as LpServiceNode,
-  _59 as LpShift,
-  default6 as LpShortcutsDialog,
-  _60 as LpSidebar,
-  _61 as LpSkeleton,
-  _62 as LpSlider,
-  _63 as LpSparkline,
-  _64 as LpStat,
-  _65 as LpStepper,
-  _66 as LpSwitch,
-  default7 as LpTable,
-  _67 as LpTableOfContents,
-  _68 as LpTabs,
-  _69 as LpTagsInput,
-  _70 as LpTextarea,
-  _78 as LpThemeProvider,
-  _71 as LpThemeSwitcher,
-  _72 as LpTilt,
-  _42 as LpTimeField,
-  _73 as LpToaster,
-  _74 as LpTooltip,
-  _75 as LpTooltipProvider,
-  _76 as LpTopologyCanvas,
-  _77 as LpUptimeBar,
+  _38 as LpMediaGallery,
+  _39 as LpModal,
+  _40 as LpModalNav,
+  _41 as LpNotificationBell,
+  _42 as LpNumberField,
+  _44 as LpNumberFlow,
+  _45 as LpOtpInput,
+  _46 as LpPagination,
+  default5 as LpPaletteFacts,
+  default4 as LpPaletteHeader,
+  _17 as LpPalettePreview,
+  default6 as LpPaletteStats,
+  default7 as LpPaletteSwatches,
+  _47 as LpPasswordInput,
+  _49 as LpPhoneInput,
+  _48 as LpPie,
+  _50 as LpPopover,
+  _51 as LpProgress,
+  _52 as LpRadio,
+  _53 as LpRadioGroup,
+  _23 as LpRangeCalendar,
+  _54 as LpRollingText,
+  _55 as LpScrollArea,
+  _57 as LpSection,
+  _56 as LpSegmented,
+  _58 as LpSelect,
+  _59 as LpServiceNode,
+  _60 as LpShift,
+  default11 as LpShortcutsDialog,
+  _61 as LpSidebar,
+  _62 as LpSkeleton,
+  _63 as LpSlider,
+  _64 as LpSparkline,
+  _65 as LpStat,
+  _66 as LpStepper,
+  _67 as LpSwitch,
+  default12 as LpTable,
+  _68 as LpTableOfContents,
+  _69 as LpTabs,
+  _70 as LpTagsInput,
+  _71 as LpTextarea,
+  _79 as LpThemeProvider,
+  _72 as LpThemeSwitcher,
+  _73 as LpTilt,
+  _43 as LpTimeField,
+  _74 as LpToaster,
+  _75 as LpTooltip,
+  _76 as LpTooltipProvider,
+  _77 as LpTopologyCanvas,
+  _78 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -263,6 +277,7 @@ export {
   anyModalOpen,
   appleModifierLabel,
   applyMask,
+  applyQueryFilters,
   c2 as applyTheme,
   d as applyThemeWithTransition,
   axisTicks,
@@ -275,6 +290,9 @@ export {
   checkedCount,
   clampHsv,
   clampRange,
+  comboKeys,
+  comboSteps,
+  commandHasPreview,
   compareValues,
   computeStats,
   confirm,
@@ -308,6 +326,7 @@ export {
   formatRange,
   formatSize,
   formatTick,
+  highlightParts,
   hotkeyConflicts,
   hotkeySteps,
   hsvToHsl,
@@ -345,6 +364,7 @@ export {
   parseConfig,
   parseHex,
   parseMask,
+  parsePaletteQuery,
   parseTheme,
   pendingHotkey,
   m as prefersDarkScheme,
@@ -354,7 +374,9 @@ export {
   provideField,
   provideGlass,
   provideLpConfig,
+  pushRecent,
   rankCommandItems,
+  readRecent,
   b as registerAllIcons,
   a as registerIconCollection,
   c as registerIcons,
@@ -389,6 +411,7 @@ export {
   w as themeToCssVars,
   tileUrl,
   toCsv,
+  toRecentItem,
   tokenizeLines,
   topModalElement,
   unproject,

package/package.json

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

package/src/component-names.ts

@@ -37,6 +37,7 @@ export const COMPONENT_NAMES = [
   "LpImageEditor",
   "LpInfraNode",
   "LpInput",
+  "LpKeys",
   "LpLightbox",
   "LpLink",
   "LpLogViewer",
@@ -49,6 +50,11 @@ export const COMPONENT_NAMES = [
   "LpNumberFlow",
   "LpOtpInput",
   "LpPagination",
+  "LpPaletteFacts",
+  "LpPaletteHeader",
+  "LpPalettePreview",
+  "LpPaletteStats",
+  "LpPaletteSwatches",
   "LpPasswordInput",
   "LpPhoneInput",
   "LpPie",

package/src/components/HighlightText.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/*
+ * Text that may arrive already split into matched and unmatched runs (the
+ * palette preview slot's `highlight(text)`), drawn with the same <mark> the
+ * palette's rows use. A plain string is drawn as is.
+ */
+import type { HighlightPart } from "./commandSearch"
+
+defineProps<{ text: string | HighlightPart[] }>()
+</script>
+
+<template>
+  <template v-if="typeof text === 'string'">{{ text }}</template>
+  <template v-else>
+    <template v-for="(part, index) in text" :key="index">
+      <mark v-if="part.hit" class="lp-highlight">{{ part.text }}</mark>
+      <template v-else>{{ part.text }}</template>
+    </template>
+  </template>
+</template>
+
+<style>
+.lp-highlight {
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--color-brand) 25%, transparent);
+  color: var(--color-ink);
+}
+</style>

package/src/components/LpAvatar.vue

@@ -10,6 +10,7 @@ import { AvatarFallback, AvatarImage, AvatarRoot } from "reka-ui"
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, onMounted, ref } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const avatar = tv({
@@ -41,6 +42,12 @@ const props = withDefaults(
     src?: string
     alt?: string
     fallback?: string
+    /**
+     * An icon shown while there is no picture, instead of initials. For things
+     * that have no name worth abbreviating (a world, a mod, a file), where two
+     * letters read as noise. `fallback` text still wins when both are given.
+     */
+    icon?: string
     size?: AvatarVariants["size"]
     /** Explicit pixel size, wins over `size` — for avatars keyed to a layout. */
     pixelSize?: number
@@ -54,6 +61,12 @@ const props = withDefaults(
   { size: "md", shape: "circle", ring: false },
 )
 
+// The icon follows the box the way the initials do: about half of it.
+const ICON_SIZE = { xs: 11, sm: 14, md: 18, lg: 24, xl: 30 } as const
+const iconSize = computed(() =>
+  props.pixelSize ? Math.max(10, Math.round(props.pixelSize * 0.55)) : ICON_SIZE[props.size ?? "md"],
+)
+
 // A pixel size drives both box and glyph, so the initials keep their
 // proportion instead of staying at the preset's step.
 const sizeStyle = computed(() =>
@@ -99,11 +112,17 @@ onMounted(() => {
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
     <AvatarRoot :class="rootClass" :style="sizeStyle" v-bind="rest">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
-      <AvatarFallback>{{ initials }}</AvatarFallback>
+      <AvatarFallback>
+        <LpIcon v-if="icon && !fallback" :name="icon" :size="iconSize" />
+        <template v-else>{{ initials }}</template>
+      </AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
   <AvatarRoot v-else :class="rootClass" :style="sizeStyle" v-bind="rest">
     <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none" />
-    <AvatarFallback>{{ initials }}</AvatarFallback>
+    <AvatarFallback>
+      <LpIcon v-if="icon && !fallback" :name="icon" :size="iconSize" />
+      <template v-else>{{ initials }}</template>
+    </AvatarFallback>
   </AvatarRoot>
 </template>