@igor-ganov/flying-menu 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 igor-ganov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,139 @@
+# flying-menu
+
+A **headless**, framework-agnostic [Lit](https://lit.dev) web component for a
+draggable, corner-snapping floating menu — the reusable extraction of the
+`useDraggableFab` + `MobileMenu` logic from `admin-website` / `public-website`.
+
+- 🧲 **Drag the trigger** to any screen corner; it snaps to the nearest one on release.
+- 📐 **Edge-aware menu** that anchors to the trigger's corner with correct offsets —
+  computed from measured geometry, so it's correct for **any** trigger/menu content size.
+- 🎛 **Two slots, zero chrome** — you bring the button and the menu; the component owns
+  only behaviour and positioning.
+- ♿ **Accessible** — ARIA wired onto your control, focus management, `Escape`,
+  outside-click, keyboard activation, `prefers-reduced-motion`.
+- 💾 **Persists** the chosen corner to `localStorage`.
+
+**▶ Live demo:** https://igor-ganov.github.io/flying-menu/
+
+## Install
+
+```sh
+bun add @igor-ganov/flying-menu lit
+```
+
+## Usage
+
+```html
+<flying-menu>
+  <button slot="trigger" aria-label="Open menu">☰</button>
+  <nav slot="menu" aria-label="Primary">
+    <a href="/home">Home</a>
+    <a href="/docs">Docs</a>
+  </nav>
+</flying-menu>
+
+<script type="module">
+  import '@igor-ganov/flying-menu'
+</script>
+```
+
+The component renders **no visual styling**. Style your slotted content normally and
+position/animate the wrappers through CSS parts:
+
+```css
+flying-menu::part(menu) {
+  background: Canvas;
+  border: 1px solid CanvasText;
+  border-radius: 12px;
+  padding: 0.5rem;
+  /* Tall menus: cap height and scroll instead of overflowing the viewport. */
+  max-height: 80vh;
+  overflow: auto;
+}
+```
+
+## API
+
+### Attributes / properties
+
+| Attribute        | Property        | Type   | Default              | Purpose                              |
+|------------------|-----------------|--------|----------------------|--------------------------------------|
+| `open`           | `open`          | bool   | `false`              | Menu visibility (reflected)          |
+| `corner`         | `corner`        | string | persisted / `bottom-right` | Resting corner (reflected)     |
+| `margin`         | `margin`        | number | `16`                 | Viewport edge inset (px)             |
+| `gap`            | `gap`           | number | `8`                  | Trigger↔menu gap (px)                |
+| `drag-threshold` | `dragThreshold` | number | `10`                 | Tap-vs-drag distance (px, Manhattan) |
+| `storage-key`    | `storageKey`    | string | `flying-menu-corner` | `localStorage` key                   |
+| `no-persist`     | `noPersist`     | bool   | `false`              | Disable persistence                  |
+
+`corner` is one of `top-left | top-right | bottom-left | bottom-right`.
+
+### Methods
+
+`openMenu()`, `closeMenu()`, `toggle()`.
+(Named `openMenu`/`closeMenu` because `open` is a reflected attribute.)
+
+### Events
+
+| Event                | `detail`              | Notes                       |
+|----------------------|-----------------------|-----------------------------|
+| `flying-menu-toggle` | `{ open: boolean }`   | Cancelable — `preventDefault()` blocks the change |
+| `flying-menu-corner` | `{ corner: Corner }`  | Fired after a snap          |
+
+### CSS parts, states & custom properties
+
+- `::part(trigger)` — the fixed-positioned trigger wrapper.
+- `::part(menu)` — the fixed-positioned menu wrapper.
+- `:state(open)` — host custom state, present while the menu is open. Use it to drive
+  fully custom open/close animation from your own stylesheet.
+- `--flying-menu-z-trigger` (default `1000`), `--flying-menu-z-menu` (default `999`),
+  `--flying-menu-transition` (default `200ms ease`).
+
+### Animation
+
+The component owns **positioning**, not appearance, and it **never transitions the
+menu's position** — the menu jumps to its corner anchor and only the entry/exit
+("pop-in") animates, so it never slides in from a previous corner.
+
+You control motion from the outside:
+
+```css
+/* Just retime the built-in pop-in. */
+flying-menu { --flying-menu-transition: 160ms cubic-bezier(0.2, 0, 0, 1); }
+
+/* Or replace it entirely via the part + host state. */
+flying-menu::part(menu) { transition: opacity .15s, scale .15s; opacity: 0; scale: .96; }
+flying-menu:state(open)::part(menu) { opacity: 1; scale: 1; }
+```
+
+The built-in entry uses `@starting-style` + `transition-behavior: allow-discrete`, and
+is disabled automatically under `prefers-reduced-motion: reduce`.
+
+## Accessibility notes
+
+- ARIA (`aria-haspopup`, `aria-controls`, `aria-expanded`) is placed on your slotted
+  control when it is itself focusable (e.g. a `<button>`); otherwise the wrapper is
+  promoted to `role="button"`. Always provide an accessible name on your trigger.
+- The menu content's role is **yours** to choose (`nav`, `menu`, `listbox`, …) — the
+  component only manages opening, focus entry, and dismissal.
+- While open, **Tab / Shift+Tab cycle through the menu's focusable items** (wrapping at
+  the ends) and `Escape` leaves the menu. This works consistently across browsers,
+  including WebKit, which otherwise drops focus out of slotted shadow content. Arrow-key
+  navigation (for a `role="menu"`) remains yours to add.
+
+## Architecture
+
+Functional-core / imperative-shell: all geometry and the drag state machine are pure,
+unit-tested functions in `src/core`; `src/flying-menu.ts` is a thin Lit shell that
+measures the DOM and applies the results. See `specs/flying-menu/` for the full spec
+(requirements → design → tasks) and `src/README.md` for module details.
+
+## Develop
+
+```sh
+bun install
+bun run dev          # demo at /  (?scenario=big for a large trigger + tall menu)
+bun run test         # unit tests (Vitest)
+bun run test:e2e     # E2E (Playwright, Chromium/Firefox/WebKit)
+bun run build        # library build + d.ts
+```

package/dist/flying-menu.d.ts

@@ -0,0 +1,94 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+
+/** One of the four screen corners the trigger can rest in. */
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** A point in viewport coordinates (CSS pixels). */
+interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+
+/**
+ * Immutable state of a pointer drag gesture. The trigger's live top-left while
+ * dragging is `current`; `moved` flips once the gesture passes the threshold and
+ * decides tap-vs-drag at release.
+ */
+interface DragState {
+    readonly dragging: boolean;
+    readonly moved: boolean;
+    readonly start: Point;
+    readonly origin: Point;
+    readonly current: Point;
+}
+
+/** Minimal storage abstraction so persistence is testable and failure-safe. */
+interface StoragePort {
+    get(key: string): string | undefined;
+    set(key: string, value: string): void;
+}
+
+/** Non-reactive internal state and stable listener references for the element. */
+interface Controller {
+    drag: DragState;
+    readonly internals: ElementInternals;
+    readonly storage: StoragePort;
+    cornerInitialized: boolean;
+    restoreFocusOnClose: boolean;
+    readonly onResize: () => void;
+    readonly onDocPointerDown: (e: Event) => void;
+    readonly onDocKeydown: (e: KeyboardEvent) => void;
+}
+
+/** Tag name of the custom element. */
+declare const TAG_NAME = "flying-menu";
+
+/**
+ * Headless, draggable, corner-snapping flying menu. Thin framework boundary: it
+ * holds reactive state and delegates all behaviour to `./element/*` functions.
+ *
+ * @fires flying-menu-toggle - `{ open: boolean }`, cancelable.
+ * @fires flying-menu-corner - `{ corner: Corner }`.
+ * @csspart trigger - The fixed-positioned trigger wrapper.
+ * @csspart menu - The fixed-positioned menu wrapper.
+ */
+declare class FlyingMenu extends LitElement {
+    static readonly styles: lit.CSSResultArray;
+    /** Whether the menu is open. */
+    open: boolean;
+    /** Resting corner of the trigger. */
+    corner: Corner;
+    /** Edge inset in pixels. */
+    margin: number;
+    /** Gap between trigger and menu in pixels. */
+    gap: number;
+    /** Tap-vs-drag threshold in pixels (Manhattan). */
+    dragThreshold: number;
+    /** `localStorage` key used to persist the corner. */
+    storageKey: string;
+    /** Disable persistence entirely. */
+    noPersist: boolean;
+    _dragging: boolean;
+    _triggerEl: HTMLElement;
+    _menuEl: HTMLElement;
+    readonly _ctl: Controller;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Open the menu. */
+    openMenu(): void;
+    /** Close the menu. */
+    closeMenu(): void;
+    /** Toggle the menu. */
+    toggle(): void;
+    protected render(): lit_html.TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TAG_NAME]: FlyingMenu;
+    }
+}
+
+export { FlyingMenu };

package/dist/flying-menu.js

@@ -0,0 +1,477 @@
+import { html as G, css as m, LitElement as Y } from "lit";
+import { property as g, state as B, query as A, customElement as W } from "lit/decorators.js";
+const H = 16, V = 8, X = 10, j = "flying-menu-corner", q = "bottom-right", y = { x: 0, y: 0 }, Z = {
+  dragging: !1,
+  moved: !1,
+  start: y,
+  origin: y,
+  current: y
+}, J = (e, t) => ({
+  dragging: !0,
+  moved: !1,
+  start: t.pointer,
+  origin: t.origin,
+  current: t.origin
+}), Q = (e, t) => {
+  const n = t.pointer.x - e.start.x, r = t.pointer.y - e.start.y, i = e.moved || Math.abs(n) + Math.abs(r) > t.threshold;
+  return { ...e, moved: i, current: { x: e.origin.x + n, y: e.origin.y + r } };
+}, ee = (e, t) => {
+  switch (e.dragging) {
+    case !0:
+      return Q(e, t);
+    case !1:
+      return e;
+  }
+}, te = (e) => ({ ...e, dragging: !1 }), ne = (e) => !e.moved, C = (e) => ({ _tag: "Some", value: e }), R = { _tag: "None" }, O = (e) => (t) => [t].filter(e).reduce((n, r) => C(r), R), re = {
+  "top-left": !0,
+  "top-right": !0,
+  "bottom-left": !0,
+  "bottom-right": !0
+}, oe = (e) => e !== void 0 && e in re, ie = (e) => O(oe)(e), S = (e) => {
+  try {
+    return C(e());
+  } catch {
+    return R;
+  }
+}, se = (e) => (t) => {
+  switch (t._tag) {
+    case "Some":
+      return e(t.value);
+    case "None":
+      return t;
+  }
+}, D = (e) => (t) => {
+  switch (t._tag) {
+    case "Some":
+      return t.value;
+    case "None":
+      return e();
+  }
+};
+function M(e, ...t) {
+  return t.reduce((n, r) => r(n), e);
+}
+const ae = (e, t) => M(
+  S(() => e.get(t)),
+  se(ie),
+  D(() => q)
+), ce = (e, t, n) => {
+  S(() => {
+    e.set(t, n);
+  });
+}, le = (e) => e != null, ge = (e) => O(le)(e), de = (e) => D(() => {
+})(e), ue = () => ({
+  get: (e) => {
+    var t;
+    return M(ge((t = globalThis.localStorage) == null ? void 0 : t.getItem(e)), de);
+  },
+  set: (e, t) => {
+    var n;
+    (n = globalThis.localStorage) == null || n.setItem(e, t);
+  }
+}), o = (e, t) => {
+  switch (e) {
+    case !0:
+      t();
+      break;
+  }
+}, l = (e, t) => (n) => {
+  switch (n) {
+    case !0:
+      return e;
+    case !1:
+      return t;
+  }
+}, P = (e, t, n, r) => ({
+  x: l(r.width - t.width - n, n)(e.endsWith("right")),
+  y: l(r.height - t.height - n, n)(e.startsWith("bottom"))
+}), w = (e, t, n) => l(t, Math.min(Math.max(e, t), n))(n < t), pe = (e) => {
+  const { corner: t, triggerRect: n, menuSize: r, gap: i, margin: c, vp: u } = e, K = l(
+    n.x + n.width - r.width,
+    n.x
+  )(t.endsWith("right")), k = l(
+    n.y - i - r.height,
+    n.y + n.height + i
+  )(t.startsWith("bottom"));
+  return {
+    x: w(K, c, u.width - r.width - c),
+    y: w(k, c, u.height - r.height - c)
+  };
+}, b = () => {
+  var t;
+  const e = (t = globalThis.document) == null ? void 0 : t.documentElement;
+  return {
+    width: (e == null ? void 0 : e.clientWidth) || globalThis.innerWidth,
+    height: (e == null ? void 0 : e.clientHeight) || globalThis.innerHeight
+  };
+}, _ = (e) => ({
+  width: e.width,
+  height: e.height
+}), d = (e, t) => {
+  const n = e._triggerEl;
+  o(n != null, () => {
+    const r = t ?? P(e.corner, _(n.getBoundingClientRect()), e.margin, b());
+    n.style.left = `${r.x}px`, n.style.top = `${r.y}px`;
+  });
+}, me = (e, t) => {
+  const n = _(e._triggerEl.getBoundingClientRect()), r = P(e.corner, n, e.margin, t);
+  return { x: r.x, y: r.y, width: n.width, height: n.height };
+}, h = (e) => {
+  const t = e._menuEl;
+  o(t != null && e._triggerEl != null, () => {
+    const n = b(), r = pe({
+      corner: e.corner,
+      triggerRect: me(e, n),
+      menuSize: _(t.getBoundingClientRect()),
+      gap: e.gap,
+      margin: e.margin,
+      vp: n
+    });
+    t.style.left = `${r.x}px`, t.style.top = `${r.y}px`;
+  });
+}, ye = (e) => {
+  d(e), o(e.open, () => h(e));
+}, fe = (e, t) => {
+  o(!t.composedPath().includes(e), () => e.closeMenu());
+}, be = (e, t) => {
+  o(t.key === "Escape", () => {
+    e._ctl.restoreFocusOnClose = !0, e.closeMenu();
+  });
+}, _e = (e) => {
+  globalThis.addEventListener("pointerdown", e._ctl.onDocPointerDown, !0), globalThis.addEventListener("keydown", e._ctl.onDocKeydown);
+}, L = (e) => {
+  globalThis.removeEventListener("pointerdown", e._ctl.onDocPointerDown, !0), globalThis.removeEventListener("keydown", e._ctl.onDocKeydown);
+}, he = (e) => ({
+  drag: Z,
+  internals: e.attachInternals(),
+  storage: ue(),
+  cornerInitialized: !1,
+  restoreFocusOnClose: !1,
+  onResize: () => ye(e),
+  onDocPointerDown: (t) => fe(e, t),
+  onDocKeydown: (t) => be(e, t)
+}), I = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]"
+].join(","), Ee = (e) => e === null || Number(e) >= 0, N = (e) => !e.hasAttribute("disabled") && Ee(e.getAttribute("tabindex")), $ = (e) => e.matches(I) && N(e), ve = (e) => [e].filter(
+  (t) => t instanceof HTMLElement && $(t)
+), we = (e) => [...e.querySelectorAll(I)].filter(N), z = (e) => e.flatMap((t) => [...ve(t), ...we(t)]), xe = (e) => z(e)[0], p = (e, t, n) => {
+  switch (e) {
+    case !0:
+      t();
+      break;
+    case !1:
+      n();
+      break;
+  }
+}, E = (e, t) => {
+  const n = e.renderRoot.querySelector(
+    `slot[name="${t}"]`
+  );
+  return (n == null ? void 0 : n.assignedElements({ flatten: !0 })) ?? [];
+}, F = (e) => {
+  const [t] = E(e, "trigger");
+  return [t].filter((n) => n instanceof HTMLElement)[0];
+}, Te = "trigger", Ae = "menu", U = "flying-menu-popup", Ce = "flying-menu-toggle", Re = "flying-menu-corner", Oe = "flying-menu", x = (e, t) => {
+  t == null || t.setAttribute("aria-haspopup", "menu"), t == null || t.setAttribute("aria-controls", U), t == null || t.setAttribute("aria-expanded", String(e.open));
+}, T = (e) => {
+  for (const t of ["aria-haspopup", "aria-controls", "aria-expanded", "role"])
+    e == null || e.removeAttribute(t);
+}, Se = (e) => {
+  e.setAttribute("role", "button"), o(!e.hasAttribute("tabindex"), () => e.setAttribute("tabindex", "0"));
+}, v = (e) => {
+  const t = F(e);
+  p(
+    t !== void 0 && $(t),
+    () => {
+      T(e._triggerEl), x(e, t);
+    },
+    () => {
+      Se(e._triggerEl), T(t), x(e, e._triggerEl);
+    }
+  );
+}, De = (e) => {
+  var t;
+  (t = F(e) ?? e._triggerEl) == null || t.focus();
+}, Me = (e) => {
+  const t = e._menuEl;
+  o(t != null, () => {
+    const n = xe(E(e, "menu")) ?? t;
+    o(n === t && !t.hasAttribute("tabindex"), () => {
+      t.tabIndex = -1;
+    }), n.focus();
+  });
+}, f = (e, t) => {
+  o(t !== e.open, () => {
+    const n = e.dispatchEvent(
+      new CustomEvent(Ce, {
+        detail: { open: t },
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      })
+    );
+    o(n, () => {
+      e.open = t;
+    });
+  });
+}, Pe = (e) => {
+  L(e), o(e._ctl.restoreFocusOnClose, () => {
+    e._ctl.restoreFocusOnClose = !1, De(e);
+  });
+}, Le = (e) => {
+  v(e), p(
+    e.open,
+    () => e._ctl.internals.states.add("open"),
+    () => e._ctl.internals.states.delete("open")
+  ), p(
+    e.open,
+    () => {
+      h(e), _e(e), Me(e);
+    },
+    () => Pe(e)
+  );
+}, Ie = (e) => {
+  o(e.open, () => h(e)), e.dispatchEvent(
+    new CustomEvent(Re, {
+      detail: { corner: e.corner },
+      bubbles: !0,
+      composed: !0
+    })
+  ), o(!e.noPersist, () => ce(e._ctl.storage, e.storageKey, e.corner));
+}, Ne = (e) => {
+  o(!e._ctl.cornerInitialized && !e.noPersist, () => {
+    e.corner = ae(e._ctl.storage, e.storageKey);
+  }), e._ctl.cornerInitialized = !0, globalThis.addEventListener("resize", e._ctl.onResize);
+}, $e = (e) => {
+  globalThis.removeEventListener("resize", e._ctl.onResize), L(e);
+}, ze = (e) => {
+  d(e), v(e);
+}, Fe = (e, t) => {
+  o(t.has("corner") || t.has("margin"), () => {
+    d(e), o(t.has("corner"), () => Ie(e));
+  }), o(t.has("open"), () => Le(e));
+}, Ue = (e, t) => e.findIndex((n) => n === t), Ke = (e, t, n) => (e + t + n) % n, ke = (e) => l(-1, 1)(e), Ge = {
+  Enter: !0,
+  " ": !0,
+  Spacebar: !0
+}, Ye = (e) => e in Ge, Be = () => {
+  var t, n;
+  let e = ((t = globalThis.document) == null ? void 0 : t.activeElement) ?? void 0;
+  for (; (n = e == null ? void 0 : e.shadowRoot) != null && n.activeElement; ) e = e.shadowRoot.activeElement;
+  return e ?? void 0;
+}, We = (e, t) => {
+  const n = z(E(e, "menu"));
+  o(n.length > 0, () => {
+    var i;
+    t.preventDefault();
+    const r = Ue(n, Be());
+    (i = n[Ke(r, ke(t.shiftKey), n.length)]) == null || i.focus();
+  });
+}, He = (e, t) => {
+  o(Ye(t.key), () => {
+    t.preventDefault(), e.toggle();
+  });
+}, Ve = (e, t) => {
+  o(t.key === "Tab", () => We(e, t));
+}, Xe = l("bottom", "top"), je = l("right", "left"), qe = (e, t) => `${Xe(e.y > t.height / 2)}-${je(e.x > t.width / 2)}`, Ze = (e, t) => {
+  p(
+    t === e.corner,
+    () => d(e),
+    // same corner: re-anchor immediately
+    () => {
+      e.corner = t;
+    }
+  );
+}, Je = (e, t) => {
+  const n = te(e._ctl.drag);
+  e._ctl.drag = n, e._dragging = !1, o(
+    e._triggerEl.hasPointerCapture(t.pointerId),
+    () => e._triggerEl.releasePointerCapture(t.pointerId)
+  ), p(
+    ne(n),
+    () => {
+      d(e), e.toggle();
+    },
+    () => Ze(e, qe({ x: t.clientX, y: t.clientY }, b()))
+  );
+}, Qe = (e, t) => {
+  o(t.button === 0, () => {
+    const n = e._triggerEl.getBoundingClientRect();
+    e._ctl.drag = J(e._ctl.drag, {
+      pointer: { x: t.clientX, y: t.clientY },
+      origin: { x: n.x, y: n.y }
+    }), e._dragging = !0, e._triggerEl.setPointerCapture(t.pointerId);
+  });
+}, et = (e, t) => {
+  o(e._ctl.drag.dragging, () => {
+    e._ctl.drag = ee(e._ctl.drag, {
+      pointer: { x: t.clientX, y: t.clientY },
+      threshold: e.dragThreshold
+    }), d(e, e._ctl.drag.current);
+  });
+}, tt = (e, t) => {
+  o(e._ctl.drag.dragging, () => Je(e, t));
+}, nt = (e) => {
+  d(e), v(e);
+}, rt = (e) => G`
+  <div
+    part=${Te}
+    ?data-dragging=${e._dragging}
+    @pointerdown=${(t) => Qe(e, t)}
+    @pointermove=${(t) => et(e, t)}
+    @pointerup=${(t) => tt(e, t)}
+    @keydown=${(t) => He(e, t)}
+  >
+    <slot name="trigger" @slotchange=${() => nt(e)}></slot>
+  </div>
+  <div
+    id=${U}
+    part=${Ae}
+    ?data-open=${e.open}
+    @keydown=${(t) => Ve(e, t)}
+  >
+    <slot name="menu"></slot>
+  </div>
+`, ot = m`
+  :host {
+    position: static;
+    display: contents;
+  }
+`, it = m`
+  [part='menu'] {
+    position: fixed;
+    width: max-content;
+    height: max-content;
+    z-index: var(--flying-menu-z-menu, 999);
+    display: none;
+    opacity: 0;
+    transform: translateY(8px);
+    pointer-events: none;
+    transition: opacity var(--flying-menu-transition, 200ms ease),
+      transform var(--flying-menu-transition, 200ms ease),
+      overlay var(--flying-menu-transition, 200ms ease) allow-discrete,
+      display var(--flying-menu-transition, 200ms ease) allow-discrete;
+  }
+
+  [part='menu'][data-open] {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  @starting-style {
+    [part='menu'][data-open] {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+`, st = m`
+  @media (prefers-reduced-motion: reduce) {
+    [part='trigger'],
+    [part='menu'] {
+      transition: none;
+    }
+  }
+`, at = m`
+  [part='trigger'] {
+    position: fixed;
+    width: max-content;
+    height: max-content;
+    z-index: var(--flying-menu-z-trigger, 1000);
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+    transition: left var(--flying-menu-transition, 200ms ease),
+      top var(--flying-menu-transition, 200ms ease);
+  }
+
+  [part='trigger'][data-dragging] {
+    transition: none;
+    cursor: grabbing;
+  }
+`, ct = [
+  ot,
+  at,
+  it,
+  st
+];
+var lt = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, a = (e, t, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? gt(t, n) : t, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (i = (r ? u(t, n, i) : u(i)) || i);
+  return r && i && lt(t, n, i), i;
+};
+let s = class extends Y {
+  constructor() {
+    super(...arguments), this.open = !1, this.corner = "bottom-right", this.margin = H, this.gap = V, this.dragThreshold = X, this.storageKey = j, this.noPersist = !1, this._dragging = !1, this._ctl = he(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), Ne(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), $e(this);
+  }
+  /** Open the menu. */
+  openMenu() {
+    f(this, !0);
+  }
+  /** Close the menu. */
+  closeMenu() {
+    f(this, !1);
+  }
+  /** Toggle the menu. */
+  toggle() {
+    f(this, !this.open);
+  }
+  render() {
+    return rt(this);
+  }
+  firstUpdated() {
+    ze(this);
+  }
+  updated(e) {
+    Fe(this, e);
+  }
+};
+s.styles = ct;
+a([
+  g({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+a([
+  g({ type: String, reflect: !0 })
+], s.prototype, "corner", 2);
+a([
+  g({ type: Number })
+], s.prototype, "margin", 2);
+a([
+  g({ type: Number })
+], s.prototype, "gap", 2);
+a([
+  g({ type: Number, attribute: "drag-threshold" })
+], s.prototype, "dragThreshold", 2);
+a([
+  g({ type: String, attribute: "storage-key" })
+], s.prototype, "storageKey", 2);
+a([
+  g({ type: Boolean, attribute: "no-persist" })
+], s.prototype, "noPersist", 2);
+a([
+  B()
+], s.prototype, "_dragging", 2);
+a([
+  A('[part="trigger"]')
+], s.prototype, "_triggerEl", 2);
+a([
+  A('[part="menu"]')
+], s.prototype, "_menuEl", 2);
+s = a([
+  W(Oe)
+], s);
+export {
+  s as FlyingMenu
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@igor-ganov/flying-menu",
+  "version": "0.1.0",
+  "description": "Headless, draggable corner-snapping flying menu as a Lit web component",
+  "type": "module",
+  "license": "MIT",
+  "author": "igor-ganov",
+  "homepage": "https://igor-ganov.github.io/flying-menu/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/igor-ganov/flying-menu.git"
+  },
+  "bugs": {
+    "url": "https://github.com/igor-ganov/flying-menu/issues"
+  },
+  "keywords": [
+    "lit",
+    "web-component",
+    "custom-element",
+    "menu",
+    "headless",
+    "draggable",
+    "fab",
+    "accessible",
+    "a11y"
+  ],
+  "main": "./dist/flying-menu.js",
+  "module": "./dist/flying-menu.js",
+  "types": "./dist/flying-menu.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/flying-menu.d.ts",
+      "import": "./dist/flying-menu.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": ["dist"],
+  "sideEffects": ["./dist/flying-menu.js"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:example": "vite --config vite.example.config.ts",
+    "build": "vite build && tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js && bun run clean:types",
+    "clean:types": "node -e \"require('node:fs').rmSync('.types',{recursive:true,force:true})\"",
+    "build:example": "vite build --config vite.example.config.ts",
+    "preview:example": "vite preview --config vite.example.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "prepublishOnly": "bun run typecheck && bun run lint && bun run test && bun run build"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.10.1",
+    "@playwright/test": "^1.49.1",
+    "eslint": "^10.4.1",
+    "eslint-plugin-functional": "^10.0.0",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "happy-dom": "^16.5.3",
+    "lit": "^3.2.1",
+    "rollup": "^4.61.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.60.1",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8"
+  }
+}