@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/ItemList.module-DDUXfuZL.js

@@ -0,0 +1,14 @@
+var e = {
+	list: "_list_1ugdl_4",
+	row: "_row_1ugdl_14",
+	cell: "_cell_1ugdl_34",
+	trailing: "_trailing_1ugdl_51",
+	label: "_label_1ugdl_58",
+	selected: "_selected_1ugdl_64",
+	muted: "_muted_1ugdl_78",
+	empty: "_empty_1ugdl_82"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=ItemList.module-DDUXfuZL.js.map

package/dist/chunks/ItemList.module-DDUXfuZL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemList.module-DDUXfuZL.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n   them has to have their rows line up, which is what a private copy of this\n   file per list stopped happening. */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  user-select: none;\n  -webkit-user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-4);\n  height: var(--wzl-control-h);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  background: transparent;\n  border-radius: var(--wzl-radius-sm);\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.row:hover {\n  background: var(--wzl-surface);\n}\n\n.row:focus-visible,\n.row:has(> .cell:focus-visible) {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A grid row's label cell takes the row's focus; the ring is drawn on the row\n   so it looks the same as a listbox option's. */\n.cell {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  flex: 1 1 auto;\n  min-width: 0;\n  align-self: stretch;\n  outline: none;\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  flex: none;\n}\n\n.label {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n  background: var(--wzl-border);\n  color: var(--wzl-fg);\n}\n\n/* Drag feedback. The seam is an outer shadow of the row beside it: it needs no\n   measured offset, adds no element for a drag to count as a row, and escapes\n   the row's own `overflow: hidden`. */\n.row[data-drop='before'] { box-shadow: 0 -2px 0 0 var(--wzl-accent); }\n.row[data-drop='after']  { box-shadow: 0 2px 0 0 var(--wzl-accent); }\n.row[data-dragging] { opacity: 0.4; }\n\n/* Present but not in effect. */\n.muted {\n  color: var(--wzl-fg-subtle);\n}\n\n.empty {\n  padding: var(--wzl-space-6) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n"],"mappings":""}

package/dist/chunks/{Jog-DkkTlL3_.js → Jog-LPoac9s4.js}

@@ -1,6 +1,6 @@
-import { H as e, R as t, nt as n, rt as r } from "./icons-DFLytcui.js";
-import { t as i } from "./Button-DRSApvnK.js";
-import { t as a } from "./Slider-CIIrqiFS.js";
+import { Ct as e, rt as t, st as n, wt as r } from "./icons-DbScMMqX.js";
+import { t as i } from "./Button-Dyp31jMt.js";
+import { t as a } from "./Slider-BwRrWHFW.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 var c = {
 	jog: "_jog_ctrrf_4",
@@ -22,7 +22,7 @@ function l(l) {
 				ariaLabel: `Previous ${_.toLowerCase()}`,
 				disabled: x <= 0,
 				onClick: () => h(-1),
-				children: /* @__PURE__ */ o(n, { size: 14 })
+				children: /* @__PURE__ */ o(e, { size: 14 })
 			}),
 			/* @__PURE__ */ o(i, {
 				iconOnly: !0,
@@ -31,7 +31,7 @@ function l(l) {
 				ariaLabel: p ? "Pause" : "Play",
 				disabled: f < 2,
 				onClick: () => m(!p),
-				children: o(p ? t : e, { size: 14 })
+				children: o(p ? t : n, { size: 14 })
 			}),
 			/* @__PURE__ */ o(i, {
 				iconOnly: !0,
@@ -78,4 +78,4 @@ function u(e, t) {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=Jog-DkkTlL3_.js.map
+//# sourceMappingURL=Jog-LPoac9s4.js.map

package/dist/chunks/{Jog-DkkTlL3_.js.map → Jog-LPoac9s4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Jog-DkkTlL3_.js","names":[],"sources":["../../src/components/Jog/Jog.module.css","../../src/components/Jog/Jog.tsx"],"sourcesContent":["/* A row of transport controls on the panel surface, sized to sit in a bar\n * beside a title or a caption rather than to own a strip of its own. */\n\n.jog {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  color: var(--wzl-fg);\n}\n\n.scrub {\n  flex: 1 1 auto;\n  min-width: 80px;\n  margin-inline: var(--wzl-space-2);\n}\n\n.readout {\n  font-variant-numeric: tabular-nums;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: pre;\n}\n\n.caption {\n  overflow: hidden;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import type { ReactNode } from 'react';\nimport { PauseIcon, PlayIcon, StepBackIcon, StepForwardIcon } from '../../icons';\nimport { Button } from '../Button';\nimport { Slider } from '../Slider/Slider';\nimport s from './Jog.module.css';\n\n/** Props for {@link Jog}. */\nexport interface JogProps {\n  /** Which step is showing, 0-based. */\n  index: number;\n  /** How many steps there are. */\n  count: number;\n  playing: boolean;\n  onPlay: (playing: boolean) => void;\n  /** Move one step, back or forward. */\n  onStep: (by: -1 | 1) => void;\n  /** Jump to a step. Left out, no scrubber is drawn. */\n  onScrub?: (index: number) => void;\n  /** What one step is called, for the spoken labels. Defaults to `Step`. */\n  unit?: string;\n  /** Drawn after the readout — a beat's caption, a snapshot's date. */\n  caption?: ReactNode;\n  className?: string;\n}\n\n/**\n * Transport for something counted rather than timed: beat 3 of 24, not 4.20s of 12.00s.\n * `<Transport>` is the continuous-time one, and wants a playhead in milliseconds, a rate and\n * a loop, none of which a list of steps has.\n *\n * Named for the jog of jog/shuttle — moving one frame at a time, as against running at speed.\n */\nexport function Jog(props: JogProps) {\n  const { index, count, playing, onPlay, onStep, onScrub, unit = 'Step', caption, className } =\n    props;\n\n  const last = Math.max(0, count - 1);\n  const at = Math.min(Math.max(index, 0), last);\n  const spoken = `${unit} ${at + 1} of ${count}`;\n\n  return (\n    <div className={[s.jog, className].filter(Boolean).join(' ')}>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Previous ${unit.toLowerCase()}`}\n        disabled={at <= 0}\n        onClick={() => onStep(-1)}\n      >\n        <StepBackIcon size={14} />\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={playing ? 'Pause' : 'Play'}\n        disabled={count < 2}\n        onClick={() => onPlay(!playing)}\n      >\n        {playing ? <PauseIcon size={14} /> : <PlayIcon size={14} />}\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Next ${unit.toLowerCase()}`}\n        disabled={at >= last}\n        onClick={() => onStep(1)}\n      >\n        <StepForwardIcon size={14} />\n      </Button>\n\n      {onScrub && (\n        <Slider\n          className={s.scrub}\n          min={0}\n          max={last}\n          step={1}\n          snap=\"strict\"\n          density=\"slim\"\n          ariaLabel={unit}\n          thumbs={[{ value: at, valueText: spoken }]}\n          onInput={(next) => onScrub(Math.round(next[0]?.value ?? 0))}\n        />\n      )}\n\n      <span className={s.readout} data-testid=\"jog-readout\">\n        {pad(at + 1, count)}/{count}\n      </span>\n      {caption ? <span className={s.caption}>{caption}</span> : null}\n    </div>\n  );\n}\n\n/**\n * Figure spaces, not regular ones: the readout updates every beat, and a run from 9 to 10 that\n * widens by a digit shoves whatever follows it along the row. `tabular-nums` fixes the width of\n * a digit and not how many there are, so the padding is what holds the row still.\n */\nfunction pad(value: number, count: number): string {\n  return String(value).padStart(String(count).length, ' ');\n}\n"],"mappings":";;;;;;;;;;;;ACgCA,SAAgB,EAAI,GAAiB;CACnC,IAAM,EAAE,UAAO,UAAO,YAAS,WAAQ,WAAQ,YAAS,UAAO,QAAQ,YAAS,iBAC9E,GAEI,IAAO,KAAK,IAAI,GAAG,IAAQ,EAAE,EAC7B,IAAK,KAAK,IAAI,KAAK,IAAI,GAAO,EAAE,EAAE,EAAK,EACvC,IAAS,GAAG,EAAK,GAAG,IAAK,EAAE,MAAM;AAEvC,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA5D;GACE,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,YAAY,EAAK,aAAa;IACzC,UAAU,KAAM;IAChB,eAAe,EAAO,GAAG;cAEzB,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA;IACnB,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,IAAU,UAAU;IAC/B,UAAU,IAAQ;IAClB,eAAe,EAAO,CAAC,EAAQ;cAEpB,EAAV,IAAW,IAA0B,GAA3B,EAAW,MAAM,IAAM,CAAyB;IACpD,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,QAAQ,EAAK,aAAa;IACrC,UAAU,KAAM;IAChB,eAAe,EAAO,EAAE;cAExB,kBAAC,GAAD,EAAiB,MAAM,IAAM,CAAA;IACtB,CAAA;GAER,KACC,kBAAC,GAAD;IACE,WAAW,EAAE;IACb,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAK;IACL,SAAQ;IACR,WAAW;IACX,QAAQ,CAAC;KAAE,OAAO;KAAI,WAAW;KAAQ,CAAC;IAC1C,UAAU,MAAS,EAAQ,KAAK,MAAM,EAAK,IAAI,SAAS,EAAE,CAAC;IAC3D,CAAA;GAGJ,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAS,eAAY;cAAxC;KACG,EAAI,IAAK,GAAG,EAAM;KAAC;KAAE;KACjB;;GACN,IAAU,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAU;IAAe,CAAA,GAAG;GACtD;;;AASV,SAAS,EAAI,GAAe,GAAuB;AACjD,QAAO,OAAO,EAAM,CAAC,SAAS,OAAO,EAAM,CAAC,QAAQ,IAAI"}
+{"version":3,"file":"Jog-LPoac9s4.js","names":[],"sources":["../../src/components/Jog/Jog.module.css","../../src/components/Jog/Jog.tsx"],"sourcesContent":["/* A row of transport controls on the panel surface, sized to sit in a bar\n * beside a title or a caption rather than to own a strip of its own. */\n\n.jog {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  color: var(--wzl-fg);\n}\n\n.scrub {\n  flex: 1 1 auto;\n  min-width: 80px;\n  margin-inline: var(--wzl-space-2);\n}\n\n.readout {\n  font-variant-numeric: tabular-nums;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: pre;\n}\n\n.caption {\n  overflow: hidden;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import type { ReactNode } from 'react';\nimport { PauseIcon, PlayIcon, StepBackIcon, StepForwardIcon } from '../../icons';\nimport { Button } from '../Button';\nimport { Slider } from '../Slider/Slider';\nimport s from './Jog.module.css';\n\n/** Props for {@link Jog}. */\nexport interface JogProps {\n  /** Which step is showing, 0-based. */\n  index: number;\n  /** How many steps there are. */\n  count: number;\n  playing: boolean;\n  onPlay: (playing: boolean) => void;\n  /** Move one step, back or forward. */\n  onStep: (by: -1 | 1) => void;\n  /** Jump to a step. Left out, no scrubber is drawn. */\n  onScrub?: (index: number) => void;\n  /** What one step is called, for the spoken labels. Defaults to `Step`. */\n  unit?: string;\n  /** Drawn after the readout — a beat's caption, a snapshot's date. */\n  caption?: ReactNode;\n  className?: string;\n}\n\n/**\n * Transport for something counted rather than timed: beat 3 of 24, not 4.20s of 12.00s.\n * `<Transport>` is the continuous-time one, and wants a playhead in milliseconds, a rate and\n * a loop, none of which a list of steps has.\n *\n * Named for the jog of jog/shuttle — moving one frame at a time, as against running at speed.\n */\nexport function Jog(props: JogProps) {\n  const { index, count, playing, onPlay, onStep, onScrub, unit = 'Step', caption, className } =\n    props;\n\n  const last = Math.max(0, count - 1);\n  const at = Math.min(Math.max(index, 0), last);\n  const spoken = `${unit} ${at + 1} of ${count}`;\n\n  return (\n    <div className={[s.jog, className].filter(Boolean).join(' ')}>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Previous ${unit.toLowerCase()}`}\n        disabled={at <= 0}\n        onClick={() => onStep(-1)}\n      >\n        <StepBackIcon size={14} />\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={playing ? 'Pause' : 'Play'}\n        disabled={count < 2}\n        onClick={() => onPlay(!playing)}\n      >\n        {playing ? <PauseIcon size={14} /> : <PlayIcon size={14} />}\n      </Button>\n      <Button\n        iconOnly\n        size=\"sm\"\n        variant=\"ghost\"\n        ariaLabel={`Next ${unit.toLowerCase()}`}\n        disabled={at >= last}\n        onClick={() => onStep(1)}\n      >\n        <StepForwardIcon size={14} />\n      </Button>\n\n      {onScrub && (\n        <Slider\n          className={s.scrub}\n          min={0}\n          max={last}\n          step={1}\n          snap=\"strict\"\n          density=\"slim\"\n          ariaLabel={unit}\n          thumbs={[{ value: at, valueText: spoken }]}\n          onInput={(next) => onScrub(Math.round(next[0]?.value ?? 0))}\n        />\n      )}\n\n      <span className={s.readout} data-testid=\"jog-readout\">\n        {pad(at + 1, count)}/{count}\n      </span>\n      {caption ? <span className={s.caption}>{caption}</span> : null}\n    </div>\n  );\n}\n\n/**\n * Figure spaces, not regular ones: the readout updates every beat, and a run from 9 to 10 that\n * widens by a digit shoves whatever follows it along the row. `tabular-nums` fixes the width of\n * a digit and not how many there are, so the padding is what holds the row still.\n */\nfunction pad(value: number, count: number): string {\n  return String(value).padStart(String(count).length, ' ');\n}\n"],"mappings":";;;;;;;;;;;;ACgCA,SAAgB,EAAI,GAAiB;CACnC,IAAM,EAAE,UAAO,UAAO,YAAS,WAAQ,WAAQ,YAAS,UAAO,QAAQ,YAAS,iBAC9E,GAEI,IAAO,KAAK,IAAI,GAAG,IAAQ,EAAE,EAC7B,IAAK,KAAK,IAAI,KAAK,IAAI,GAAO,EAAE,EAAE,EAAK,EACvC,IAAS,GAAG,EAAK,GAAG,IAAK,EAAE,MAAM;AAEvC,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA5D;GACE,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,YAAY,EAAK,aAAa;IACzC,UAAU,KAAM;IAChB,eAAe,EAAO,GAAG;cAEzB,kBAAC,GAAD,EAAc,MAAM,IAAM,CAAA;IACnB,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,IAAU,UAAU;IAC/B,UAAU,IAAQ;IAClB,eAAe,EAAO,CAAC,EAAQ;cAEpB,EAAV,IAAW,IAA0B,GAA3B,EAAW,MAAM,IAAM,CAAyB;IACpD,CAAA;GACT,kBAAC,GAAD;IACE,UAAA;IACA,MAAK;IACL,SAAQ;IACR,WAAW,QAAQ,EAAK,aAAa;IACrC,UAAU,KAAM;IAChB,eAAe,EAAO,EAAE;cAExB,kBAAC,GAAD,EAAiB,MAAM,IAAM,CAAA;IACtB,CAAA;GAER,KACC,kBAAC,GAAD;IACE,WAAW,EAAE;IACb,KAAK;IACL,KAAK;IACL,MAAM;IACN,MAAK;IACL,SAAQ;IACR,WAAW;IACX,QAAQ,CAAC;KAAE,OAAO;KAAI,WAAW;KAAQ,CAAC;IAC1C,UAAU,MAAS,EAAQ,KAAK,MAAM,EAAK,IAAI,SAAS,EAAE,CAAC;IAC3D,CAAA;GAGJ,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAS,eAAY;cAAxC;KACG,EAAI,IAAK,GAAG,EAAM;KAAC;KAAE;KACjB;;GACN,IAAU,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAU;IAAe,CAAA,GAAG;GACtD;;;AASV,SAAS,EAAI,GAAe,GAAuB;AACjD,QAAO,OAAO,EAAM,CAAC,SAAS,OAAO,EAAM,CAAC,QAAQ,IAAI"}

package/dist/chunks/{Keycaps-DunVpejA.js → Keycaps-CKiKOJnJ.js}

@@ -5,61 +5,7 @@ var r = {
 	key: "_key_yq1ll_2",
 	keysEmpty: "_keysEmpty_yq1ll_21",
 	sep: "_sep_yq1ll_25"
-}, i = new Set([
-	"⌘",
-	"⇪",
-	"⌥",
-	"⌃",
-	"⇧"
-]), a = new Set([
-	"⇥",
-	"↵",
-	"␣"
-]);
-function o(e) {
-	return i.has(e) ? "modifier" : a.has(e) || e.length > 1 ? "wide" : "square";
-}
-function s({ label: t, inverted: n = !1, variant: i = "default", className: a, style: s, font: c }) {
-	let l = c ? {
-		...s,
-		fontFamily: c
-	} : s;
-	return /* @__PURE__ */ e("kbd", {
-		className: [r.key, a].filter(Boolean).join(" "),
-		"data-kind": o(t),
-		"data-variant": i === "default" ? void 0 : i,
-		"data-inverted": n || void 0,
-		style: l,
-		children: t
-	});
-}
-//#endregion
-//#region src/components/Keycaps/Keycaps.tsx
-function c({ keys: i, separator: a = "+", variant: c = "default", font: l, className: u }) {
-	if (!i || i.length === 0) return /* @__PURE__ */ e("span", {
-		className: [r.keysEmpty, u].filter(Boolean).join(" "),
-		children: "—"
-	});
-	let d = i.map((e, t) => ({
-		k: e,
-		i: t
-	})).sort((e, t) => (o(e.k.label) === "modifier" ? 0 : 1) - (o(t.k.label) === "modifier" ? 0 : 1) || e.i - t.i).map(({ k: e }) => e), f = d.findIndex((e) => o(e.label) !== "modifier"), p = !!a && f > 0 && f < d.length;
-	return /* @__PURE__ */ e("span", {
-		className: [r.keys, u].filter(Boolean).join(" "),
-		children: d.map((i, o) => /* @__PURE__ */ t(n, { children: [p && o === f ? /* @__PURE__ */ e("span", {
-			className: r.sep,
-			children: a
-		}) : null, /* @__PURE__ */ e(s, {
-			label: i.label,
-			inverted: i.optional ?? !1,
-			variant: c,
-			font: l
-		})] }, o))
-	});
-}
-//#endregion
-//#region src/components/Keycaps/keySpecsFromMods.ts
-var l = {
+}, i = {
 	mod: {
 		macos: {
 			auto: "⌘",
@@ -145,23 +91,23 @@ var l = {
 			text: "Super"
 		}
 	}
-};
-function u() {
+}, a = new Set(Object.values(i).flatMap((e) => Object.values(e).flatMap((e) => Object.values(e))));
+function o() {
 	if (typeof navigator > "u") return "macos";
 	let e = (navigator.userAgentData?.platform ?? navigator.userAgent ?? "").toLowerCase();
 	return e.includes("mac") || e.includes("darwin") || e.includes("iphone") || e.includes("ipad") ? "macos" : e.includes("win") ? "windows" : e.includes("linux") || e.includes("x11") ? "linux" : "macos";
 }
-function d(e, t = {}) {
-	let n = t.platform ?? u(), r = t.legend ?? "auto";
+function s(e, t = {}) {
+	let n = t.platform ?? o(), r = t.legend ?? "auto";
 	return e.map((e) => {
-		let t = l[e.name][n][r];
+		let t = i[e.name][n][r];
 		return e.optional ? {
 			label: t,
 			optional: !0
 		} : { label: t };
 	});
 }
-var f = {
+var c = {
 	Escape: {
 		macos: {
 			auto: "⎋",
@@ -384,14 +330,74 @@ var f = {
 		}
 	}
 };
-function p(e, t = {}) {
-	let n = t.platform ?? u(), r = t.legend ?? "auto", i = f[e], a = i ? i[n][r] : e.length === 1 ? e.toUpperCase() : e;
+function l(e, t = {}) {
+	let n = t.platform ?? o(), r = t.legend ?? "auto", i = c[e], a = i ? i[n][r] : e.length === 1 ? e.toUpperCase() : e;
 	return t.optional ? {
 		label: a,
 		optional: !0
 	} : { label: a };
 }
 //#endregion
-export { s as a, c as i, p as n, o, d as r, u as t };
+//#region src/components/Keycaps/Keycap.tsx
+var u = new Set([
+	"⇥",
+	"↵",
+	"␣"
+]);
+function d(e) {
+	return e === "⇪" || a.has(e) ? "modifier" : u.has(e) || e.length > 1 ? "wide" : "square";
+}
+function f({ label: t, inverted: n = !1, variant: i = "default", className: a, style: o, font: s }) {
+	let c = s ? {
+		...o,
+		fontFamily: s
+	} : o;
+	return /* @__PURE__ */ e("kbd", {
+		className: [r.key, a].filter(Boolean).join(" "),
+		"data-kind": d(t),
+		"data-variant": i === "default" ? void 0 : i,
+		"data-inverted": n || void 0,
+		style: c,
+		children: t
+	});
+}
+//#endregion
+//#region src/components/Keycaps/Keycaps.tsx
+function p({ keys: i, separator: a = "+", variant: o = "default", font: s, className: c }) {
+	if (!i || i.length === 0) return /* @__PURE__ */ e("span", {
+		className: [r.keysEmpty, c].filter(Boolean).join(" "),
+		children: "—"
+	});
+	let l = i.map((e, t) => ({
+		k: e,
+		i: t
+	})).sort((e, t) => (d(e.k.label) === "modifier" ? 0 : 1) - (d(t.k.label) === "modifier" ? 0 : 1) || e.i - t.i).map(({ k: e }) => e), u = l.findIndex((e) => d(e.label) !== "modifier"), p = !!a && u > 0 && u < l.length;
+	return /* @__PURE__ */ e("span", {
+		className: [r.keys, c].filter(Boolean).join(" "),
+		children: l.map((i, c) => /* @__PURE__ */ t(n, { children: [p && c === u ? /* @__PURE__ */ e("span", {
+			className: r.sep,
+			children: a
+		}) : null, /* @__PURE__ */ e(f, {
+			label: i.label,
+			inverted: i.optional ?? !1,
+			variant: o,
+			font: s
+		})] }, c))
+	});
+}
+//#endregion
+//#region src/components/Keycaps/keySpecsFromShortcut.ts
+function m(e, t = {}) {
+	if (!e) return;
+	let n = [];
+	e.mod && n.push({ name: "mod" }), e.shift && n.push(e.shift === "optional" ? {
+		name: "shift",
+		optional: !0
+	} : { name: "shift" }), e.alt && n.push({ name: "alt" });
+	let r = typeof e.key == "string" ? e.key : e.key[0], i = s(n, t);
+	return r === void 0 ? i : [...i, l(r, t)];
+}
+//#endregion
+export { o as a, d as i, p as n, l as o, f as r, s, m as t };
 
-//# sourceMappingURL=Keycaps-DunVpejA.js.map
+//# sourceMappingURL=Keycaps-CKiKOJnJ.js.map

package/dist/chunks/Keycaps-CKiKOJnJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keycaps-CKiKOJnJ.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/keySpecsFromMods.ts","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromShortcut.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. */\n.keys,\n.key {\n  --key-h: var(--wzl-control-h-xs);\n}\n\n.keys {\n  display: inline-flex;\n  gap: 3px;\n  /* Bottom-align so chips with text labels and chips with icon glyphs\n     (arrows, modifier symbols) line up at the same bottom edge. Baseline\n     drifts because text baselines sit above icon centers. */\n  align-items: flex-end;\n  /* When this whole sequence sits inline in surrounding text (e.g.\n     \"Press <KeySequence> to confirm.\"), the row anchors to the\n     surrounding line's bottom edge, not its baseline. */\n  vertical-align: bottom;\n  flex-wrap: wrap;\n}\n\n.keysEmpty {\n  color: var(--wzl-fg-muted);\n}\n\n.sep {\n  /* A key's height, so the glyph centers on the keys rather than riding the\n     row's bottom edge. */\n  display: inline-flex;\n  align-items: center;\n  height: var(--key-h);\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n}\n\n.key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--key-h);\n  padding: 0 var(--wzl-space-2);\n  /* Light face, slightly-darker-than-face border, dark glyph — reads as\n     a real keycap rather than a recessed slot in the panel. */\n  background: var(--wzl-fg, #e6e7e9);\n  border: 1px solid #25272c;\n  border-bottom-width: 2px;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-surface);\n  /* Keycaps are a deliberate exception to the site theme — the design-\n     system UI font (often a display face like Oswald) is wrong for\n     keyboard chips. Use a neutral sans stack so labels read like real\n     key legends. Consumers wanting a specific face per chip pass the\n     `font` prop on KeyCap. */\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  line-height: 1;\n}\n\n/* Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n   sit in a uniform key-cap box. */\n.key[data-kind='square'] {\n  width: var(--key-h);\n  padding: 0;\n}\n\n/* Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n   appear on a real keyboard — and to differentiate them from the keys\n   they modify in a stack. */\n.key[data-kind='modifier'] {\n  min-width: 26px;\n  padding: 0 var(--wzl-space-3);\n}\n\n/* Tab / Enter / Space — actual wide keys on a real keyboard. */\n.key[data-kind='wide'] {\n  min-width: 32px;\n  padding: 0 var(--wzl-space-4);\n}\n\n/* Optional/inverted (default variant): face flips to dark; legend drops\n   to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n   stacked for \"may be held but isn't required.\" */\n.key[data-inverted] {\n  background: var(--wzl-surface);\n  color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n  border-style: dotted;\n  border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n\n/* Minimal variant — no fill, borders and legend follow currentColor.\n   Useful inline in colored prose / next to colored badges where the\n   chip should take the surrounding text color. */\n.key[data-variant='minimal'] {\n  background: transparent;\n  border-color: currentColor;\n  color: currentColor;\n}\n\n/* Optional + minimal: dotted border at full currentColor, legend at full\n   currentColor. The dotted pattern alone carries the \"optional\" cue here\n   — minimal's whole point is to defer color to the surrounding context,\n   so dimming would fight that. (Default variant uses graded opacity as a\n   stacked cue; minimal keeps it crisp.) */\n.key[data-variant='minimal'][data-inverted] {\n  border-style: dotted;\n  border-color: currentColor;\n  color: currentColor;\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n","import type { KeySpec } from './Keycaps';\n\n/** Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n *  local type so `weasel-ui` stays independent of `@weasel-js/core`. */\nexport type LogicalMod = 'mod' | 'shift' | 'alt' | 'ctrl' | 'meta';\n\n/** Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n *  Ctrl on Windows / Linux. */\nexport type Platform = 'macos' | 'windows' | 'linux';\n\n/** Visual form of a modifier or named-key label.\n *\n *  - `'auto'` (default): the per-entry, per-platform default — whatever\n *    label is actually printed on the physical key. macOS keys show the\n *    Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n *    (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n *    context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n *  - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n *    exists. Entries without a widely-recognized symbol still fall\n *    back to text.\n *  - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */\nexport type LegendStyle = 'auto' | 'symbol' | 'text';\n\n/** A modifier to render, named platform-independently. */\nexport interface LogicalModSpec {\n  name: LogicalMod;\n  /** Marks this modifier as optional (may be held but isn't required).\n   *  Forwarded as the resulting `KeySpec.optional`. */\n  optional?: boolean;\n}\n\n/** Options for {@link keySpecsFromMods}. */\nexport interface KeySpecsFromModsOptions {\n  /** Override OS detection. Defaults to the detected platform, or\n   *  `'macos'` when detection is unavailable (e.g. in tests, or when\n   *  `navigator` is missing). */\n  platform?: Platform;\n  /** Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n   *  `'symbol'` or `'text'` to force a specific style regardless of\n   *  platform. */\n  legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n  mod: {\n    macos:   { auto: '⌘',    symbol: '⌘',    text: 'Cmd' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  shift: {\n    macos:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    linux:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n  },\n  alt: {\n    macos:   { auto: '⌥',   symbol: '⌥',   text: 'Option' },\n    windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n    linux:   { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n  },\n  ctrl: {\n    macos:   { auto: '⌃',    symbol: '⌃',    text: 'Control' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n  // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n  meta: {\n    macos:   { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n    windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n    linux:   { auto: '⊞', symbol: '⊞', text: 'Super' },\n  },\n};\n\n/** Every label {@link keySpecsFromMods} can produce, on any platform and legend. */\nexport const MODIFIER_LABELS: ReadonlySet<string> = new Set(\n  Object.values(MOD_BY_PLATFORM).flatMap((byPlatform) =>\n    Object.values(byPlatform).flatMap((byLegend) => Object.values(byLegend)),\n  ),\n);\n\n/** Detect the user's OS from the browser environment. UA sniffing — not\n *  100% reliable, but adequate for picking a modifier-glyph convention.\n *  Falls back to `'macos'` (matches the kit's docs convention) when\n *  `navigator` is unavailable. */\nexport function detectPlatform(): Platform {\n  if (typeof navigator === 'undefined') return 'macos';\n  // Prefer the modern userAgentData when available (Chromium-only today).\n  const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n  const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n  if (raw.includes('mac') || raw.includes('darwin') || raw.includes('iphone') || raw.includes('ipad')) return 'macos';\n  if (raw.includes('win')) return 'windows';\n  if (raw.includes('linux') || raw.includes('x11')) return 'linux';\n  return 'macos';\n}\n\n/**\n * Map a list of **logical** modifiers (`'mod'`, `'shift'`, …) to **visual**\n * `KeySpec`s appropriate for the current platform.\n *\n * The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n *\n * ```ts\n * <KeySequence\n *   keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n *\n * On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n */\nexport function keySpecsFromMods(\n  mods: readonly LogicalModSpec[],\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  return mods.map((m) => {\n    const label = MOD_BY_PLATFORM[m.name][platform][legend];\n    return m.optional ? { label, optional: true } : { label };\n  });\n}\n\n/** Per-platform × per-legend table for named, non-modifier keys. `auto`\n *  is whatever's printed on the physical key for that platform. Arrows\n *  are universal symbols on every platform. */\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n  Escape:      { macos: { auto: '⎋',    symbol: '⎋',        text: 'Esc' },       windows: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' },       linux: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' } },\n  Enter:       { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Return:      { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Tab:         { macos: { auto: '⇥',    symbol: '⇥',        text: 'Tab' },       windows: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' },       linux: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' } },\n  Space:       { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  ' ':         { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  Backspace:   { macos: { auto: '⌫',    symbol: '⌫',        text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n  Delete:      { macos: { auto: '⌦',    symbol: '⌦',        text: 'Delete' },    windows: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' },    linux: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' } },\n  // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n  // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n  ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu',     text: 'Menu' },      windows: { auto: '▤',         symbol: '▤',         text: 'Menu' },      linux: { auto: '▤',         symbol: '▤',         text: 'Menu' } },\n  ArrowUp:     { macos: { auto: '↑',    symbol: '↑',        text: '↑' },         windows: { auto: '↑',         symbol: '↑',         text: '↑' },         linux: { auto: '↑',         symbol: '↑',         text: '↑' } },\n  ArrowDown:   { macos: { auto: '↓',    symbol: '↓',        text: '↓' },         windows: { auto: '↓',         symbol: '↓',         text: '↓' },         linux: { auto: '↓',         symbol: '↓',         text: '↓' } },\n  ArrowLeft:   { macos: { auto: '←',    symbol: '←',        text: '←' },         windows: { auto: '←',         symbol: '←',         text: '←' },         linux: { auto: '←',         symbol: '←',         text: '←' } },\n  ArrowRight:  { macos: { auto: '→',    symbol: '→',        text: '→' },         windows: { auto: '→',         symbol: '→',         text: '→' },         linux: { auto: '→',         symbol: '→',         text: '→' } },\n};\n\n/**\n * Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n *\n * ```ts\n * keySpecFromKey('Escape', { platform: 'macos' })   // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p')                               // { label: 'P' }\n * ```\n *\n * Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n  raw: string,\n  opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  const entry = NAMED_KEY[raw];\n  const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n  return opts.optional ? { label, optional: true } : { label };\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\nimport { MODIFIER_LABELS } from './keySpecsFromMods';\n\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\n/**\n * Width class of a keycap: a modifier glyph, a multi-character legend that\n * needs a wider chip, or a single character in a square one.\n */\nexport type KeycapKind = 'modifier' | 'wide' | 'square';\n\n/**\n * Picks the chip width for a legend — modifier glyphs and anything longer\n * than one character get the wider forms.\n */\nexport function inferKeycapKind(label: string): KeycapKind {\n  if (label === '⇪' || MODIFIER_LABELS.has(label)) return 'modifier';\n  if (WIDE_GLYPHS.has(label)) return 'wide';\n  if (label.length > 1) return 'wide';\n  return 'square';\n}\n\n/** Visual style of a keycap chip. */\nexport type KeyCapVariant = 'default' | 'minimal';\n\n/** Props for {@link KeyCap}. */\nexport interface KeyCapProps {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** Marks the chip as not required to trigger the action. In the default\n   *  variant the chip face inverts (dark face / light glyph) for\n   *  emphasis. In the `'minimal'` variant the chip's border becomes\n   *  dotted to read as \"may be held, but isn't required.\" */\n  inverted?: boolean;\n  /** Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n   *  renders an unfilled chip whose border and legend are `currentColor`\n   *  — useful inline in colored prose / next to colored badges where the\n   *  chip should take the surrounding text color. */\n  variant?: KeyCapVariant;\n  className?: string;\n  /** Optional inline style. Useful for one-off width overrides (e.g.\n   *  building a keyboard-layout where the space bar spans several\n   *  standard-key widths). The component sets no inline styles of its\n   *  own — everything else comes from the CSS module. */\n  style?: CSSProperties;\n  /** Override the chip's font-family. Accepts any CSS font-family\n   *  string. When omitted, the chip inherits from the design-system\n   *  UI font token (`--wzl-font-ui`). Useful for one-off cases where\n   *  a different face is desired — though the canonical move is to\n   *  override the CSS variable at the consumer's scope, not the prop. */\n  font?: string;\n}\n\n/** Single bordered keycap chip for one glyph (modifier or key). Use\n *  `KeySequence` to render a full shortcut. */\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n  const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n  return (\n    <kbd\n      className={[s.key, className].filter(Boolean).join(' ')}\n      data-kind={inferKeycapKind(label)}\n      data-variant={variant === 'default' ? undefined : variant}\n      data-inverted={inverted || undefined}\n      style={resolvedStyle}\n    >\n      {label}\n    </kbd>\n  );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\n/** One key in a shortcut. */\nexport interface KeySpec {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** When true, the chip renders inverted to mark it as not required to\n   *  trigger the action (e.g. an optional modifier). Defaults to false. */\n  optional?: boolean;\n}\n\n/** Props for {@link KeySequence}. */\nexport interface KeySequenceProps {\n  /** Keys to render. `undefined` or empty renders a muted em-dash.\n   *  Modifiers are always rendered first regardless of input order; relative\n   *  order within each group is preserved. */\n  keys: readonly KeySpec[] | undefined;\n  /** Character inserted between the trailing modifier chip and the first\n   *  non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n   *  suppresses it. Defaults to `'+'`. */\n  separator?: string | null;\n  /** Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n   *  unfilled chips whose border + legend are `currentColor`. */\n  variant?: KeyCapVariant;\n  /** Forwarded to every `KeyCap` in the sequence. Overrides the design-\n   *  system UI font for that chip only. */\n  font?: string;\n  className?: string;\n}\n\n/** Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n *  keys render inverted to distinguish them from required ones. */\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n  if (!keys || keys.length === 0) {\n    return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n  }\n  const ordered = keys\n    .map((k, i) => ({ k, i }))\n    .sort((a, b) => {\n      const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n      const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n      return am - bm || a.i - b.i;\n    })\n    .map(({ k }) => k);\n  const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n  const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n  return (\n    <span className={[s.keys, className].filter(Boolean).join(' ')}>\n      {ordered.map((k, i) => (\n        <Fragment key={i}>\n          {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n          <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n","import type { ShortcutInput } from '../ToolPalette/formatShortcut';\nimport type { KeySpec } from './Keycaps';\nimport { keySpecFromKey, keySpecsFromMods, type KeySpecsFromModsOptions, type LogicalModSpec } from './keySpecsFromMods';\n\n/**\n * A shortcut as `KeySequence` keys, one per key: mod, shift, alt, then the\n * key, each in the platform's own legend (`⌘` on macOS, `Ctrl` elsewhere).\n * The `KeySpec` counterpart of `formatShortcutParts`, which always prints\n * macOS glyphs. `shift: 'optional'` becomes an optional key; a key list\n * renders its first key. Returns `undefined` for no shortcut.\n *\n * ```tsx\n * <KeySequence keys={keySpecsFromShortcut({ key: 'z', mod: true, shift: true })} />\n * ```\n */\nexport function keySpecsFromShortcut(\n  shortcut: ShortcutInput | undefined,\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] | undefined {\n  if (!shortcut) return undefined;\n  const mods: LogicalModSpec[] = [];\n  if (shortcut.mod) mods.push({ name: 'mod' });\n  if (shortcut.shift) mods.push(shortcut.shift === 'optional' ? { name: 'shift', optional: true } : { name: 'shift' });\n  if (shortcut.alt) mods.push({ name: 'alt' });\n  const key = typeof shortcut.key === 'string' ? shortcut.key : shortcut.key[0];\n  const keys = keySpecsFromMods(mods, opts);\n  return key === undefined ? keys : [...keys, keySpecFromKey(key, opts)];\n}\n"],"mappings":"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"}