@panphora/bevel 0.1.0

package/dist/react/internal/format.js

@@ -0,0 +1,14 @@
+const BYTE_UNITS = ["KB", "MB", "GB"];
+function formatBytes(value) {
+  if (value < 1024) return `${value} B`;
+  let amount = value, unit = "B";
+  for (const next of BYTE_UNITS) {
+    if (amount < 1024) break;
+    amount /= 1024;
+    unit = next;
+  }
+  return `${amount < 10 ? amount.toFixed(1) : Math.round(amount)} ${unit}`;
+}
+export {
+  formatBytes
+};

package/dist/react/internal/link.d.ts

@@ -0,0 +1,2 @@
+import { useRender } from '@base-ui/react/use-render';
+export declare function Link({ render, ref, ...props }: useRender.ComponentProps<'a'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/react/internal/link.js

@@ -0,0 +1,8 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+function Link({ render, ref, ...props }) {
+  return useRender({ defaultTagName: "a", render, ref, props });
+}
+export {
+  Link
+};

package/dist/react/internal/part.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps, type ElementType, type JSX } from 'react';
+import { type StateClassName } from './classes.js';
+export declare function styled<Component extends ElementType>(Component: Component, className: string, portal?: boolean): Component;
+export declare function nativePart<Tag extends keyof JSX.IntrinsicElements>(tag: Tag, className: string): {
+    (props: ComponentProps<Tag>): import("react").ReactElement<ComponentProps<Tag> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: StateClassName<unknown>;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare function nativeVariants<Tag extends keyof JSX.IntrinsicElements, Variant extends string>(tag: Tag, className: string, variants: readonly Variant[]): ({ variant, size, className: extra, ...props }: Omit<ComponentProps<Tag>, 'size'> & {
+    variant?: Variant;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<ComponentProps<Tag>, "size"> & {
+    variant?: Variant;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;

package/dist/react/internal/part.js

@@ -0,0 +1,47 @@
+"use client";
+import { createElement } from "react";
+import { useBevel } from "../provider.js";
+import { classes } from "./classes.js";
+function styled(Component, className, portal = false) {
+  function BevelPart(props) {
+    const theme = useBevel();
+    const attributes = portal ? {
+      "data-bevel-scope": "",
+      "data-bevel-mode": theme.mode,
+      style: typeof props.style === "function" ? (state) => ({ ...theme.tokens, ...props.style(state) }) : { ...theme.tokens, ...props.style }
+    } : {};
+    return createElement(Component, {
+      ...props,
+      ...attributes,
+      "data-bevel-appearance": theme.appearance,
+      className: classes(className, props.className)
+    });
+  }
+  BevelPart.displayName = `Bevel(${className})`;
+  return BevelPart;
+}
+function nativePart(tag, className) {
+  function NativePart(props) {
+    const theme = useBevel();
+    return createElement(tag, {
+      ...props,
+      "data-bevel-appearance": theme.appearance,
+      className: classes(className, props.className)
+    });
+  }
+  NativePart.displayName = `Bevel(${className})`;
+  return NativePart;
+}
+function nativeVariants(tag, className, variants) {
+  function NativeVariants({ variant, size, className: extra, ...props }) {
+    const theme = useBevel();
+    const names = [className, variant && variants.includes(variant) ? `${className}--${variant}` : "", size === "small" ? `${className}--small` : "", extra].filter(Boolean).join(" ");
+    return createElement(tag, { ...props, "data-bevel-appearance": theme.appearance, className: names });
+  }
+  return NativeVariants;
+}
+export {
+  nativePart,
+  nativeVariants,
+  styled
+};

package/dist/react/internal/pointer-session.d.ts

@@ -0,0 +1,8 @@
+import { type DependencyList, type PointerEvent as ReactPointerEvent } from 'react';
+export declare function usePointerSession(dependencies?: DependencyList): {
+    cancel: () => void | undefined;
+    begin(event: ReactPointerEvent<HTMLElement>, handlers: {
+        move: (event: PointerEvent) => void;
+        end: (committed: boolean) => void;
+    }): void;
+};

package/dist/react/internal/pointer-session.js

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect, useRef } from "react";
+function usePointerSession(dependencies = []) {
+  const cancel = useRef(null);
+  useEffect(() => () => cancel.current?.(), dependencies);
+  return {
+    cancel: () => cancel.current?.(),
+    begin(event, handlers) {
+      if (event.button !== 0) return;
+      cancel.current?.();
+      event.preventDefault();
+      const target = event.currentTarget, document = target.ownerDocument, pointerId = event.pointerId;
+      let active = true;
+      const move = (event2) => {
+        if (event2.pointerId !== pointerId) return;
+        try {
+          handlers.move(event2);
+        } catch (error) {
+          stop(false);
+          throw error;
+        }
+      };
+      const up = (event2) => {
+        if (event2.pointerId === pointerId) stop(true);
+      };
+      const lost = () => stop(false);
+      const cancelled = (event2) => {
+        if (event2.pointerId === pointerId) stop(false);
+      };
+      const key = (event2) => {
+        if (event2.key === "Escape") {
+          event2.preventDefault();
+          stop(false);
+        }
+      };
+      const stop = (committed) => {
+        if (!active) return;
+        active = false;
+        document.removeEventListener("pointermove", move);
+        document.removeEventListener("pointerup", up);
+        document.removeEventListener("pointercancel", cancelled);
+        document.removeEventListener("keydown", key, true);
+        target.removeEventListener("lostpointercapture", lost);
+        cancel.current = null;
+        if (target.hasPointerCapture?.(pointerId)) target.releasePointerCapture(pointerId);
+        handlers.end(committed && target.isConnected);
+      };
+      cancel.current = () => stop(false);
+      document.addEventListener("pointermove", move);
+      document.addEventListener("pointerup", up);
+      document.addEventListener("pointercancel", cancelled);
+      document.addEventListener("keydown", key, true);
+      target.addEventListener("lostpointercapture", lost);
+      target.setPointerCapture?.(pointerId);
+    }
+  };
+}
+export {
+  usePointerSession
+};

package/dist/react/internal/refs.d.ts

@@ -0,0 +1,2 @@
+import { type Ref, type RefCallback } from 'react';
+export declare function useMergedRefs<Element>(...refs: Array<Ref<Element> | undefined>): RefCallback<Element>;

package/dist/react/internal/refs.js

@@ -0,0 +1,22 @@
+"use client";
+import { useMemo } from "react";
+function useMergedRefs(...refs) {
+  return useMemo(() => (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const cleanup = ref(node);
+        return typeof cleanup === "function" ? cleanup : () => ref(null);
+      }
+      if (ref) {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+    });
+    return () => cleanups.forEach((cleanup) => cleanup?.());
+  }, refs);
+}
+export {
+  useMergedRefs
+};

package/dist/react/internal/rich-text.d.ts

@@ -0,0 +1,28 @@
+export interface RichTextCommand {
+    id: string;
+    label: string;
+    active: boolean;
+    disabled: boolean;
+    toggle: boolean;
+    options?: readonly RichTextCommand[];
+}
+export interface RichTextSnapshot {
+    commands: readonly RichTextCommand[];
+    canUndo: boolean;
+    canRedo: boolean;
+    selection: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    } | null;
+}
+export interface RichTextController {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => RichTextSnapshot;
+    run: (id: string) => void;
+    saveSelection: () => void;
+    focus: () => void;
+    getHTML: () => string;
+}
+export declare const emptyRichTextSnapshot: RichTextSnapshot;

package/dist/react/internal/rich-text.js

@@ -0,0 +1,4 @@
+const emptyRichTextSnapshot = { commands: [], canUndo: false, canRedo: false, selection: null };
+export {
+  emptyRichTextSnapshot
+};

package/dist/react/internal/table-context.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode, type RefObject } from 'react';
+import type { ChangeDetails } from './controllable-state.js';
+import type { ColumnDef, TableOptions, TableState, deriveTable } from '../models/table.js';
+export interface TableColumn<Row> extends ColumnDef<Row> {
+    cell?: (row: Row) => ReactNode;
+    editable?: boolean;
+    validate?: (value: unknown, row: Row) => string | undefined;
+}
+export interface CellCommit {
+    rowId: string;
+    columnId: string;
+    previous: unknown;
+    value: unknown;
+}
+export interface CellAddress {
+    rowId: string;
+    columnId: string;
+}
+export interface DataTableOptions<Row> extends Omit<TableOptions<Row>, 'state' | 'columns'> {
+    columns: readonly TableColumn<Row>[];
+    state?: TableState;
+    defaultState?: Partial<TableState>;
+    onStateChange?: (state: TableState, details: ChangeDetails) => void;
+    onCellCommit?: (change: CellCommit) => void;
+}
+export interface DataTableInstance<Row> {
+    options: DataTableOptions<Row>;
+    state: TableState;
+    result: ReturnType<typeof deriveTable<Row>>;
+    update: (patch: Partial<TableState>, details: ChangeDetails) => void;
+    activeCell: CellAddress | null;
+    setActiveCell: (cell: CellAddress | null) => void;
+    columnPreview: Record<string, number>;
+    setColumnPreview: (preview: Record<string, number>) => void;
+    rootRef: RefObject<HTMLDivElement | null>;
+    focusCell: (cell: CellAddress, direction?: number) => void;
+}
+export declare const TableContext: import("react").Context<DataTableInstance<unknown> | null>;
+export declare function useTable<Row = unknown>(): DataTableInstance<Row>;

package/dist/react/internal/table-context.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const TableContext = createContext(null);
+function useTable() {
+  const table = useContext(TableContext);
+  if (!table) throw new Error("Table parts require DataGrid.Root or DataTable.Root.");
+  return table;
+}
+export {
+  TableContext,
+  useTable
+};

package/dist/react/internal/use-object-url.d.ts

@@ -0,0 +1 @@
+export declare function useObjectURL(file?: Blob | null): string | undefined;

package/dist/react/internal/use-object-url.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect, useState } from "react";
+function useObjectURL(file) {
+  const [preview, setPreview] = useState(null);
+  useEffect(() => {
+    if (!file) return;
+    const url = URL.createObjectURL(file);
+    setPreview({ file, url });
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  return preview && preview.file === file ? preview.url : void 0;
+}
+export {
+  useObjectURL
+};

package/dist/react/layout.css

@@ -0,0 +1,274 @@
+@layer bevel-layout, bevel-theme;
+
+@layer bevel-layout {
+  [data-bevel-scope] { color-scheme: light dark; font: 1rem/1.5 system-ui, sans-serif; color: CanvasText; }
+  [data-bevel-mode="light"] { color-scheme: light; }
+  [data-bevel-mode="dark"] { color-scheme: dark; }
+  [data-bevel-scope][data-bevel-appearance="plain"] { font-family: system-ui, sans-serif; color: CanvasText; background: Canvas; }
+  [data-bevel-appearance], [data-bevel-appearance]::before, [data-bevel-appearance]::after { box-sizing: border-box; }
+  [data-bevel-appearance]:where(button, input, select, textarea) { font: inherit; color: inherit; }
+  [data-bevel-appearance]:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
+  [data-bevel-appearance][data-disabled], [data-bevel-appearance]:disabled { opacity: .5; cursor: not-allowed; }
+  [data-bevel-appearance][data-invalid], [data-bevel-appearance][aria-invalid="true"] { outline: 2px solid Mark; outline-offset: 2px; }
+  [data-bevel-appearance][hidden] { display: none !important; }
+  [data-bevel-appearance][data-closed]:where(.bevel-r-modal, .bevel-r-drawer, .bevel-r-popover, .bevel-r-menu, .bevel-r-tooltip) { display: none; }
+  .bevel-r-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .4rem .8rem; border: 1px solid ButtonBorder; background: ButtonFace; border-radius: .2rem; text-decoration: none; cursor: pointer; }
+  .bevel-r-button__label { display: inline-block; }
+  .bevel-r-button--small { font-size: .875rem; padding: .2rem .6rem; }
+  .bevel-r-button--primary { font-weight: 650; }
+  .bevel-r-buttons, .bevel-r-igroup { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+  .bevel-r-input, .bevel-r-textarea, .bevel-r-select, .bevel-r-date { width: 100%; min-width: 0; padding: .4rem .6rem; background: Field; color: FieldText; border: 1px solid ButtonBorder; border-radius: .2rem; }
+  .bevel-r-field { display: flex; flex-direction: column; gap: .4rem; }
+  .bevel-r-field__hint, .bevel-r-field-error { font-size: .875rem; }
+  .bevel-r-field-error { font-weight: 650; }
+  .bevel-r-form { display: grid; gap: 1rem; }
+  .bevel-r-form > .bevel-r-button { justify-self: start; align-self: start; }
+  .bevel-r-page { background: Canvas; color: CanvasText; }
+  .bevel-r-app-shell { display: flex; }
+  .bevel-r-app-content { flex: 1; min-width: 0; }
+  .bevel-r-icon-button { padding: .4rem; }
+  .bevel-r-icon-button--flat { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
+  .bevel-r-app-shell:has(> .bevel-r-app-shell__bar) { flex-direction: column; }
+  .bevel-r-app-shell__bar { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; padding: .5rem 1rem; }
+  .bevel-r-app-shell__brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
+  .bevel-r-app-shell__mark, .bevel-r-app-shell__switcher-icon, .bevel-r-app-shell__caret { display: inline-grid; flex-shrink: 0; place-items: center; }
+  .bevel-r-app-shell__rule { flex-shrink: 0; inline-size: 1px; block-size: 1.5rem; background: ButtonBorder; }
+  .bevel-r-app-shell__switcher { display: inline-flex; align-items: center; gap: .5rem; min-inline-size: 0; padding: .25rem .5rem; border: 0; background: transparent; cursor: pointer; }
+  .bevel-r-app-shell__switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bevel-r-app-shell__tabs { flex-shrink: 0; }
+  .bevel-r-app-shell__spacer { flex: 1; }
+  .bevel-r-app-shell__nav-toggle { display: none; }
+  .bevel-r-app-shell__body { display: flex; flex: 1; min-block-size: 0; }
+  .bevel-r-app-shell__side { display: flex; flex: 0 0 16rem; flex-direction: column; min-inline-size: 0; }
+  .bevel-r-app-shell__side-head { display: flex; align-items: center; gap: .5rem; padding: .5rem; }
+  .bevel-r-app-shell__side-toggle { flex-shrink: 0; margin-inline-start: auto; }
+  .bevel-r-app-shell__main { flex: 1; min-inline-size: 0; }
+  .bevel-r-app-shell__content { max-inline-size: 1600px; margin-inline: auto; padding: 1.5rem 2rem; }
+  @media (min-width: 641px) {
+    .bevel-r-app-shell__side[data-bevel-react-collapsed] { flex-basis: 3rem; }
+    .bevel-r-app-shell__side[data-bevel-react-collapsed] > *, .bevel-r-app-shell__side[data-bevel-react-collapsed] .bevel-r-app-shell__side-head > * { display: none; }
+    .bevel-r-app-shell__side[data-bevel-react-collapsed] > .bevel-r-app-shell__side-head { display: flex; }
+    .bevel-r-app-shell__side[data-bevel-react-collapsed] .bevel-r-app-shell__side-head > .bevel-r-app-shell__side-toggle { display: inline-grid; }
+  }
+  .bevel-r-scroll { overflow: auto; }
+  .bevel-r-measure { max-width: 70ch; }
+  .bevel-r-scroll-area { position: relative; overflow: hidden; }
+  .bevel-r-scroll-area__viewport { width: 100%; height: 100%; overscroll-behavior: contain; }
+  .bevel-r-scroll-area__scrollbar { display: flex; padding: 2px; width: 10px; }
+  .bevel-r-scroll-area__scrollbar[data-orientation="horizontal"] { width: auto; height: 10px; }
+  .bevel-r-scroll-area__thumb { border-radius: 8px; background: GrayText; }
+  .bevel-r-checkbox__box, .bevel-r-radio__dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; border: 1px solid ButtonBorder; background: Field; vertical-align: middle; cursor: pointer; }
+  .bevel-r-checkbox__indicator { width: .4rem; height: .7rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(42deg); }
+  .bevel-r-checkbox__indicator[data-indeterminate] { width: .6rem; height: 0; border-width: 0 0 2px; transform: none; }
+  .bevel-r-checkbox__indicator[data-unchecked] { display: none; }
+  .bevel-r-choices { display: flex; flex-wrap: wrap; gap: 1rem; }
+  .bevel-r-portal { position: relative; z-index: 100; }
+  .bevel-r-modal__backdrop, .bevel-r-drawer__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .3); }
+  .bevel-r-modal__viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; padding: 1rem; }
+  .bevel-r-modal { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: auto; background: Canvas; color: CanvasText; border: 1px solid ButtonBorder; border-radius: .3rem; padding: 1.5rem; overflow-wrap: break-word; }
+  .bevel-r-modal__viewport .bevel-r-modal { position: relative; inset: auto; transform: none; }
+  .bevel-r-modal__header, .bevel-r-modal__body, .bevel-r-modal__footer { padding: .75rem; }
+  .bevel-r-modal__header { flex-shrink: 0; }
+  .bevel-r-modal__body { min-height: 0; overflow: auto; }
+  .bevel-r-modal__footer { display: flex; justify-content: flex-end; gap: .5rem; flex-shrink: 0; }
+  .bevel-r-modal__heading { margin: 0; font-size: 1.5rem; }
+  .bevel-r-overlay__close { position: absolute; inset: 0 0 auto auto; inline-size: 2.75rem; block-size: 2.75rem; padding: .5rem; border: 0; background: transparent; color: CanvasText; }
+  .bevel-r-overlay__close svg { display: block; inline-size: 100%; block-size: 100%; }
+  .bevel-r-modal:has(.bevel-r-overlay__close) .bevel-r-modal__heading:first-child { padding-inline-end: 2.5rem; }
+  .bevel-r-drawer:has(.bevel-r-overlay__close) .bevel-r-drawer__heading:first-child { padding-inline-end: 3rem; }
+  .bevel-r-positioner { z-index: 110; max-width: var(--available-width); }
+  .bevel-r-popover, .bevel-r-menu, .bevel-r-select__popup, .bevel-r-combobox__listbox, .bevel-r-tooltip { max-width: min(30rem, calc(100vw - 1rem)); max-height: var(--available-height, calc(100dvh - 2rem)); overflow: auto; padding: .5rem; background: Canvas; color: CanvasText; border: 1px solid ButtonBorder; border-radius: .2rem; }
+  .bevel-r-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+  .bevel-r-radio__ring { position: relative; display: inline-flex; width: 1.25rem; height: 1.25rem; border: 1px solid ButtonBorder; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; }
+  .bevel-r-radio__indicator { width: .5rem; height: .5rem; background: currentColor; border-radius: 50%; }
+  .bevel-r-radio__indicator[data-unchecked] { display: none; }
+  .bevel-r-toggle__track { position: relative; display: inline-flex; width: 2.75rem; height: 1.5rem; border: 1px solid ButtonBorder; background: Field; cursor: pointer; }
+  .bevel-r-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; background: ButtonText; }
+  .bevel-r-toggle__thumb[data-checked] { translate: 1.25rem 0; }
+  .bevel-r-number { display: flex; align-items: stretch; }
+  .bevel-r-number__input { min-width: 0; flex: 1; padding: .4rem; border: 1px solid ButtonBorder; background: Field; }
+  .bevel-r-number__steps { display: flex; flex-direction: column; }
+  .bevel-r-number__step { min-width: 1.75rem; cursor: pointer; }
+  .bevel-r-select__field, .bevel-r-date__field { padding: .4rem .6rem; font: inherit; border: 1px solid ButtonBorder; background: Field; color: FieldText; }
+  .bevel-r-select__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; }
+  .bevel-r-slider { position: relative; display: flex; align-items: center; height: 2rem; width: 100%; touch-action: none; user-select: none; }
+  .bevel-r-slider__track { width: 100%; height: .5rem; background: ButtonFace; border: 1px solid ButtonBorder; }
+  .bevel-r-slider__fill { background: Highlight; }
+  .bevel-r-slider__nub { width: 1.25rem; height: 1.25rem; background: ButtonFace; border: 2px solid ButtonBorder; cursor: grab; }
+  .bevel-r-slider-root[data-orientation="vertical"] { height: 10rem; }
+  .bevel-r-slider[data-orientation="vertical"] { height: 100%; width: 2rem; justify-content: center; }
+  .bevel-r-slider__track[data-orientation="vertical"] { width: .5rem; height: 100%; }
+  .bevel-r-progress { width: 100%; height: .5rem; overflow: hidden; background: ButtonFace; }
+  .bevel-r-progress__indicator { height: 100%; background: Highlight; }
+  .bevel-r-progress__indicator[data-indeterminate] { width: 35%; animation: bevel-r-progress 1.5s infinite alternate; }
+  @keyframes bevel-r-progress { to { translate: 180% 0; } }
+  .bevel-r-tabs, .bevel-r-seg, .bevel-r-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
+  .bevel-r-tabs__tab { padding: .4rem .75rem; border: 1px solid ButtonBorder; background: ButtonFace; cursor: pointer; }
+  .bevel-r-tabs__tab[data-active], .bevel-r-button[data-pressed], .bevel-r-seg--links > .bevel-r-button[aria-current="page"] { background: Highlight; color: HighlightText; }
+  .bevel-r-details__trigger { width: 100%; text-align: start; cursor: pointer; padding: .6rem; background: ButtonFace; color: ButtonText; border: 1px solid ButtonBorder; }
+  .bevel-r-details__header { margin: 0; }
+  .bevel-r-details__body { padding: .75rem; }
+  .bevel-r-tabpanel { padding: 1rem 0; }
+  .bevel-r-menu__item, .bevel-r-select__item, .bevel-r-combobox__option { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; cursor: default; text-decoration: none; color: inherit; }
+  .bevel-r-menu__item[data-highlighted], .bevel-r-select__item[data-highlighted], .bevel-r-combobox__option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .bevel-r-menu__separator, .bevel-r-select__separator, .bevel-r-toolbar__separator { border-bottom: 1px solid ButtonBorder; margin: .25rem; }
+  .bevel-r-menu__indicator, .bevel-r-select__indicator, .bevel-r-combobox__indicator { display: inline-block; width: .4rem; height: .7rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(42deg); margin-right: .25rem; }
+  .bevel-r-menu__indicator[data-unchecked], .bevel-r-select__indicator[data-unselected], .bevel-r-combobox__indicator[data-unselected] { display: none; }
+  .bevel-r-combobox__control { display: flex; align-items: center; }
+  .bevel-r-combobox__list, .bevel-r-select__list { margin: 0; padding: 0; }
+  .bevel-r-multiselect__tags { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
+  .bevel-r-multiselect__tag { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .4rem; border: 1px solid ButtonBorder; }
+  .bevel-r-drawer__viewport { position: fixed; inset: 0; display: flex; align-items: flex-end; }
+  .bevel-r-drawer { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 1rem); background: Canvas; color: CanvasText; border: 1px solid ButtonBorder; overflow: auto; }
+  .bevel-r-drawer { translate: 0 var(--drawer-snap-point-offset, 0px); transform: translate(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px)); }
+  .bevel-r-drawer[data-swipe-direction="right"] { margin-left: auto; width: min(30rem, 100vw); height: 100%; max-height: 100dvh; }
+  .bevel-r-drawer[data-swipe-direction="left"] { margin-right: auto; width: min(30rem, 100vw); height: 100%; max-height: 100dvh; }
+  .bevel-r-drawer__viewport:has([data-swipe-direction="up"]) { align-items: flex-start; }
+  .bevel-r-drawer__body { padding: 1rem; overflow: auto; min-height: 0; }
+  .bevel-r-drawer__header, .bevel-r-drawer__footer { padding: 1rem; }
+  .bevel-r-toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .75rem; width: min(24rem, calc(100vw - 2rem)); z-index: 200; }
+  .bevel-r-toast { display: flex; align-items: center; gap: .5rem; background: Canvas; color: CanvasText; border: 1px solid ButtonBorder; padding: .75rem; }
+  .bevel-r-toast[data-limited] { display: none; }
+  .bevel-r-toast__body { flex: 1; }
+  .bevel-r-toast__title { font-weight: 650; }
+  .bevel-r-toast__icon { display: inline-flex; }
+  .bevel-r-bulk-bar { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; background: Canvas; color: CanvasText; border: 1px solid ButtonBorder; }
+  .bevel-r-bulk-bar--floating { position: fixed; bottom: 1.5rem; left: 50%; translate: -50% 0; max-width: calc(100vw - 2rem); z-index: 50; }
+  .bevel-r-bulk-bar__action, .bevel-r-bulk-bar__clear { display: inline-flex; align-items: center; gap: .4rem; }
+  .bevel-r-bulk-bar__rule { align-self: stretch; width: 1px; background: ButtonBorder; }
+  .bevel-r-table { width: 100%; border-collapse: collapse; }
+  .bevel-r-table :where(th, td) { padding: .5rem; border-bottom: 1px solid ButtonBorder; text-align: start; }
+  .bevel-r-settings__row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .75rem 0; }
+  .bevel-r-settings__control { flex-shrink: 0; }
+  .bevel-r-card, .bevel-r-empty, .bevel-r-callout, .bevel-r-verdict { padding: 1rem; border: 1px solid ButtonBorder; }
+  .bevel-r-note { display: flex; align-items: start; gap: .5rem; }
+  .bevel-r-note__tag, .bevel-r-badge, .bevel-r-pill { display: inline-block; padding: .1rem .4rem; border: 1px solid ButtonBorder; font-size: .875rem; }
+  .bevel-r-skel { display: grid; gap: .5rem; }
+  .bevel-r-skel__line { display: block; height: 1rem; background: ButtonFace; }
+  .bevel-r-steps { display: flex; flex-wrap: wrap; gap: 1rem; }
+  .bevel-r-step[aria-current="step"] { font-weight: 700; }
+  .bevel-r-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
+  .bevel-r-stats__value { margin: 0; font-size: 2rem; }
+  .bevel-r-tags, .bevel-r-tags__list, .bevel-r-chip__actions, .bevel-r-inline-edit__actions, .bevel-r-upload__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
+  .bevel-r-tags__chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid ButtonBorder; }
+  .bevel-r-sortable { display: flex; flex-direction: column; gap: .5rem; }
+  .bevel-r-sortable[data-orientation="horizontal"] { flex-direction: row; }
+  .bevel-r-sortable__row, .bevel-r-columns__item { display: flex; align-items: center; gap: .75rem; }
+  .bevel-r-sortable__grip, .bevel-r-grid__resize, .bevel-r-split__divider { touch-action: none; }
+  .bevel-r-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
+  .bevel-r-choice-card { width: auto; height: auto; min-height: 4rem; display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid ButtonBorder; border-radius: 0; }
+  .bevel-r-choice-card[data-checked] { outline: 2px solid Highlight; }
+  .bevel-r-choice-card__mark { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border: 1px solid ButtonBorder; flex-shrink: 0; }
+  .bevel-r-choice-card__mark[data-kind="radio"] { border-radius: 50%; }
+  .bevel-r-chip__panel, .bevel-r-chip__preview { padding: .75rem; border: 1px solid ButtonBorder; }
+  .bevel-r-chip__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
+  .bevel-r-chip__trigger[data-panel-open] { display: none; }
+  .bevel-r-grid__scroll, .bevel-r-code__pre { overflow: auto; }
+  .bevel-r-grid__table { width: 100%; border-collapse: separate; border-spacing: 0; }
+  .bevel-r-grid__table :where(th, td) { padding: .5rem; text-align: start; border-bottom: 1px solid ButtonBorder; background: Canvas; }
+  .bevel-r-grid__table :where(th, td)[data-bevel-react-pinned] { z-index: 1; }
+  .bevel-r-grid__table thead th { position: sticky; top: 0; z-index: 2; }
+  .bevel-r-grid__table tfoot td { position: sticky; bottom: 0; z-index: 2; }
+  .bevel-r-grid__table thead th[data-bevel-react-pinned] { z-index: 3; }
+  .bevel-r-grid__table tfoot td[data-bevel-react-pinned] { z-index: 3; }
+  .bevel-r-grid__resize { position: absolute; inset: 0 0 0 auto; width: 8px; border: 0; padding: 0; background: transparent; cursor: col-resize; }
+  .bevel-r-grid__resize:focus-visible { outline: 2px solid Highlight; }
+  .bevel-r-grid__cell-editor { display: flex; align-items: center; }
+  .bevel-r-grid__cell-input { min-width: 0; width: 100%; }
+  .bevel-r-grid__cell-value { width: 100%; text-align: inherit; color: inherit; background: transparent; border: 0; padding: .25rem; cursor: text; }
+  .bevel-r-grid__cell-error { color: MarkText; background: Mark; }
+  .bevel-r-pagination, .bevel-r-pagination__pages, .bevel-r-grid__bar, .bevel-r-grid__tools, .bevel-r-grid__foot, .bevel-r-filter__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
+  .bevel-r-files__scroll { position: relative; overflow-x: auto; }
+  .bevel-r-files__table { width: 100%; border-collapse: collapse; }
+  .bevel-r-files__table :where(th, td) { padding: .5rem; text-align: start; vertical-align: middle; border-bottom: 1px solid ButtonBorder; }
+  .bevel-r-files__sort, .bevel-r-files__title, .bevel-r-files__tool { padding: 0; font: inherit; color: inherit; text-align: start; background: transparent; border: 0; cursor: pointer; }
+  .bevel-r-files__anchor, .bevel-r-files__tools, .bevel-r-files__sort { display: inline-flex; align-items: center; gap: .5rem; }
+  .bevel-r-files__label { display: flex; flex-direction: column; min-width: 0; }
+  .bevel-r-files__detail { font-size: .875rem; }
+  .bevel-r-files__arrow { display: none; }
+  .bevel-r-files__table th:is([aria-sort="ascending"], [aria-sort="descending"]) .bevel-r-files__arrow { display: inline-flex; }
+  .bevel-r-files__table th[aria-sort="descending"] .bevel-r-files__arrow { rotate: 180deg; }
+  .bevel-r-files__pill, .bevel-r-files__avatar { display: inline-block; margin-inline-end: .25rem; padding: .1rem .4rem; border: 1px solid ButtonBorder; font-size: .875rem; }
+  .bevel-r-files__lines { display: grid; gap: .25rem; }
+  .bevel-r-files__bar { display: block; max-width: 100%; height: .5rem; background: ButtonFace; }
+  .bevel-r-files__blank { display: grid; justify-items: center; gap: .5rem; text-align: center; }
+  .bevel-r-files__foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .5rem; }
+  .bevel-r-files__spacer { flex: 1; }
+  .bevel-r-filter__rules { display: grid; gap: .5rem; }
+  .bevel-r-filter__rule { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; gap: .5rem; }
+  .bevel-r-filter__rule [role="alert"] { grid-column: 1 / -1; }
+  .bevel-r-upload__row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid ButtonBorder; }
+  .bevel-r-upload__copy { flex: 1; }
+  .bevel-r-upload__copy > * { display: block; }
+  .bevel-r-image__frame { position: relative; width: 120px; height: 120px; overflow: hidden; }
+  .bevel-r-image__preview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
+  .bevel-r-image__thumb img, .bevel-r-image__frame img { max-width: 100%; object-fit: contain; }
+  .bevel-r-split { display: grid; grid-template-columns: minmax(0, var(--bevel-split-size)) 10px minmax(0, 1fr); min-height: 300px; }
+  .bevel-r-split__pane { min-width: 0; min-height: 0; overflow: auto; padding: 1rem; }
+  .bevel-r-split__divider { background: ButtonFace; border: 1px solid ButtonBorder; cursor: col-resize; }
+  .bevel-r-split[data-bevel-react-orientation="vertical"] { height: 420px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--bevel-split-size)) 10px minmax(0, 1fr); }
+  .bevel-r-split[data-bevel-react-orientation="vertical"] > .bevel-r-split__divider { cursor: row-resize; }
+  .bevel-r-sidebar { width: 13rem; display: flex; flex-direction: column; gap: .5rem; }
+  .bevel-r-sidebar__link { display: flex; align-items: center; gap: .5rem; padding: .5rem; }
+  .bevel-r-sidebar[data-bevel-react-collapsed] { width: 4rem; }
+  .bevel-r-sidebar[data-bevel-react-collapsed] :is(.bevel-r-sidebar__label, .bevel-r-sidebar__section, .bevel-r-sidebar__count, .bevel-r-sidebar__identity-copy) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .bevel-r-breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
+  .bevel-r-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
+  .bevel-r-breadcrumbs__overflow { display: none; }
+  .bevel-r-breadcrumbs__overflow-links { display: flex; flex-direction: column; }
+  .bevel-r-tree__item { display: flex; width: 100%; gap: .5rem; padding: .5rem; text-align: start; border: 0; background: transparent; color: inherit; }
+  .bevel-r-tree__item[aria-selected="true"] { background: Highlight; color: HighlightText; }
+  .bevel-r-wizard { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; }
+  .bevel-r-wizard__steps { display: flex; flex-direction: column; gap: .5rem; }
+  .bevel-r-wizard__step { padding: .5rem; text-align: start; }
+  .bevel-r-wizard__step-note { display: block; font-size: .8rem; }
+  .bevel-r-wizard__marker { margin-right: .5rem; }
+  .bevel-r-code__header, .bevel-r-diff__header, .bevel-r-action-banner, .bevel-r-action-banner__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
+  .bevel-r-action-banner--running .bevel-r-action-banner__body, .bevel-r-action-banner--uncertain .bevel-r-action-banner__body { flex: 1; min-width: 0; }
+  .bevel-r-action-banner__head { display: flex; align-items: baseline; gap: .75rem; }
+  .bevel-r-action-banner__count { margin-inline-start: auto; white-space: nowrap; }
+  .bevel-r-action-banner__progress { display: block; width: 100%; }
+  .bevel-r-code__fallback { width: 100%; min-height: 8rem; }
+  .bevel-r-diff__line { display: flex; gap: .5rem; }
+  .bevel-r-diff__line code { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .bevel-r-diff[data-bevel-react-layout="split"] .bevel-r-diff__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .bevel-r-avatars__stack { display: flex; gap: .25rem; }
+  .bevel-r-avatars__person { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; background: ButtonFace; overflow: hidden; }
+  .bevel-r-avatars__image { width: 100%; height: 100%; object-fit: cover; }
+  .bevel-r-avatars__directory { list-style: none; padding: 0; }
+  .bevel-r-avatars__member { display: flex; align-items: center; gap: .5rem; }
+  .bevel-r-chart__plot { display: block; width: 100%; height: auto; }
+  .bevel-r-chart__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .bevel-r-kanban { overflow: auto; }
+  .bevel-r-kanban__board { display: grid; gap: 1rem; }
+  .bevel-r-kanban__list { display: flex; flex-direction: column; gap: .75rem; min-height: 4rem; }
+  .bevel-r-kanban__column-head { display: flex; align-items: center; gap: .5rem; }
+  .bevel-r-kanban__card { padding: .75rem; border: 1px solid ButtonBorder; }
+  .bevel-r-kanban__title { font: inherit; background: transparent; color: inherit; border: 0; text-align: start; cursor: pointer; }
+  .bevel-r-kanban__card[aria-current="true"] { outline: 2px solid Highlight; }
+  .bevel-r-kanban__panel { padding: 1rem; min-width: 16rem; }
+  .bevel-r-kanban__work { display: flex; align-items: start; gap: 1rem; }
+  .bevel-r-richtext__editor { padding: .75rem; min-height: 5rem; border: 1px solid ButtonBorder; }
+  .bevel-r-quickcrop__stage { display: flex; overflow: auto; padding: 16px; }
+  .bevel-r-quickcrop__stage > * { flex: none; margin-inline: auto; }
+  [data-bevel-react-drop-target] { box-shadow: inset 0 2px Highlight; }
+  @media (max-width: 640px) {
+    .bevel-r-settings__row { align-items: start; flex-direction: column; }
+    .bevel-r-app-shell__bar { flex-wrap: wrap; }
+    .bevel-r-app-shell__word { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
+    .bevel-r-app-shell__rule, .bevel-r-app-shell__switcher-icon, .bevel-r-app-shell__side-toggle, .bevel-r-app-shell__side { display: none; }
+    .bevel-r-app-shell__tabs { flex: 1 0 100%; order: 1; }
+    .bevel-r-app-shell__tabs > .bevel-r-button { flex: 1; }
+    .bevel-r-app-shell__nav-toggle { display: inline-grid; }
+    .bevel-r-app-shell[data-bevel-react-nav-open] .bevel-r-app-shell__side { position: static; display: flex; flex: 1; min-block-size: 0; overflow-y: auto; }
+    .bevel-r-app-shell[data-bevel-react-nav-open] .bevel-r-app-shell__main { display: none; }
+    .bevel-r-app-shell__content { padding: 1rem .75rem; }
+    .bevel-r-breadcrumbs__middle { display: none !important; }
+    .bevel-r-breadcrumbs__overflow { display: block; }
+    .bevel-r-filter__rule { grid-template-columns: minmax(0, 1fr); }
+    .bevel-r-wizard { grid-template-columns: minmax(0, 1fr); }
+    .bevel-r-split, .bevel-r-split[data-bevel-react-orientation="vertical"] { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
+    .bevel-r-split > .bevel-r-split__divider { display: none; }
+  }
+  @media (prefers-reduced-motion: reduce) { [data-bevel-appearance] { scroll-behavior: auto; animation-duration: .01ms; transition-duration: .01ms; } }
+}

package/dist/react/layout.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react/models/filter.d.ts

@@ -0,0 +1,31 @@
+export type FilterOperator = 'equals' | 'contains' | 'starts-with' | 'is-empty' | 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'before' | 'on' | 'after' | 'is' | 'is-not';
+export type FilterType = 'text' | 'number' | 'date' | 'enum';
+export interface FilterRule {
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    value: string;
+}
+export interface FilterExpression {
+    match: 'all' | 'any';
+    rules: FilterRule[];
+}
+export interface FilterField<Row = Record<string, unknown>> {
+    id: string;
+    label: string;
+    type?: FilterType;
+    options?: ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    getValue?: (row: Row) => unknown;
+}
+export interface FilterError {
+    ruleId: string;
+    message: string;
+}
+export declare const filterOperators: Record<FilterType, readonly FilterOperator[]>;
+export declare function parseNumber(value: unknown): number | null;
+export declare function isISODate(value: unknown): value is string;
+export declare function validateFilter<Row>(expression: FilterExpression, fields: readonly FilterField<Row>[]): FilterError[];
+export declare function matchesFilter<Row>(row: Row, expression: FilterExpression, fields: readonly FilterField<Row>[]): boolean;