@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/sheet/sheet.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Dialog } from "../dialog/dialog.js";
 import { Button } from "../button/button.js";
+import { Dialog } from "../dialog/dialog.js";
 import { ScrollArea } from "../scroll-area/scroll-area.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
@@ -73,6 +73,7 @@ function BackArrowGlyph() {
 }
 const Sheet = forwardRef(function Sheet({ side = "right", className, onBack, backLabel = "Back", scrollResetKey, bodyClassName, bodyLabel, title, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Dialog, {
+		entrance: "none",
 		...props,
 		ref,
 		title,
@@ -90,7 +91,8 @@ const Sheet = forwardRef(function Sheet({ side = "right", className, onBack, bac
 		children: /* @__PURE__ */ jsx(ScrollArea, {
 			scrollResetKey,
 			label: bodyLabel ?? (typeof title === "string" ? title : ""),
-			className: cn("min-h-0 flex-1", bodyClassName),
+			className: "min-h-0 flex-1",
+			viewportClassName: bodyClassName,
 			children
 		})
 	});

package/dist/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../src/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\n\n/**\n * Sheet: a dialog that arrives from an edge.\n *\n * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is\n * `@radix-ui/react-dialog` again -- the same import, the same parts, the\n * same close button -- with one prop changing where it sits. Keeping a\n * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`\n * drifted, and this is the same file for the third time.\n *\n * Census: 2 files, 3 uses. `side=\"right\"` twice, `side=\"left\"` once, and\n * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,\n * `SheetDescription` and `SheetClose` are exported by the legacy and used\n * by NOBODY -- so all three sheets in the app render a `role=\"dialog\"`\n * with no title at all. Radix even warns about it in the console.\n *\n * `title` is required here, inherited from Dialog, so that is no longer\n * expressible.\n *\n * `side` is `\"left\" | \"right\"` only. The legacy also offers `\"top\"` and\n * `\"bottom\"`; both have zero call sites, and each is two lines to add the\n * day something needs one.\n *\n * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and\n * `sm:max-w-sm` names `--container-sm`, which this repo does not define --\n * so in Alfred it would compile to NOTHING and the sheet would be 75% of\n * the viewport at every width, on a phone and on a 4K monitor alike. The\n * width here is a spacing-scale step that actually resolves.\n *\n * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,\n * which this repo does not ship. React Aria exposes `data-entering` and\n * `data-exiting`, and `--animate-*` tokens now exist, so it is a small\n * follow-up rather than a blocker.\n */\nexport const sheetOverlayVariants = cva(\"p-0\", {\n  variants: {\n    // The overlay is a flex box centring the panel. A sheet replaces that\n    // centring with an edge alignment rather than positioning the panel\n    // absolutely, so the scrim and the panel stay one layout.\n    side: {\n      left: \"justify-start items-stretch\",\n      right: \"justify-end items-stretch\",\n    },\n  },\n  defaultVariants: { side: \"right\" },\n});\n\nexport const sheetPanelVariants = cva(\n  [\n    // max-w-96 is 384px and RESOLVES. See the note above on sm:max-w-sm.\n    \"h-full w-full max-w-96\",\n    // Square against the edge it is attached to: a rounded corner flush\n    // with the viewport edge reads as a rendering fault.\n    \"rounded-none\",\n    \"max-h-full overflow-y-auto\",\n  ],\n  {\n    variants: {\n      side: {\n        left: \"border-y-0 border-s-0\",\n        right: \"border-y-0 border-e-0\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\n/**\n * A panel that arrives from the side.\n *\n * @example\n * <Sheet isOpen={open} onOpenChange={setOpen} title=\"Filters\">\n *   ...\n * </Sheet>\n */\nexport interface SheetProps extends Omit<DialogProps, \"overlayClassName\"> {\n  /**\n   * Which edge it is attached to.\n   *\n   * `\"top\"` and `\"bottom\"` exist in the legacy and have zero call sites.\n   *\n   * @default \"right\"\n   */\n  side?: \"left\" | \"right\";\n  /**\n   * Show a back control, and what it does.\n   *\n   * A side panel that goes a level deeper REPLACES its own contents rather\n   * than stacking a second modal on top, so the browser's back affordance and\n   * the escape key both do the wrong thing -- they close the whole panel\n   * instead of returning one level. The product's own note calls this the\n   * thing that \"makes items 119 and 120 one change rather than two\".\n   */\n  onBack?: () => void;\n  /** Accessible name and label for the back control. @default \"Back\" */\n  backLabel?: string;\n  /**\n   * Change this when the panel's contents change, and the body scrolls back\n   * to the top.\n   *\n   * Going a level deeper and landing halfway down the new view is\n   * disorienting, and it is the kind of thing every call site forgets --\n   * which is why it belongs here rather than in each of them.\n   */\n  scrollResetKey?: string | number;\n  /** Extra classes for the scrolling body region. */\n  bodyClassName?: string;\n  /**\n   * Names the scrolling body region. Defaults to `title` when that is a\n   * string, which it is at every call site in the product.\n   *\n   * The body is a `ScrollArea`, so it is focusable -- a scrollable region that\n   * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that\n   * when this was a plain div. The product's own `SidePanelBody` still is one.\n   * A focusable element needs a role and a role needs a name, so this is the\n   * only combination that is actually correct.\n   */\n  bodyLabel?: string;\n}\n\nfunction BackArrowGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      // Logical, so it points the right way once the panel mirrors in RTL.\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d=\"M10 3 5 8l5 5\" />\n    </svg>\n  );\n}\n\nexport const Sheet = forwardRef<HTMLElement, SheetProps>(function Sheet(\n  {\n    side = \"right\",\n    className,\n    onBack,\n    backLabel = \"Back\",\n    scrollResetKey,\n    bodyClassName,\n    bodyLabel,\n    title,\n    children,\n    ...props\n  },\n  ref,\n) {\n  return (\n    /*\n      No data-slot here. Dialog spreads its props onto the ModalOverlay and\n      writes data-slot=\"dialog-overlay\" AFTER the spread, so a data-slot\n      passed from here is overwritten before it reaches the DOM -- it read as\n      working while rendering nothing. A sheet is identified by its side\n      variant and its panel classes instead.\n    */\n    <Dialog\n      {...props}\n      ref={ref}\n      title={title}\n      beforeTitle={\n        onBack ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"sheet-back\"\n            className=\"-ms-2 w-fit\"\n            startIcon={<BackArrowGlyph />}\n            onPress={onBack}\n          >\n            {backLabel}\n          </Button>\n        ) : undefined\n      }\n      overlayClassName={sheetOverlayVariants({ side })}\n      className={cn(sheetPanelVariants({ side }), className)}\n    >\n      {/*\n        The scrolling region is its own element so the title and the back\n        control stay put while the content moves. A panel that scrolled as one\n        block would take its own heading off screen.\n      */}\n      {/*\n        No data-slot=\"sheet-body\" here, for the same reason the overlay has\n        none: ScrollArea spreads its props and writes data-slot=\"scroll-area\"\n        AFTER the spread, so one passed from here is overwritten before it\n        reaches the DOM. It read as wired while selecting nothing.\n      */}\n      <ScrollArea\n        scrollResetKey={scrollResetKey}\n        label={bodyLabel ?? (typeof title === \"string\" ? title : \"\")}\n        className={cn(\"min-h-0 flex-1\", bodyClassName)}\n      >\n        {children}\n      </ScrollArea>\n    </Dialog>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAAuB,IAAI,OAAO;CAC7C,UAAU,EAIR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAED,MAAa,qBAAqB,IAChC;CAEE;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CACF;AAuDA,SAAS,iBAAiB;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EAEf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;CACtB,CAAA;AAET;AAEA,MAAa,QAAQ,WAAoC,SAAS,MAChE,EACE,OAAO,SACP,WACA,QACA,YAAY,QACZ,gBACA,eACA,WACA,OACA,UACA,GAAG,SAEL,KACA;CACA,OAQE,oBAAC,QAAD;EACE,GAAI;EACC;EACE;EACP,aACE,SACE,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,aAAU;GACV,WAAU;GACV,WAAW,oBAAC,gBAAD,CAAiB,CAAA;GAC5B,SAAS;GAER,UAAA;EACK,CAAA,IACN,KAAA;EAEN,kBAAkB,qBAAqB,EAAE,KAAK,CAAC;EAC/C,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;EAarD,UAAA,oBAAC,YAAD;GACkB;GAChB,OAAO,cAAc,OAAO,UAAU,WAAW,QAAQ;GACzD,WAAW,GAAG,kBAAkB,aAAa;GAE5C;EACS,CAAA;CACN,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\n\n/**\n * Sheet: a dialog that arrives from an edge.\n *\n * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is\n * `@radix-ui/react-dialog` again -- the same import, the same parts, the\n * same close button -- with one prop changing where it sits. Keeping a\n * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`\n * drifted, and this is the same file for the third time.\n *\n * Census: 2 files, 3 uses. `side=\"right\"` twice, `side=\"left\"` once, and\n * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,\n * `SheetDescription` and `SheetClose` are exported by the legacy and used\n * by NOBODY -- so all three sheets in the app render a `role=\"dialog\"`\n * with no title at all. Radix even warns about it in the console.\n *\n * `title` is required here, inherited from Dialog, so that is no longer\n * expressible.\n *\n * `side` is `\"left\" | \"right\"` only. The legacy also offers `\"top\"` and\n * `\"bottom\"`; both have zero call sites, and each is two lines to add the\n * day something needs one.\n *\n * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and\n * `sm:max-w-sm` names `--container-sm`, which this repo does not define --\n * so in Alfred it would compile to NOTHING and the sheet would be 75% of\n * the viewport at every width, on a phone and on a 4K monitor alike. The\n * width here is a spacing-scale step that actually resolves.\n *\n * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,\n * which this repo does not ship. React Aria exposes `data-entering` and\n * `data-exiting`, and `--animate-*` tokens now exist, so it is a small\n * follow-up rather than a blocker.\n */\nexport const sheetOverlayVariants = cva(\"p-0\", {\n  variants: {\n    // The overlay is a flex box centring the panel. A sheet replaces that\n    // centring with an edge alignment rather than positioning the panel\n    // absolutely, so the scrim and the panel stay one layout.\n    side: {\n      left: \"justify-start items-stretch\",\n      right: \"justify-end items-stretch\",\n    },\n  },\n  defaultVariants: { side: \"right\" },\n});\n\nexport const sheetPanelVariants = cva(\n  [\n    // max-w-96 is 384px and RESOLVES. See the note above on sm:max-w-sm.\n    \"h-full w-full max-w-96\",\n    // Square against the edge it is attached to: a rounded corner flush\n    // with the viewport edge reads as a rendering fault.\n    \"rounded-none\",\n    \"max-h-full overflow-y-auto\",\n  ],\n  {\n    variants: {\n      side: {\n        left: \"border-y-0 border-s-0\",\n        right: \"border-y-0 border-e-0\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\n/**\n * A panel that arrives from the side.\n *\n * @example\n * <Sheet isOpen={open} onOpenChange={setOpen} title=\"Filters\">\n *   ...\n * </Sheet>\n */\nexport interface SheetProps extends Omit<DialogProps, \"overlayClassName\"> {\n  /**\n   * Which edge it is attached to.\n   *\n   * `\"top\"` and `\"bottom\"` exist in the legacy and have zero call sites.\n   *\n   * @default \"right\"\n   */\n  side?: \"left\" | \"right\";\n  /**\n   * Show a back control, and what it does.\n   *\n   * A side panel that goes a level deeper REPLACES its own contents rather\n   * than stacking a second modal on top, so the browser's back affordance and\n   * the escape key both do the wrong thing -- they close the whole panel\n   * instead of returning one level. The product's own note calls this the\n   * thing that \"makes items 119 and 120 one change rather than two\".\n   */\n  onBack?: () => void;\n  /** Accessible name and label for the back control. @default \"Back\" */\n  backLabel?: string;\n  /**\n   * Change this when the panel's contents change, and the body scrolls back\n   * to the top.\n   *\n   * Going a level deeper and landing halfway down the new view is\n   * disorienting, and it is the kind of thing every call site forgets --\n   * which is why it belongs here rather than in each of them.\n   */\n  scrollResetKey?: string | number;\n  /** Extra classes for the scrolling body region. */\n  bodyClassName?: string;\n  /**\n   * Names the scrolling body region. Defaults to `title` when that is a\n   * string, which it is at every call site in the product.\n   *\n   * The body is a `ScrollArea`, so it is focusable -- a scrollable region that\n   * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that\n   * when this was a plain div. The product's own `SidePanelBody` still is one.\n   * A focusable element needs a role and a role needs a name, so this is the\n   * only combination that is actually correct.\n   */\n  bodyLabel?: string;\n}\n\nfunction BackArrowGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      // Logical, so it points the right way once the panel mirrors in RTL.\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d=\"M10 3 5 8l5 5\" />\n    </svg>\n  );\n}\n\nexport const Sheet = forwardRef<HTMLElement, SheetProps>(function Sheet(\n  {\n    side = \"right\",\n    className,\n    onBack,\n    backLabel = \"Back\",\n    scrollResetKey,\n    bodyClassName,\n    bodyLabel,\n    title,\n    children,\n    ...props\n  },\n  ref,\n) {\n  return (\n    /*\n      No data-slot here. Dialog spreads its props onto the ModalOverlay and\n      writes data-slot=\"dialog-overlay\" AFTER the spread, so a data-slot\n      passed from here is overwritten before it reaches the DOM -- it read as\n      working while rendering nothing. A sheet is identified by its side\n      variant and its panel classes instead.\n    */\n    <Dialog\n      entrance=\"none\"\n      {...props}\n      ref={ref}\n      title={title}\n      beforeTitle={\n        onBack ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"sheet-back\"\n            className=\"-ms-2 w-fit\"\n            startIcon={<BackArrowGlyph />}\n            onPress={onBack}\n          >\n            {backLabel}\n          </Button>\n        ) : undefined\n      }\n      overlayClassName={sheetOverlayVariants({ side })}\n      className={cn(sheetPanelVariants({ side }), className)}\n    >\n      {/*\n        The scrolling region is its own element so the title and the back\n        control stay put while the content moves. A panel that scrolled as one\n        block would take its own heading off screen.\n      */}\n      {/*\n        No data-slot=\"sheet-body\" here, for the same reason the overlay has\n        none: ScrollArea spreads its props and writes data-slot=\"scroll-area\"\n        AFTER the spread, so one passed from here is overwritten before it\n        reaches the DOM. It read as wired while selecting nothing.\n      */}\n      <ScrollArea\n        scrollResetKey={scrollResetKey}\n        label={bodyLabel ?? (typeof title === \"string\" ? title : \"\")}\n        className=\"min-h-0 flex-1\"\n        viewportClassName={bodyClassName}\n      >\n        {children}\n      </ScrollArea>\n    </Dialog>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,uBAAuB,IAAI,OAAO;CAC7C,UAAU,EAIR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAED,MAAa,qBAAqB,IAChC;CAEE;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CACF;AAuDA,SAAS,iBAAiB;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EAEf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;CACtB,CAAA;AAET;AAEA,MAAa,QAAQ,WAAoC,SAAS,MAChE,EACE,OAAO,SACP,WACA,QACA,YAAY,QACZ,gBACA,eACA,WACA,OACA,UACA,GAAG,SAEL,KACA;CACA,OAQE,oBAAC,QAAD;EACE,UAAS;EACT,GAAI;EACC;EACE;EACP,aACE,SACE,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,aAAU;GACV,WAAU;GACV,WAAW,oBAAC,gBAAD,CAAiB,CAAA;GAC5B,SAAS;GAER,UAAA;EACK,CAAA,IACN,KAAA;EAEN,kBAAkB,qBAAqB,EAAE,KAAK,CAAC;EAC/C,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS;EAarD,UAAA,oBAAC,YAAD;GACkB;GAChB,OAAO,cAAc,OAAO,UAAU,WAAW,QAAQ;GACzD,WAAU;GACV,mBAAmB;GAElB;EACS,CAAA;CACN,CAAA;AAEZ,CAAC"}

package/dist/shortcut-recorder/index.d.ts

@@ -0,0 +1,3 @@
+import { Platform, ShortcutToken, formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-model.js";
+import { ShortcutBinding, ShortcutKbd, ShortcutKbdProps, ShortcutKeys, ShortcutKeysProps, ShortcutRecorder, ShortcutRecorderProps, usePlatform, usePressedKeys } from "./shortcut-recorder.js";
+export { type Platform, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens, usePlatform, usePressedKeys };

package/dist/shortcut-recorder/index.js

@@ -0,0 +1,3 @@
+import { formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens } from "./shortcut-model.js";
+import { ShortcutKbd, ShortcutKeys, ShortcutRecorder, usePlatform, usePressedKeys } from "./shortcut-recorder.js";
+export { ShortcutKbd, ShortcutKeys, ShortcutRecorder, formatShortcut, matchesShortcut, normalizeShortcut, shortcutFromEvent, shortcutTokens, usePlatform, usePressedKeys };

package/dist/shortcut-recorder/shortcut-model.d.ts

@@ -0,0 +1,27 @@
+//#region src/shortcut-recorder/shortcut-model.d.ts
+export type Platform = "mac" | "other";
+export interface ShortcutToken {
+  /** What the key cap shows. */
+  label: string;
+  /** Physical key id, matched against held keys. */
+  id: string;
+  /** How a screen reader says it. */
+  spoken: string;
+}
+/** The parts of a keyboard event the model reads, so a test can pass a plain object. */
+export type KeyEventLike = Pick<KeyboardEvent, "key" | "code" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey">;
+/** One spelling per combination: on a Mac, Command is `mod`; elsewhere, Ctrl is. Modifiers come in a fixed order. */
+export declare function normalizeShortcut(shortcut: string, platform: Platform): string;
+/** Reads a keydown into a shortcut string, or `null` while only modifiers are down. */
+export declare function shortcutFromEvent(event: KeyEventLike, platform: Platform): string | null;
+/** True when a keydown is this shortcut. Use it to run the action a recorded shortcut is bound to. */
+export declare function matchesShortcut(event: KeyEventLike, shortcut: string, platform: Platform): boolean;
+/** Key caps for a shortcut in platform order: Control, Option, Shift, Command symbols on a Mac; Ctrl, Alt, Shift, Win elsewhere. */
+export declare function shortcutTokens(shortcut: string, platform: Platform): ShortcutToken[];
+/** The shortcut as text ("⌘⇧K" on a Mac, "Ctrl+Shift+K" elsewhere), plus a spoken form for assistive technology. */
+export declare function formatShortcut(shortcut: string, platform: Platform): {
+  text: string;
+  spoken: string;
+};
+//#endregion
+//# sourceMappingURL=shortcut-model.d.ts.map

package/dist/shortcut-recorder/shortcut-model.js

@@ -0,0 +1,206 @@
+//#region src/shortcut-recorder/shortcut-model.ts
+const MODIFIER_ORDER = [
+	"mod",
+	"ctrl",
+	"alt",
+	"shift",
+	"meta"
+];
+const isModifier = (part) => MODIFIER_ORDER.includes(part);
+const CODE_KEYS = {
+	Comma: ",",
+	Period: ".",
+	Slash: "/",
+	Semicolon: ";",
+	Quote: "'",
+	BracketLeft: "[",
+	BracketRight: "]",
+	Backslash: "\\",
+	Minus: "-",
+	Equal: "=",
+	Backquote: "`",
+	Space: "space",
+	Enter: "enter",
+	NumpadEnter: "enter",
+	Escape: "escape",
+	Backspace: "backspace",
+	Delete: "delete",
+	Tab: "tab",
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	Home: "home",
+	End: "end",
+	PageUp: "pageup",
+	PageDown: "pagedown"
+};
+const MODIFIER_KEYS = {
+	Meta: "meta",
+	OS: "meta",
+	Control: "ctrl",
+	Alt: "alt",
+	AltGraph: "alt",
+	Shift: "shift"
+};
+const HELD_MODIFIERS = [
+	"meta",
+	"ctrl",
+	"alt",
+	"shift"
+];
+/** The physical key id for an event: "k", "1", "enter", "meta", "shift"... `null` for keys that never make a shortcut, such as Caps Lock. */
+function keyId(event) {
+	const { code, key } = event;
+	if (MODIFIER_KEYS[key]) return MODIFIER_KEYS[key] ?? null;
+	if (/^Key[A-Z]$/.test(code)) return code.slice(3).toLowerCase();
+	if (/^Digit\d$/.test(code)) return code.slice(5);
+	if (/^Numpad\d$/.test(code)) return code.slice(6);
+	if (CODE_KEYS[code]) return CODE_KEYS[code] ?? null;
+	if (/^F\d{1,2}$/.test(key)) return key.toLowerCase();
+	if (key === "CapsLock" || key === "Fn" || key === "Dead" || key === "Unidentified" || key === "Process") return null;
+	return key.length === 1 ? key.toLowerCase() : null;
+}
+function splitShortcut(shortcut) {
+	const parts = shortcut.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	const key = parts.filter((part) => !isModifier(part)).pop() ?? "";
+	return {
+		mods: new Set(parts.filter(isModifier)),
+		key
+	};
+}
+/** One spelling per combination: on a Mac, Command is `mod`; elsewhere, Ctrl is. Modifiers come in a fixed order. */
+function normalizeShortcut(shortcut, platform) {
+	const { mods, key } = splitShortcut(shortcut);
+	if (platform === "mac" && mods.delete("meta")) mods.add("mod");
+	if (platform === "other" && mods.delete("ctrl")) mods.add("mod");
+	return [...MODIFIER_ORDER.filter((mod) => mods.has(mod)), key].filter(Boolean).join("+");
+}
+/** The modifiers an event holds, in the model's spelling. */
+function modifiersFromEvent(event, platform) {
+	const mods = [];
+	if (platform === "mac" ? event.metaKey : event.ctrlKey) mods.push("mod");
+	if (platform === "mac" && event.ctrlKey) mods.push("ctrl");
+	if (event.altKey) mods.push("alt");
+	if (event.shiftKey) mods.push("shift");
+	if (platform === "other" && event.metaKey) mods.push("meta");
+	return mods;
+}
+/** Reads a keydown into a shortcut string, or `null` while only modifiers are down. */
+function shortcutFromEvent(event, platform) {
+	const key = keyId(event);
+	if (!key || HELD_MODIFIERS.includes(key)) return null;
+	return normalizeShortcut([...modifiersFromEvent(event, platform), key].join("+"), platform);
+}
+/** True when a keydown is this shortcut. Use it to run the action a recorded shortcut is bound to. */
+function matchesShortcut(event, shortcut, platform) {
+	const pressed = shortcutFromEvent(event, platform);
+	return !!pressed && pressed === normalizeShortcut(shortcut, platform);
+}
+const MAC_KEYS = {
+	enter: ["↩", "Return"],
+	backspace: ["⌫", "Delete"],
+	delete: ["⌦", "Forward delete"],
+	tab: ["⇥", "Tab"],
+	escape: ["esc", "Escape"]
+};
+const SHARED_KEYS = {
+	space: ["Space", "Space"],
+	enter: ["Enter", "Enter"],
+	escape: ["Esc", "Escape"],
+	backspace: ["Backspace", "Backspace"],
+	delete: ["Del", "Delete"],
+	tab: ["Tab", "Tab"],
+	up: ["↑", "Up arrow"],
+	down: ["↓", "Down arrow"],
+	left: ["←", "Left arrow"],
+	right: ["→", "Right arrow"],
+	home: ["Home", "Home"],
+	end: ["End", "End"],
+	pageup: ["PgUp", "Page up"],
+	pagedown: ["PgDn", "Page down"],
+	",": [",", "Comma"],
+	".": [".", "Period"],
+	"/": ["/", "Slash"],
+	";": [";", "Semicolon"],
+	"'": ["'", "Quote"],
+	"[": ["[", "Left bracket"],
+	"]": ["]", "Right bracket"],
+	"\\": ["\\", "Backslash"],
+	"-": ["-", "Minus"],
+	"=": ["=", "Equals"],
+	"`": ["`", "Backtick"]
+};
+/** Key caps for a shortcut in platform order: Control, Option, Shift, Command symbols on a Mac; Ctrl, Alt, Shift, Win elsewhere. */
+function shortcutTokens(shortcut, platform) {
+	const { mods, key } = splitShortcut(normalizeShortcut(shortcut, platform));
+	const tokens = [];
+	if (platform === "mac") {
+		if (mods.has("ctrl")) tokens.push({
+			label: "⌃",
+			id: "ctrl",
+			spoken: "Control"
+		});
+		if (mods.has("alt")) tokens.push({
+			label: "⌥",
+			id: "alt",
+			spoken: "Option"
+		});
+		if (mods.has("shift")) tokens.push({
+			label: "⇧",
+			id: "shift",
+			spoken: "Shift"
+		});
+		if (mods.has("mod") || mods.has("meta")) tokens.push({
+			label: "⌘",
+			id: "meta",
+			spoken: "Command"
+		});
+	} else {
+		if (mods.has("mod") || mods.has("ctrl")) tokens.push({
+			label: "Ctrl",
+			id: "ctrl",
+			spoken: "Control"
+		});
+		if (mods.has("alt")) tokens.push({
+			label: "Alt",
+			id: "alt",
+			spoken: "Alt"
+		});
+		if (mods.has("shift")) tokens.push({
+			label: "Shift",
+			id: "shift",
+			spoken: "Shift"
+		});
+		if (mods.has("meta")) tokens.push({
+			label: "Win",
+			id: "meta",
+			spoken: "Windows"
+		});
+	}
+	if (key) {
+		const named = (platform === "mac" ? MAC_KEYS[key] : void 0) ?? SHARED_KEYS[key];
+		tokens.push(named ? {
+			label: named[0],
+			id: key,
+			spoken: named[1]
+		} : {
+			label: key.toUpperCase(),
+			id: key,
+			spoken: key.toUpperCase()
+		});
+	}
+	return tokens;
+}
+/** The shortcut as text ("⌘⇧K" on a Mac, "Ctrl+Shift+K" elsewhere), plus a spoken form for assistive technology. */
+function formatShortcut(shortcut, platform) {
+	const tokens = shortcutTokens(shortcut, platform);
+	return {
+		text: tokens.map((token) => token.label).join(platform === "mac" ? "" : "+"),
+		spoken: tokens.map((token) => token.spoken).join(" ")
+	};
+}
+//#endregion
+export { formatShortcut, keyId, matchesShortcut, modifiersFromEvent, normalizeShortcut, shortcutFromEvent, shortcutTokens, splitShortcut };
+
+//# sourceMappingURL=shortcut-model.js.map

package/dist/shortcut-recorder/shortcut-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-model.js","names":[],"sources":["../../src/shortcut-recorder/shortcut-model.ts"],"sourcesContent":["/*\n * The shortcut model. A shortcut is a string such as \"mod+shift+k\". `mod` is\n * Command on Apple platforms and Control elsewhere, so one binding reads right\n * everywhere. Keys come from the physical key (`event.code`) where it matters,\n * so Option+K records as \"alt+k\" instead of the character it types.\n */\n\nexport type Platform = \"mac\" | \"other\";\n\nexport interface ShortcutToken {\n  /** What the key cap shows. */\n  label: string;\n  /** Physical key id, matched against held keys. */\n  id: string;\n  /** How a screen reader says it. */\n  spoken: string;\n}\n\n/** The parts of a keyboard event the model reads, so a test can pass a plain object. */\nexport type KeyEventLike = Pick<\n  KeyboardEvent,\n  \"key\" | \"code\" | \"metaKey\" | \"ctrlKey\" | \"altKey\" | \"shiftKey\"\n>;\n\nconst MODIFIER_ORDER = [\"mod\", \"ctrl\", \"alt\", \"shift\", \"meta\"] as const;\ntype Modifier = (typeof MODIFIER_ORDER)[number];\nconst isModifier = (part: string): part is Modifier =>\n  (MODIFIER_ORDER as readonly string[]).includes(part);\n\nconst CODE_KEYS: Record<string, string> = {\n  Comma: \",\",\n  Period: \".\",\n  Slash: \"/\",\n  Semicolon: \";\",\n  Quote: \"'\",\n  BracketLeft: \"[\",\n  BracketRight: \"]\",\n  Backslash: \"\\\\\",\n  Minus: \"-\",\n  Equal: \"=\",\n  Backquote: \"`\",\n  Space: \"space\",\n  Enter: \"enter\",\n  NumpadEnter: \"enter\",\n  Escape: \"escape\",\n  Backspace: \"backspace\",\n  Delete: \"delete\",\n  Tab: \"tab\",\n  ArrowUp: \"up\",\n  ArrowDown: \"down\",\n  ArrowLeft: \"left\",\n  ArrowRight: \"right\",\n  Home: \"home\",\n  End: \"end\",\n  PageUp: \"pageup\",\n  PageDown: \"pagedown\",\n};\n\nconst MODIFIER_KEYS: Record<string, string> = {\n  Meta: \"meta\",\n  OS: \"meta\",\n  Control: \"ctrl\",\n  Alt: \"alt\",\n  AltGraph: \"alt\",\n  Shift: \"shift\",\n};\n\nconst HELD_MODIFIERS = [\"meta\", \"ctrl\", \"alt\", \"shift\"];\n\n/** The physical key id for an event: \"k\", \"1\", \"enter\", \"meta\", \"shift\"... `null` for keys that never make a shortcut, such as Caps Lock. */\nexport function keyId(event: Pick<KeyboardEvent, \"key\" | \"code\">): string | null {\n  const { code, key } = event;\n  if (MODIFIER_KEYS[key]) return MODIFIER_KEYS[key] ?? null;\n  if (/^Key[A-Z]$/.test(code)) return code.slice(3).toLowerCase();\n  if (/^Digit\\d$/.test(code)) return code.slice(5);\n  if (/^Numpad\\d$/.test(code)) return code.slice(6);\n  if (CODE_KEYS[code]) return CODE_KEYS[code] ?? null;\n  if (/^F\\d{1,2}$/.test(key)) return key.toLowerCase();\n  if (\n    key === \"CapsLock\" ||\n    key === \"Fn\" ||\n    key === \"Dead\" ||\n    key === \"Unidentified\" ||\n    key === \"Process\"\n  )\n    return null;\n  return key.length === 1 ? key.toLowerCase() : null;\n}\n\nexport function splitShortcut(shortcut: string) {\n  const parts = shortcut\n    .toLowerCase()\n    .split(\"+\")\n    .map((part) => part.trim())\n    .filter(Boolean);\n  const key = parts.filter((part) => !isModifier(part)).pop() ?? \"\";\n  return { mods: new Set(parts.filter(isModifier)), key };\n}\n\n/** One spelling per combination: on a Mac, Command is `mod`; elsewhere, Ctrl is. Modifiers come in a fixed order. */\nexport function normalizeShortcut(shortcut: string, platform: Platform) {\n  const { mods, key } = splitShortcut(shortcut);\n  if (platform === \"mac\" && mods.delete(\"meta\")) mods.add(\"mod\");\n  if (platform === \"other\" && mods.delete(\"ctrl\")) mods.add(\"mod\");\n  return [...MODIFIER_ORDER.filter((mod) => mods.has(mod)), key].filter(Boolean).join(\"+\");\n}\n\n/** The modifiers an event holds, in the model's spelling. */\nexport function modifiersFromEvent(\n  event: Pick<KeyEventLike, \"metaKey\" | \"ctrlKey\" | \"altKey\" | \"shiftKey\">,\n  platform: Platform,\n) {\n  const mods: string[] = [];\n  if (platform === \"mac\" ? event.metaKey : event.ctrlKey) mods.push(\"mod\");\n  if (platform === \"mac\" && event.ctrlKey) mods.push(\"ctrl\");\n  if (event.altKey) mods.push(\"alt\");\n  if (event.shiftKey) mods.push(\"shift\");\n  if (platform === \"other\" && event.metaKey) mods.push(\"meta\");\n  return mods;\n}\n\n/** Reads a keydown into a shortcut string, or `null` while only modifiers are down. */\nexport function shortcutFromEvent(event: KeyEventLike, platform: Platform) {\n  const key = keyId(event);\n  if (!key || HELD_MODIFIERS.includes(key)) return null;\n  return normalizeShortcut([...modifiersFromEvent(event, platform), key].join(\"+\"), platform);\n}\n\n/** True when a keydown is this shortcut. Use it to run the action a recorded shortcut is bound to. */\nexport function matchesShortcut(event: KeyEventLike, shortcut: string, platform: Platform) {\n  const pressed = shortcutFromEvent(event, platform);\n  return !!pressed && pressed === normalizeShortcut(shortcut, platform);\n}\n\nconst MAC_KEYS: Record<string, [string, string]> = {\n  enter: [\"↩\", \"Return\"],\n  backspace: [\"⌫\", \"Delete\"],\n  delete: [\"⌦\", \"Forward delete\"],\n  tab: [\"⇥\", \"Tab\"],\n  escape: [\"esc\", \"Escape\"],\n};\n\nconst SHARED_KEYS: Record<string, [string, string]> = {\n  space: [\"Space\", \"Space\"],\n  enter: [\"Enter\", \"Enter\"],\n  escape: [\"Esc\", \"Escape\"],\n  backspace: [\"Backspace\", \"Backspace\"],\n  delete: [\"Del\", \"Delete\"],\n  tab: [\"Tab\", \"Tab\"],\n  up: [\"↑\", \"Up arrow\"],\n  down: [\"↓\", \"Down arrow\"],\n  left: [\"←\", \"Left arrow\"],\n  right: [\"→\", \"Right arrow\"],\n  home: [\"Home\", \"Home\"],\n  end: [\"End\", \"End\"],\n  pageup: [\"PgUp\", \"Page up\"],\n  pagedown: [\"PgDn\", \"Page down\"],\n  \",\": [\",\", \"Comma\"],\n  \".\": [\".\", \"Period\"],\n  \"/\": [\"/\", \"Slash\"],\n  \";\": [\";\", \"Semicolon\"],\n  \"'\": [\"'\", \"Quote\"],\n  \"[\": [\"[\", \"Left bracket\"],\n  \"]\": [\"]\", \"Right bracket\"],\n  \"\\\\\": [\"\\\\\", \"Backslash\"],\n  \"-\": [\"-\", \"Minus\"],\n  \"=\": [\"=\", \"Equals\"],\n  \"`\": [\"`\", \"Backtick\"],\n};\n\n/** Key caps for a shortcut in platform order: Control, Option, Shift, Command symbols on a Mac; Ctrl, Alt, Shift, Win elsewhere. */\nexport function shortcutTokens(shortcut: string, platform: Platform): ShortcutToken[] {\n  const { mods, key } = splitShortcut(normalizeShortcut(shortcut, platform));\n  const tokens: ShortcutToken[] = [];\n  if (platform === \"mac\") {\n    if (mods.has(\"ctrl\")) tokens.push({ label: \"⌃\", id: \"ctrl\", spoken: \"Control\" });\n    if (mods.has(\"alt\")) tokens.push({ label: \"⌥\", id: \"alt\", spoken: \"Option\" });\n    if (mods.has(\"shift\")) tokens.push({ label: \"⇧\", id: \"shift\", spoken: \"Shift\" });\n    if (mods.has(\"mod\") || mods.has(\"meta\"))\n      tokens.push({ label: \"⌘\", id: \"meta\", spoken: \"Command\" });\n  } else {\n    if (mods.has(\"mod\") || mods.has(\"ctrl\"))\n      tokens.push({ label: \"Ctrl\", id: \"ctrl\", spoken: \"Control\" });\n    if (mods.has(\"alt\")) tokens.push({ label: \"Alt\", id: \"alt\", spoken: \"Alt\" });\n    if (mods.has(\"shift\")) tokens.push({ label: \"Shift\", id: \"shift\", spoken: \"Shift\" });\n    if (mods.has(\"meta\")) tokens.push({ label: \"Win\", id: \"meta\", spoken: \"Windows\" });\n  }\n  if (key) {\n    const named = (platform === \"mac\" ? MAC_KEYS[key] : undefined) ?? SHARED_KEYS[key];\n    tokens.push(\n      named\n        ? { label: named[0], id: key, spoken: named[1] }\n        : { label: key.toUpperCase(), id: key, spoken: key.toUpperCase() },\n    );\n  }\n  return tokens;\n}\n\n/** The shortcut as text (\"⌘⇧K\" on a Mac, \"Ctrl+Shift+K\" elsewhere), plus a spoken form for assistive technology. */\nexport function formatShortcut(shortcut: string, platform: Platform) {\n  const tokens = shortcutTokens(shortcut, platform);\n  return {\n    text: tokens.map((token) => token.label).join(platform === \"mac\" ? \"\" : \"+\"),\n    spoken: tokens.map((token) => token.spoken).join(\" \"),\n  };\n}\n"],"mappings":"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"}

package/dist/shortcut-recorder/shortcut-recorder.d.ts

@@ -0,0 +1,93 @@
+import { Platform } from "./shortcut-model.js";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/shortcut-recorder/shortcut-recorder.d.ts
+/** The viewer's platform. A server render assumes a Mac and settles on the first client render. */
+export declare function usePlatform(override?: Platform): Platform;
+/**
+ * The keys held down right now, by physical id (feed it to `ShortcutKeys` to light the
+ * caps as they are pressed). Clears when the window loses focus, and after Command lifts
+ * (macOS drops the other keyups).
+ */
+export declare function usePressedKeys(enabled?: boolean): ReadonlySet<string>;
+export interface ShortcutKbdProps extends Omit<HTMLAttributes<HTMLElement>, "className"> {
+  children: ReactNode;
+  /** Draws the key pushed down and lit, such as while it is held. */
+  pressed?: boolean;
+  /** `warning` tints the cap, for a combination that is taken. */
+  tone?: "warning";
+  size?: "sm" | "md";
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/** One key cap. Use it inline in copy, or through `ShortcutKeys` for a whole combination. */
+export declare const ShortcutKbd: import("react").ForwardRefExoticComponent<ShortcutKbdProps & import("react").RefAttributes<HTMLElement>>;
+export interface ShortcutKeysProps {
+  /** A shortcut such as `"mod+shift+k"`. `mod` is Command on a Mac and Control elsewhere. */
+  shortcut: string;
+  /** Defaults to the viewer's platform. */
+  platform?: Platform;
+  /** Held key ids from `usePressedKeys`: the matching caps light up. */
+  pressed?: ReadonlySet<string>;
+  size?: "sm" | "md";
+  /** Extra classes. Merged last. */
+  className?: string;
+}
+/** A shortcut as key caps, with one spoken label ("Command Shift K") for assistive technology. */
+export declare function ShortcutKeys({ shortcut, platform: platformProp, pressed, size, className }: ShortcutKeysProps): import("react").JSX.Element;
+export interface ShortcutBinding {
+  shortcut: string;
+  /** What the shortcut does, shown when a recording collides with it. */
+  label: string;
+}
+export interface ShortcutRecorderProps {
+  /** What the shortcut is for, and the field's accessible name. */
+  label: string;
+  /** Hides the label visually; it stays the accessible name. */
+  hideLabel?: boolean;
+  /** The shortcut, such as `"mod+shift+k"`, or `null` for none. Controlled when given. */
+  value?: string | null;
+  defaultValue?: string | null;
+  /** `replaced` is the binding a shortcut was taken from after "Use anyway", so the caller can unbind it. */
+  onValueChange?: (value: string | null, details: {
+    replaced?: ShortcutBinding;
+  }) => void;
+  /** What the reset button restores. Defaults to `defaultValue`. */
+  resetValue?: string | null;
+  /** Shortcuts already in use. Recording one of them asks before taking it. */
+  bindings?: ShortcutBinding[];
+  /** Also warn about combinations a browser or system keeps, such as Command W and Command C. @default true */
+  warnReserved?: boolean;
+  /** Require Command, Control or Option (function keys are always allowed), so a bare letter cannot be recorded. @default true */
+  requireModifier?: boolean;
+  /** Defaults to the viewer's platform. */
+  platform?: Platform;
+  /** Shown while there is no shortcut. @default "Record shortcut" */
+  placeholder?: string;
+  /** Helper text under the field. */
+  description?: string;
+  disabled?: boolean;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+/**
+ * A field that records a keyboard shortcut. Press it (or focus it and press Enter or
+ * Space), then press the combination: held modifiers show as caps while you build the
+ * chord, the finished shortcut settles into place and is announced, and a combination
+ * that is already taken asks before it is used.
+ *
+ * Keyboard: Escape cancels, Backspace or Delete clears, and Tab leaves the field
+ * (it is never swallowed, so recording cannot trap focus). Escape and Tab can still be
+ * recorded with a modifier held. Outside recording, Backspace or Delete clears the
+ * shortcut, and the reset button restores the default. Caps follow the platform:
+ * Command symbols on a Mac, Ctrl and Alt elsewhere.
+ *
+ * While recording, the chord belongs to the recorder: its keys are kept from the page's
+ * own shortcuts. Nothing animates on first render.
+ *
+ * @example
+ * <ShortcutRecorder label="Open command menu" defaultValue="mod+k" onValueChange={save} />
+ */
+export declare function ShortcutRecorder({ label, hideLabel, value, defaultValue, onValueChange, resetValue, bindings, warnReserved, requireModifier, platform: platformProp, placeholder, description, disabled, id, className }: ShortcutRecorderProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=shortcut-recorder.d.ts.map