overflow-toolbar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Wes Jones
+
+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,258 @@
+# Overflow
+
+[![npm version](https://img.shields.io/npm/v/overflow-toolbar)](https://www.npmjs.com/package/overflow-toolbar)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/overflow-toolbar)](https://bundlephobia.com/package/overflow-toolbar)
+[![license](https://img.shields.io/npm/l/overflow-toolbar)](./LICENSE)
+[![CI](https://github.com/wesjones/overflow/actions/workflows/ci.yml/badge.svg)](https://github.com/wesjones/overflow/actions/workflows/ci.yml)
+
+A responsive toolbar overflow component that automatically collapses items into a dropdown menu as the container shrinks. Items transition through three states: **visible** → **min** (icon-only) → **hidden** (moved to menu).
+
+<a href="https://wesjones.github.io/overflow/" target="_blank"><strong>Live Demo</strong></a>
+
+## Features
+
+- **Automatic overflow detection** — items collapse into a menu as the container narrows using ResizeObserver
+- **Three item states** — visible, min (icon-only), and hidden (in menu)
+- **Compact mode** — items collapse one at a time instead of all at once
+- **Reverse mode** — collapse from the left instead of the right
+- **Menu-only items** — items that always live in the dropdown (e.g. Help, About)
+- **Min state** — items shrink to icon-only before being fully hidden
+- **Three implementations** — React/Radix UI, Material UI, and vanilla JavaScript
+- **Tree-shakeable** — import only the variant you need via subpath exports
+- **TypeScript** — full type declarations included
+
+## Install
+
+```bash
+npm install overflow-toolbar
+```
+
+## Quick Start
+
+### Radix UI (React)
+
+```tsx
+import { RxOverflow, RxOverflowItem, RxOverflowMenu } from 'overflow-toolbar/rx';
+import 'overflow-toolbar/rx/styles';
+import 'overflow-toolbar/styles';
+
+<RxOverflow style={{ gap: 8 }}>
+  <RxOverflowMenu opener={<button>More</button>}>
+    <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
+    <RxOverflowItem menuid="filter"><button>Filters</button></RxOverflowItem>
+  </RxOverflowMenu>
+
+  <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
+  <RxOverflowItem menuid="filter"><button>Filters</button></RxOverflowItem>
+</RxOverflow>
+```
+
+### Material UI (React)
+
+```tsx
+import { MuiOverflow, MuiOverflowItem, MuiOverflowMenu } from 'overflow-toolbar/mui';
+import 'overflow-toolbar/styles';
+import { Button, MenuItem } from '@mui/material';
+
+<MuiOverflow sx={{ gap: 1 }}>
+  <MuiOverflowMenu opener={<Button>More</Button>}>
+    <MuiOverflowItem menuid="format"><MenuItem>Format</MenuItem></MuiOverflowItem>
+    <MuiOverflowItem menuid="filter"><MenuItem>Filters</MenuItem></MuiOverflowItem>
+  </MuiOverflowMenu>
+
+  <MuiOverflowItem menuid="format"><Button>Format</Button></MuiOverflowItem>
+  <MuiOverflowItem menuid="filter"><Button>Filters</Button></MuiOverflowItem>
+</MuiOverflow>
+```
+
+### Vanilla JavaScript
+
+```js
+import { OverflowToolbar } from 'overflow-toolbar/vanilla';
+import 'overflow-toolbar/vanilla/styles';
+import 'overflow-toolbar/styles';
+
+const ul = document.querySelector('#my-toolbar');
+const toolbar = new OverflowToolbar(ul);
+
+// Later: toolbar.update() after DOM changes
+// Cleanup: toolbar.destroy()
+```
+
+```html
+<ul id="my-toolbar">
+  <li data-overflow-role="menu">
+    <button data-menu-trigger>More</button>
+    <div data-menu-panel>
+      <button data-menuid="format">Format</button>
+      <button data-menuid="filter">Filters</button>
+    </div>
+  </li>
+  <li data-overflow-role="item" data-menuid="format">
+    <button>Format</button>
+  </li>
+  <li data-overflow-role="item" data-menuid="filter">
+    <button>Filters</button>
+  </li>
+</ul>
+```
+
+## Subpath Imports
+
+Import only what you need for optimal tree-shaking:
+
+| Import path | Contents |
+|---|---|
+| `overflow-toolbar` | Everything (all variants) |
+| `overflow-toolbar/core` | Core React components (`Overflow`, `OverflowItem`, `OverflowMenu`, `OverflowController`) |
+| `overflow-toolbar/rx` | Radix UI variant (`RxOverflow`, `RxOverflowItem`, `RxOverflowMenu`) |
+| `overflow-toolbar/mui` | Material UI variant (`MuiOverflow`, `MuiOverflowItem`, `MuiOverflowMenu`) |
+| `overflow-toolbar/vanilla` | Vanilla JS (`OverflowToolbar`) |
+| `overflow-toolbar/styles` | Core CSS (required by all variants) |
+| `overflow-toolbar/rx/styles` | Radix UI styles |
+| `overflow-toolbar/vanilla/styles` | Vanilla JS styles |
+
+## API
+
+### `Overflow` / `RxOverflow` / `MuiOverflow`
+
+The container component. Wraps toolbar items and the overflow menu.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Overflow items and menu |
+| `compact` | `boolean` | `false` | Collapse items one at a time |
+| `reverse` | `boolean` | `false` | Collapse from the left |
+| `className` | `string` | — | CSS class name |
+| `style` | `CSSProperties` | — | Inline styles |
+| `sx` | `SxProps` | — | MUI system props (MUI only) |
+
+### `OverflowItem` / `RxOverflowItem` / `MuiOverflowItem`
+
+Wraps each toolbar item. Place matching items in both the toolbar and the menu, linked by `menuid`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Item content |
+| `menuid` | `string` | — | Links toolbar item to its menu counterpart |
+| `minStateWidth` | `string` \| `number` | — | Width in min state (`string` for Rx, `number` for MUI spacing units) |
+
+### `OverflowMenu` / `RxOverflowMenu` / `MuiOverflowMenu`
+
+The dropdown menu container. Must include an `opener` element (the trigger button).
+
+| Prop | Type | Description |
+|---|---|---|
+| `children` | `ReactNode` | Menu items |
+| `opener` | `ReactNode` | The button that opens the menu |
+
+### `OverflowController`
+
+Framework-agnostic controller class for building custom implementations.
+
+| Method | Description |
+|---|---|
+| `connect()` | Start observing and apply initial state |
+| `disconnect()` | Stop observing and clear all applied styles/attributes |
+| `update()` | Re-scan children and restart (call after DOM changes) |
+
+## Modes
+
+### Compact Mode
+
+Items collapse one at a time with tight spacing. Adjacent buttons get squared-off corners for a grouped look:
+
+```tsx
+<RxOverflow compact>
+  {/* items... */}
+</RxOverflow>
+```
+
+### Reverse Mode
+
+Items collapse from the left side first instead of the right:
+
+```tsx
+<RxOverflow reverse>
+  {/* items... */}
+</RxOverflow>
+```
+
+### Min State
+
+Items shrink to a fixed width (icon-only) before being fully hidden:
+
+```tsx
+<RxOverflowItem menuid="format" minStateWidth="2.25rem">
+  <button><FormatIcon /> Format</button>
+</RxOverflowItem>
+```
+
+For MUI, `minStateWidth` accepts a number (theme spacing units):
+
+```tsx
+<MuiOverflowItem menuid="format" minStateWidth={5}>
+  <Button><FormatIcon /> Format</Button>
+</MuiOverflowItem>
+```
+
+### Menu-Only Items
+
+Items without a `menuid` always stay where they are — in the toolbar or in the menu:
+
+```tsx
+<RxOverflowMenu opener={<button>More</button>}>
+  <RxOverflowItem menuid="format"><button>Format</button></RxOverflowItem>
+  {/* Always in the menu */}
+  <RxOverflowItem><div role="separator" /></RxOverflowItem>
+  <RxOverflowItem><button>Help</button></RxOverflowItem>
+</RxOverflowMenu>
+```
+
+## Vanilla JS
+
+The vanilla implementation uses `data-` attributes for configuration:
+
+| Attribute | Element | Description |
+|---|---|---|
+| `data-overflow-role="item"` | `<li>` | Marks a toolbar item |
+| `data-overflow-role="menu"` | `<li>` | Marks the menu container |
+| `data-menuid` | `<li>`, menu item | Links toolbar and menu items |
+| `data-min-state-width` | `<li>` | Min-state width (CSS value) |
+| `data-menu-trigger` | `<button>` | The menu open/close button |
+| `data-menu-panel` | `<div>` | The menu panel (uses Popover API) |
+
+```js
+const toolbar = new OverflowToolbar(document.querySelector('ul'), {
+  compact: true,
+  reverse: false,
+});
+
+toolbar.update();   // after DOM changes
+toolbar.destroy();  // cleanup
+```
+
+## Browser Support
+
+Requires [ResizeObserver](https://caniuse.com/resizeobserver) (all modern browsers). The vanilla JS variant also uses the [Popover API](https://caniuse.com/mdn-api_htmlelement_popover) for the dropdown menu.
+
+## Contributing
+
+```bash
+git clone https://github.com/wesjones/overflow.git
+cd overflow
+pnpm install
+pnpm storybook     # dev with Storybook on port 6006
+pnpm test:unit     # run unit tests
+pnpm build:lib     # build the library
+pnpm typecheck     # check types
+pnpm lint           # lint
+```
+
+## Also Known As
+
+This component implements what is commonly known as a responsive toolbar, overflow menu, adaptive toolbar, collapsible toolbar, priority+ pattern, priority-plus navigation, toolbar button group overflow, responsive action bar, command bar, or "more menu." It handles responsive buttons, auto-collapse, icon-only collapse, and dynamic toolbar resizing using ResizeObserver.
+
+## License
+
+[MIT](./LICENSE)

package/dist/components/MuiOverflow/MuiOverflow.d.ts

@@ -0,0 +1,4 @@
+import type { OverflowProps } from '../Overflow';
+declare const MuiOverflow: React.ComponentType<OverflowProps>;
+export default MuiOverflow;
+//# sourceMappingURL=MuiOverflow.d.ts.map

package/dist/components/MuiOverflow/MuiOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAwB,CAAC;AAE7E,eAAe,WAAW,CAAC"}

package/dist/components/MuiOverflow/MuiOverflow.js

@@ -0,0 +1,7 @@
+import { styled as o } from "@mui/material/styles";
+import r from "../Overflow/Overflow.js";
+const f = o(r)({});
+export {
+  f as default
+};
+//# sourceMappingURL=MuiOverflow.js.map

package/dist/components/MuiOverflow/MuiOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflow.js","sources":["../../../src/components/MuiOverflow/MuiOverflow.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport type { OverflowProps } from '../Overflow';\nimport { Overflow } from '../Overflow';\n\nconst MuiOverflow: React.ComponentType<OverflowProps> = styled(Overflow)({});\n\nexport default MuiOverflow;\n"],"names":["MuiOverflow","styled","Overflow"],"mappings":";;AAIA,MAAMA,IAAkDC,EAAOC,CAAQ,EAAE,CAAA,CAAE;"}

package/dist/components/MuiOverflow/MuiOverflowItem.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+interface MuiOverflowItemProps {
+    children: ReactNode;
+    menuid?: string;
+    minStateWidth?: number;
+}
+declare function MuiOverflowItem({ children, menuid, minStateWidth }: MuiOverflowItemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof MuiOverflowItem & {
+    overflowRole: "item";
+};
+export default _default;
+//# sourceMappingURL=MuiOverflowItem.d.ts.map

package/dist/components/MuiOverflow/MuiOverflowItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflowItem.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,oBAAoB,2CASjF;;;;AAED,wBAAiF"}

package/dist/components/MuiOverflow/MuiOverflowItem.js

@@ -0,0 +1,12 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useTheme as s } from "@mui/material/styles";
+import f from "../Overflow/OverflowItem.js";
+function n({ children: o, menuid: t, minStateWidth: e }) {
+  const r = s(), i = e !== void 0 ? r.spacing(e) : void 0;
+  return /* @__PURE__ */ m(f, { menuid: t, minStateWidth: i, children: o });
+}
+const v = Object.assign(n, { overflowRole: "item" });
+export {
+  v as default
+};
+//# sourceMappingURL=MuiOverflowItem.js.map

package/dist/components/MuiOverflow/MuiOverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflowItem.js","sources":["../../../src/components/MuiOverflow/MuiOverflowItem.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles';\nimport type { ReactNode } from 'react';\nimport { OverflowItem } from '../Overflow';\n\ninterface MuiOverflowItemProps {\n  children: ReactNode;\n  menuid?: string;\n  minStateWidth?: number;\n}\n\nfunction MuiOverflowItem({ children, menuid, minStateWidth }: MuiOverflowItemProps) {\n  const theme = useTheme();\n  const cssWidth = minStateWidth !== undefined ? theme.spacing(minStateWidth) : undefined;\n\n  return (\n    <OverflowItem menuid={menuid} minStateWidth={cssWidth}>\n      {children}\n    </OverflowItem>\n  );\n}\n\nexport default Object.assign(MuiOverflowItem, { overflowRole: 'item' as const });\n"],"names":["MuiOverflowItem","children","menuid","minStateWidth","theme","useTheme","cssWidth","jsx","OverflowItem","MuiOverflowItem_default"],"mappings":";;;AAUA,SAASA,EAAgB,EAAE,UAAAC,GAAU,QAAAC,GAAQ,eAAAC,KAAuC;AAClF,QAAMC,IAAQC,EAAA,GACRC,IAAWH,MAAkB,SAAYC,EAAM,QAAQD,CAAa,IAAI;AAE9E,SACE,gBAAAI,EAACC,GAAA,EAAa,QAAAN,GAAgB,eAAeI,GAC1C,UAAAL,GACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOT,GAAiB,EAAE,cAAc,QAAiB;"}

package/dist/components/MuiOverflow/MuiOverflowMenu.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+interface MuiOverflowMenuProps {
+    opener: ReactNode;
+    children: ReactNode;
+}
+declare function MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof MuiOverflowMenu & {
+    overflowRole: "menu";
+};
+export default _default;
+//# sourceMappingURL=MuiOverflowMenu.d.ts.map

package/dist/components/MuiOverflow/MuiOverflowMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,oBAAoB;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAYlE;;;;AAED,wBAAiF"}

package/dist/components/MuiOverflow/MuiOverflowMenu.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import i from "@mui/material/Menu";
+import l from "../Overflow/OverflowMenu.js";
+function M({ opener: r, children: n }) {
+  return /* @__PURE__ */ e(l, { opener: r, renderMenu: ({ anchorEl: o, open: u, onClose: t, children: f }) => /* @__PURE__ */ e(i, { anchorEl: o, open: u, onClose: t, children: f }), children: n });
+}
+const a = Object.assign(M, { overflowRole: "menu" });
+export {
+  a as default
+};
+//# sourceMappingURL=MuiOverflowMenu.js.map

package/dist/components/MuiOverflow/MuiOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiOverflowMenu.js","sources":["../../../src/components/MuiOverflow/MuiOverflowMenu.tsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport type { ReactNode } from 'react';\nimport { OverflowMenu, type RenderMenuProps } from '../Overflow';\n\ninterface MuiOverflowMenuProps {\n  opener: ReactNode;\n  children: ReactNode;\n}\n\nfunction MuiOverflowMenu({ opener, children }: MuiOverflowMenuProps) {\n  const renderMenu = ({ anchorEl, open, onClose, children: menuChildren }: RenderMenuProps) => (\n    <Menu anchorEl={anchorEl} open={open} onClose={onClose}>\n      {menuChildren}\n    </Menu>\n  );\n\n  return (\n    <OverflowMenu opener={opener} renderMenu={renderMenu}>\n      {children}\n    </OverflowMenu>\n  );\n}\n\nexport default Object.assign(MuiOverflowMenu, { overflowRole: 'menu' as const });\n"],"names":["MuiOverflowMenu","opener","children","jsx","OverflowMenu","anchorEl","open","onClose","menuChildren","Menu","MuiOverflowMenu_default"],"mappings":";;;AASA,SAASA,EAAgB,EAAE,QAAAC,GAAQ,UAAAC,KAAkC;AAOnE,SACE,gBAAAC,EAACC,GAAA,EAAa,QAAAH,GAAgB,YAPb,CAAC,EAAE,UAAAI,GAAU,MAAAC,GAAM,SAAAC,GAAS,UAAUC,EAAA,MACvD,gBAAAL,EAACM,GAAA,EAAK,UAAAJ,GAAoB,MAAAC,GAAY,SAAAC,GACnC,UAAAC,GACH,GAKG,UAAAN,EAAA,CACH;AAEJ;AAEA,MAAAQ,IAAe,OAAO,OAAOV,GAAiB,EAAE,cAAc,QAAiB;"}

package/dist/components/MuiOverflow/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MuiOverflow } from './MuiOverflow';
+export { default as MuiOverflowItem } from './MuiOverflowItem';
+export { default as MuiOverflowMenu } from './MuiOverflowMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MuiOverflow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MuiOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.d.ts

@@ -0,0 +1,22 @@
+import { type OverflowHost, type ScanResult } from '../Overflow/OverflowController';
+export interface OverflowToolbarOptions {
+    compact?: boolean;
+    reverse?: boolean;
+}
+export declare class OverflowToolbar implements OverflowHost {
+    private ul;
+    private compact;
+    private reverse;
+    private controller;
+    constructor(ul: HTMLUListElement, opts?: OverflowToolbarOptions);
+    /** Re-scan after external DOM changes and restart the observer. */
+    update(): void;
+    /** Tear down ResizeObserver and clean up DOM state. */
+    destroy(): void;
+    getContainerEl(): HTMLElement;
+    isCompact(): boolean;
+    isReverse(): boolean;
+    scanChildren(): ScanResult;
+    private setupPopover;
+}
+//# sourceMappingURL=NoFrameworkOverflow.d.ts.map

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoFrameworkOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,UAAU,EAGhB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,eAAgB,YAAW,YAAY;IAClD,OAAO,CAAC,EAAE,CAAmB;IAC7B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,UAAU,CAAqB;gBAE3B,EAAE,EAAE,gBAAgB,EAAE,IAAI,GAAE,sBAA2B;IAanE,mEAAmE;IACnE,MAAM,IAAI,IAAI;IAId,uDAAuD;IACvD,OAAO,IAAI,IAAI;IAOf,cAAc,IAAI,WAAW;IAI7B,SAAS,IAAI,OAAO;IAIpB,SAAS,IAAI,OAAO;IAIpB,YAAY,IAAI,UAAU;IA8D1B,OAAO,CAAC,YAAY;CAcrB"}

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.js

@@ -0,0 +1,79 @@
+import { OverflowController as v } from "../Overflow/OverflowController.js";
+class y {
+  ul;
+  compact;
+  reverse;
+  controller;
+  constructor(o, e = {}) {
+    this.ul = o, this.compact = e.compact ?? !1, this.reverse = e.reverse ?? !1, this.ul.classList.add("overflow"), this.compact && this.ul.classList.add("overflow-compact"), this.reverse && this.ul.classList.add("overflow-reverse"), this.controller = new v(this), this.controller.connect();
+  }
+  /** Re-scan after external DOM changes and restart the observer. */
+  update() {
+    this.controller.update();
+  }
+  /** Tear down ResizeObserver and clean up DOM state. */
+  destroy() {
+    this.controller.disconnect(), this.ul.classList.remove("overflow", "overflow-compact", "overflow-reverse");
+  }
+  /* ── OverflowHost ─────────────────────────────────────── */
+  getContainerEl() {
+    return this.ul;
+  }
+  isCompact() {
+    return this.compact;
+  }
+  isReverse() {
+    return this.reverse;
+  }
+  scanChildren() {
+    const o = [];
+    let e = null, r = -1, s = -1, l = 0;
+    for (const t of Array.from(this.ul.children)) {
+      const n = t.dataset.overflowRole;
+      if (n) {
+        if (n === "item" && (s === -1 && (s = l), o.push({
+          el: t,
+          buttonEl: t.querySelector("button"),
+          menuid: t.dataset.menuid || void 0,
+          minStateWidth: t.dataset.minStateWidth || void 0
+        })), n === "menu") {
+          r = l;
+          const c = t.querySelector("[data-menu-trigger]"), i = t.querySelector("[data-menu-panel]");
+          if (c && i) {
+            t.classList.add("overflow-opener"), i.setAttribute("popover", ""), this.setupPopover(c, i);
+            const a = Array.from(i.children), d = /* @__PURE__ */ new Set();
+            let u = !1;
+            for (const h of a) {
+              const m = h.dataset.menuid;
+              m ? d.add(m) : u = !0;
+            }
+            e = {
+              el: t,
+              triggerEl: c,
+              menuItemEls: a,
+              inMenuIds: d,
+              hasMenuOnlyItems: u
+            };
+          }
+        }
+        l++;
+      }
+    }
+    const f = r !== -1 && (s === -1 || r < s);
+    return { items: o, menu: e, menuFirst: f };
+  }
+  setupPopover(o, e) {
+    o.addEventListener("click", () => {
+      if (e.matches(":popover-open"))
+        e.hidePopover();
+      else {
+        const r = o.getBoundingClientRect();
+        e.style.position = "fixed", e.style.top = `${r.bottom + 4}px`, e.style.left = `${r.left}px`, e.style.margin = "0", e.showPopover();
+      }
+    });
+  }
+}
+export {
+  y as OverflowToolbar
+};
+//# sourceMappingURL=NoFrameworkOverflow.js.map

package/dist/components/NoFrameworkOverflow/NoFrameworkOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoFrameworkOverflow.js","sources":["../../../src/components/NoFrameworkOverflow/NoFrameworkOverflow.ts"],"sourcesContent":["import {\n  OverflowController,\n  type OverflowHost,\n  type ScanResult,\n  type ScannedItem,\n  type ScannedMenu,\n} from '../Overflow/OverflowController';\n\nexport interface OverflowToolbarOptions {\n  compact?: boolean;\n  reverse?: boolean;\n}\n\nexport class OverflowToolbar implements OverflowHost {\n  private ul: HTMLUListElement;\n  private compact: boolean;\n  private reverse: boolean;\n  private controller: OverflowController;\n\n  constructor(ul: HTMLUListElement, opts: OverflowToolbarOptions = {}) {\n    this.ul = ul;\n    this.compact = opts.compact ?? false;\n    this.reverse = opts.reverse ?? false;\n\n    this.ul.classList.add('overflow');\n    if (this.compact) this.ul.classList.add('overflow-compact');\n    if (this.reverse) this.ul.classList.add('overflow-reverse');\n\n    this.controller = new OverflowController(this);\n    this.controller.connect();\n  }\n\n  /** Re-scan after external DOM changes and restart the observer. */\n  update(): void {\n    this.controller.update();\n  }\n\n  /** Tear down ResizeObserver and clean up DOM state. */\n  destroy(): void {\n    this.controller.disconnect();\n    this.ul.classList.remove('overflow', 'overflow-compact', 'overflow-reverse');\n  }\n\n  /* ── OverflowHost ─────────────────────────────────────── */\n\n  getContainerEl(): HTMLElement {\n    return this.ul;\n  }\n\n  isCompact(): boolean {\n    return this.compact;\n  }\n\n  isReverse(): boolean {\n    return this.reverse;\n  }\n\n  scanChildren(): ScanResult {\n    const items: ScannedItem[] = [];\n    let menu: ScannedMenu | null = null;\n    let menuIndex = -1;\n    let firstItemIndex = -1;\n    let index = 0;\n\n    for (const child of Array.from(this.ul.children) as HTMLElement[]) {\n      const role = child.dataset.overflowRole as 'item' | 'menu' | undefined;\n      if (!role) continue;\n\n      if (role === 'item') {\n        if (firstItemIndex === -1) firstItemIndex = index;\n        items.push({\n          el: child,\n          buttonEl: child.querySelector('button'),\n          menuid: child.dataset.menuid || undefined,\n          minStateWidth: child.dataset.minStateWidth || undefined,\n        });\n      }\n\n      if (role === 'menu') {\n        menuIndex = index;\n        const trigger = child.querySelector<HTMLElement>('[data-menu-trigger]');\n        const panel = child.querySelector<HTMLElement>('[data-menu-panel]');\n\n        if (trigger && panel) {\n          child.classList.add('overflow-opener');\n          panel.setAttribute('popover', '');\n          this.setupPopover(trigger, panel);\n\n          const menuItemEls = Array.from(panel.children) as HTMLElement[];\n          const inMenuIds = new Set<string>();\n          let hasMenuOnlyItems = false;\n          for (const mi of menuItemEls) {\n            const mid = mi.dataset.menuid;\n            if (mid) {\n              inMenuIds.add(mid);\n            } else {\n              hasMenuOnlyItems = true;\n            }\n          }\n\n          menu = {\n            el: child,\n            triggerEl: trigger,\n            menuItemEls,\n            inMenuIds,\n            hasMenuOnlyItems,\n          };\n        }\n      }\n\n      index++;\n    }\n\n    const menuFirst =\n      menuIndex !== -1 && (firstItemIndex === -1 || menuIndex < firstItemIndex);\n\n    return { items, menu, menuFirst };\n  }\n\n  private setupPopover(trigger: HTMLElement, panel: HTMLElement): void {\n    trigger.addEventListener('click', () => {\n      if (panel.matches(':popover-open')) {\n        panel.hidePopover();\n      } else {\n        const rect = trigger.getBoundingClientRect();\n        panel.style.position = 'fixed';\n        panel.style.top = `${rect.bottom + 4}px`;\n        panel.style.left = `${rect.left}px`;\n        panel.style.margin = '0';\n        panel.showPopover();\n      }\n    });\n  }\n}\n"],"names":["OverflowToolbar","ul","opts","OverflowController","items","menu","menuIndex","firstItemIndex","index","child","role","trigger","panel","menuItemEls","inMenuIds","hasMenuOnlyItems","mi","mid","menuFirst","rect"],"mappings":";AAaO,MAAMA,EAAwC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAYC,GAAsBC,IAA+B,IAAI;AACnE,SAAK,KAAKD,GACV,KAAK,UAAUC,EAAK,WAAW,IAC/B,KAAK,UAAUA,EAAK,WAAW,IAE/B,KAAK,GAAG,UAAU,IAAI,UAAU,GAC5B,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GACtD,KAAK,WAAS,KAAK,GAAG,UAAU,IAAI,kBAAkB,GAE1D,KAAK,aAAa,IAAIC,EAAmB,IAAI,GAC7C,KAAK,WAAW,QAAA;AAAA,EAClB;AAAA;AAAA,EAGA,SAAe;AACb,SAAK,WAAW,OAAA;AAAA,EAClB;AAAA;AAAA,EAGA,UAAgB;AACd,SAAK,WAAW,WAAA,GAChB,KAAK,GAAG,UAAU,OAAO,YAAY,oBAAoB,kBAAkB;AAAA,EAC7E;AAAA;AAAA,EAIA,iBAA8B;AAC5B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAA2B;AACzB,UAAMC,IAAuB,CAAA;AAC7B,QAAIC,IAA2B,MAC3BC,IAAY,IACZC,IAAiB,IACjBC,IAAQ;AAEZ,eAAWC,KAAS,MAAM,KAAK,KAAK,GAAG,QAAQ,GAAoB;AACjE,YAAMC,IAAOD,EAAM,QAAQ;AAC3B,UAAKC,GAYL;AAAA,YAVIA,MAAS,WACPH,MAAmB,OAAIA,IAAiBC,IAC5CJ,EAAM,KAAK;AAAA,UACT,IAAIK;AAAA,UACJ,UAAUA,EAAM,cAAc,QAAQ;AAAA,UACtC,QAAQA,EAAM,QAAQ,UAAU;AAAA,UAChC,eAAeA,EAAM,QAAQ,iBAAiB;AAAA,QAAA,CAC/C,IAGCC,MAAS,QAAQ;AACnB,UAAAJ,IAAYE;AACZ,gBAAMG,IAAUF,EAAM,cAA2B,qBAAqB,GAChEG,IAAQH,EAAM,cAA2B,mBAAmB;AAElE,cAAIE,KAAWC,GAAO;AACpB,YAAAH,EAAM,UAAU,IAAI,iBAAiB,GACrCG,EAAM,aAAa,WAAW,EAAE,GAChC,KAAK,aAAaD,GAASC,CAAK;AAEhC,kBAAMC,IAAc,MAAM,KAAKD,EAAM,QAAQ,GACvCE,wBAAgB,IAAA;AACtB,gBAAIC,IAAmB;AACvB,uBAAWC,KAAMH,GAAa;AAC5B,oBAAMI,IAAMD,EAAG,QAAQ;AACvB,cAAIC,IACFH,EAAU,IAAIG,CAAG,IAEjBF,IAAmB;AAAA,YAEvB;AAEA,YAAAV,IAAO;AAAA,cACL,IAAII;AAAA,cACJ,WAAWE;AAAA,cACX,aAAAE;AAAA,cACA,WAAAC;AAAA,cACA,kBAAAC;AAAA,YAAA;AAAA,UAEJ;AAAA,QACF;AAEA,QAAAP;AAAA;AAAA,IACF;AAEA,UAAMU,IACJZ,MAAc,OAAOC,MAAmB,MAAMD,IAAYC;AAE5D,WAAO,EAAE,OAAAH,GAAO,MAAAC,GAAM,WAAAa,EAAA;AAAA,EACxB;AAAA,EAEQ,aAAaP,GAAsBC,GAA0B;AACnE,IAAAD,EAAQ,iBAAiB,SAAS,MAAM;AACtC,UAAIC,EAAM,QAAQ,eAAe;AAC/B,QAAAA,EAAM,YAAA;AAAA,WACD;AACL,cAAMO,IAAOR,EAAQ,sBAAA;AACrB,QAAAC,EAAM,MAAM,WAAW,SACvBA,EAAM,MAAM,MAAM,GAAGO,EAAK,SAAS,CAAC,MACpCP,EAAM,MAAM,OAAO,GAAGO,EAAK,IAAI,MAC/BP,EAAM,MAAM,SAAS,KACrBA,EAAM,YAAA;AAAA,MACR;AAAA,IACF,CAAC;AAAA,EACH;AACF;"}

package/dist/components/NoFrameworkOverflow/index.d.ts

@@ -0,0 +1,3 @@
+export { OverflowToolbar } from './NoFrameworkOverflow';
+export type { OverflowToolbarOptions } from './NoFrameworkOverflow';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NoFrameworkOverflow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NoFrameworkOverflow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/NoFrameworkOverflow/noframework.css

@@ -0,0 +1,110 @@
+/* ── NoFramework Overflow Styles ──────────────────────────── */
+/* Self-contained: includes both layout and theme.             */
+/* Deep orange theme, distinct from Rx (purple) and MUI.       */
+
+/* ── Toolbar button ──────────────────────────────────────── */
+.nf-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: oklch(0.65 0.24 50);
+  color: white;
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+  height: 2.5rem;
+
+  &:hover {
+    background: oklch(0.60 0.24 50);
+  }
+
+  &:active {
+    background: oklch(0.55 0.24 50);
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(0.70 0.24 50 / 0.5);
+    outline-offset: 2px;
+  }
+}
+
+/* ── Popover panel ───────────────────────────────────────── */
+.nf-menu-panel {
+  z-index: 50;
+  min-width: 8rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid oklch(0.90 0.01 50);
+  background: white;
+  box-shadow:
+    0 4px 6px -1px oklch(0 0 0 / 0.1),
+    0 2px 4px -2px oklch(0 0 0 / 0.1);
+}
+
+/* Popover API animation */
+@keyframes nf-popover-in {
+  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+
+@keyframes nf-popover-out {
+  from { opacity: 1; transform: scale(1)    translateY(0); }
+  to   { opacity: 0; transform: scale(0.95) translateY(-4px); }
+}
+
+.nf-menu-panel:popover-open {
+  animation: nf-popover-in 0.15s ease-out;
+}
+
+/* ── Popover menu item ───────────────────────────────────── */
+.nf-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: oklch(0.30 0.02 50);
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  text-align: left;
+  cursor: default;
+  user-select: none;
+  transition: background 0.1s, color 0.1s;
+
+  &:hover {
+    background: oklch(0.95 0.01 50);
+    color: oklch(0.20 0.02 50);
+  }
+
+  &:active {
+    background: oklch(0.92 0.02 50);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: oklch(0.95 0.01 50);
+    color: oklch(0.20 0.02 50);
+  }
+}
+
+/* ── Menu separator ──────────────────────────────────────── */
+.nf-separator {
+  height: 1px;
+  margin: 0.25rem 0;
+  background: oklch(0.90 0.01 50);
+}
+
+.nf-btn svg {
+  min-width: 24px;
+  min-height: 24px;
+}

package/dist/components/Overflow/Overflow.css

@@ -0,0 +1 @@
+div:has(>.overflow){justify-content:space-between;gap:1px}div:has(>.overflow) .overflow>:not([data-state=hidden]):first-child,div:has(>.overflow) .overflow>[data-state=hidden]:first-child+:not([data-state=hidden]){margin-left:auto;margin-right:0}div:has(>.overflow) .overflow.overflow-reverse>:not([data-state=hidden]):first-child,div:has(>.overflow) .overflow.overflow-reverse>[data-state=hidden]:first-child+:not([data-state=hidden]){margin-left:0;margin-right:auto}.overflow{--u: 8px;--u1: calc(var(--u) * 1);--u2: calc(var(--u) * 2);--u3: calc(var(--u) * 3);--u4: calc(var(--u) * 4);--u5: calc(var(--u) * 5);--hiddenCount: 0;display:flex;gap:0;justify-content:flex-start;white-space:nowrap;max-width:100%;overflow:hidden;list-style:none;margin:0 0 0 auto;padding:0;flex:min(var(--hiddenCount, 0)) 1 auto}.overflow>*{flex:0 0 fit-content;list-style:none;padding:0;margin:0}.overflow>li.overflow-opener{margin-left:auto;max-width:var(--u5)}.overflow-compact{gap:1px!important}.overflow-compact:not(.overflow-reverse)>:not([data-state=hidden])~:not([data-state=hidden])>button{border-top-left-radius:0;border-bottom-left-radius:0}.overflow-compact:not(.overflow-reverse)>:not([data-state=hidden]):has(~:not([data-state=hidden]))>button{border-top-right-radius:0;border-bottom-right-radius:0}.overflow-reverse{margin-left:0;margin-right:auto;flex-direction:row-reverse}.overflow-reverse>li.overflow-opener{margin-left:0;margin-right:auto}.overflow-compact.overflow-reverse>:not([data-state=hidden])~:not([data-state=hidden])>button{border-top-right-radius:0;border-bottom-right-radius:0}.overflow-compact.overflow-reverse>:not([data-state=hidden]):has(~:not([data-state=hidden]))>button{border-top-left-radius:0;border-bottom-left-radius:0}:is(.overflow-item-min,.overflow-opener)>button{font-size:0;min-width:100%;width:100%;max-width:100%;align-items:center;justify-content:center;gap:0}

package/dist/components/Overflow/Overflow.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import './Overflow.css';
+export interface OverflowProps {
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    compact?: boolean;
+    reverse?: boolean;
+}
+declare const Overflow: import("react").ForwardRefExoticComponent<OverflowProps & import("react").RefAttributes<HTMLUListElement>>;
+export default Overflow;
+//# sourceMappingURL=Overflow.d.ts.map

package/dist/components/Overflow/Overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../../../src/components/Overflow/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAC/H,OAAO,gBAAgB,CAAC;AAKxB,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,QAAQ,4GAuEZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}