@surdeddd/bottom-sheet 0.13.0 → 0.14.0

package/README.md

@@ -248,6 +248,8 @@ type SnapPoint =
 | `persistent`         | `false`       | Block dismissal (backdrop / Escape / back); programmatic `close()` still works                                             |
 | `disableClose`       | `false`       | Block all closing, including programmatic                                                                                  |
 | `disableDrag`        | `false`       | Suppress the drag gesture (imperative snaps still work)                                                                    |
+| `dragFrom`           | `"handle"`    | Which regions start a drag: `"handle"`, `"sheet"` (whole sheet), or `"zones"` (only `[data-bs-drag]` subtrees). Defaults to `"sheet"` when no handle is given. `[data-bs-no-drag]` opts a subtree out in every mode. Also `setDragFrom()` / `getDragFrom()` — switching remounts the gesture, no component remount |
+| `dragFromContent`    | `true`        | Whether a touch gesture on the scroll container drags the sheet; override per snap point with `{ id, size, dragFromContent: false }`. Also `setDragFromContent()` |
 | `radius`             | token default | Corner radius (`string` CSS length or `number` px); also `setRadius()`                                                     |
 | `maxHeight`          | none          | Cap the sheet height. `number` (px) or a string (`"92dvh"`, `"50%"`) re-resolved on viewport / orientation changes         |
 | `returnFocusTo`      | opener        | Focus target on dismiss — an `HTMLElement`, a selector `string`, or a `() => HTMLElement` factory                          |
@@ -418,6 +420,28 @@ trap, scroll lock, scrim, stacking) is core. Setting an option whose feature
 is missing dev-warns once and is ignored in production. Custom features
 implement `{ name, install(ctx) }` — the same seam the built-ins use.
 
+### WebGL renderer (opt-in)
+
+```ts
+import { webglRenderer } from '@surdeddd/bottom-sheet/webgl';
+
+const engine = new BottomSheetEngine({
+  element, handle, snapPoints,
+  features: [webglRenderer({ jelly: 0.6 })],
+});
+```
+
+Paints the sheet surface — panel, radii, shadow, edge sheen — on the GPU. The
+moment a drag starts, the sheet's text is lifted into a texture so the whole
+sheet bends as one surface, and handed straight back to the DOM once it
+settles. Layout, scrolling, gestures and the accessibility tree never leave the
+DOM. 4.2 KB gzip, and only if you import it.
+Falls back to the DOM renderer, silently and mid-session if it has to, when
+there is no WebGL, under `prefers-reduced-motion`, or when the browser drops
+the GL context.
+
+[Full WebGL docs →](docs/webgl.md)
+
 ### Debug overlay
 
 ```ts
@@ -528,6 +552,15 @@ The editorial demo showcases the adapters, every gesture, every mode
 (`bottom · top · left · right · overlay`), and live engine readouts (active
 snap, progress, velocity, FPS). EN/RU and light/dark toggles in the corner.
 
+## Browser support
+
+Baseline: Chrome/Edge 80, Safari 13.1 (iOS 13.4), Firefox 72 — set by the
+ES2020 build target and the APIs the engine cannot work without (Pointer
+Events, CSS custom properties, `ResizeObserver`). Everything else, from
+`inert` to `backdrop-filter` to WebGL, is capability-checked and degrades.
+
+[Full support matrix →](docs/browser-support.md)
+
 ## Testing
 
 ```bash

package/dist/{BottomSheetCore-CsIjyq7C.d.cts → BottomSheetCore-Cp7dWy91.d.cts}

@@ -1,9 +1,12 @@
 import { T as TransformAxis } from './transform-jVfAikE9.cjs';
 
+type DragFrom$1 = "handle" | "sheet" | "zones";
+
 type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
 type SnapPointDef<Id extends string = string> = {
     id: Id;
     size: SnapPoint;
+    dragFromContent?: boolean;
 };
 type SnapId<T extends readonly SnapPointDef<string>[] | {
     snapPoints: readonly SnapPointDef<string>[];
@@ -11,6 +14,8 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
     snapPoints: readonly SnapPointDef<infer U>[];
 } ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
 type SheetMode = TransformAxis;
+type DragFrom = DragFrom$1;
+type DragSurfaceKind = "content";
 type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
 type ScrimPresetConfig = {
     color: string;
@@ -93,6 +98,8 @@ type EngineOptions = {
     respectReducedMotion?: boolean;
     flickVelocity?: number;
     dragThreshold?: number;
+    dragFrom?: DragFrom;
+    dragFromContent?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -172,6 +179,7 @@ type EngineFeatureContext = {
     resyncAfterResize: () => void;
     snapTo: (id: string) => void;
     close: (reason?: CloseReason) => Promise<void>;
+    attachDragSurface: (surface: HTMLElement, kind: DragSurfaceKind) => (() => void) | void;
     on: <K extends keyof SheetEventMap>(event: K, fn: (payload: SheetEventMap[K]) => void) => () => void;
     addTeardown: (fn: (() => void) | null | undefined) => void;
 };
@@ -261,6 +269,8 @@ declare class BottomSheetCore {
     private mode;
     private flickVelocity;
     private dragThreshold;
+    private dragFromMode;
+    private dragFromContentDefault;
     private rubberBandEnabled;
     private scrim;
     private aria;
@@ -278,8 +288,11 @@ declare class BottomSheetCore {
     private activeId;
     private size;
     private gesture;
+    private contentGesture;
+    private detachSheetGesture;
     private rootEl;
     private destroyed;
+    private restClosed;
     private currentViewTransition;
     private currentAbort;
     private sizeWriteSentinel;
@@ -322,6 +335,7 @@ declare class BottomSheetCore {
         signal?: AbortSignal;
     }, _skipBeforeSnap?: boolean): Promise<void>;
     private completeSnap;
+    private setRestClosed;
     private emitOpenSequence;
     private emitCloseSequence;
     dragTo(targetSize: number, velocityOrOpts?: number | {
@@ -334,6 +348,9 @@ declare class BottomSheetCore {
     setPersistent(value: boolean): void;
     setDisableClose(value: boolean): void;
     setDisableDrag(value: boolean): void;
+    setDragFromContent(value: boolean): void;
+    setDragFrom(mode: DragFrom$1): void;
+    getDragFrom(): DragFrom$1;
     isTop(): boolean;
     depth(): number;
     expand(): Promise<void>;
@@ -373,9 +390,17 @@ declare class BottomSheetCore {
     private updateAriaSlider;
     private registerInStack;
     private applyStackDepth;
+    private buildGestureDeps;
+    private isContentDragAllowed;
+    private decideContentDrag;
+    private attachDragSurface;
+    private sheetDragSurface;
+    private canStartSheetDrag;
+    private mountSheetGesture;
     private attach;
     private attachFeatures;
     private settleAfterDrag;
+    private isDraggingAny;
     private clearWillChangeIfIdle;
     private haptic;
     private applySize;
@@ -385,4 +410,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type ScrimOverlayPosition as f, type AnchorAnimationPreset as g, type AnchorAnimationSpec as h, type AnchorHandle as i, type AnchorPosition as j, type AnchorState as k, type EngineFeature as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };

package/dist/{BottomSheetCore-D16lsa6g.d.ts → BottomSheetCore-DJYwWOqt.d.ts}

@@ -1,9 +1,12 @@
 import { T as TransformAxis } from './transform-jVfAikE9.js';
 
+type DragFrom$1 = "handle" | "sheet" | "zones";
+
 type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
 type SnapPointDef<Id extends string = string> = {
     id: Id;
     size: SnapPoint;
+    dragFromContent?: boolean;
 };
 type SnapId<T extends readonly SnapPointDef<string>[] | {
     snapPoints: readonly SnapPointDef<string>[];
@@ -11,6 +14,8 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
     snapPoints: readonly SnapPointDef<infer U>[];
 } ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
 type SheetMode = TransformAxis;
+type DragFrom = DragFrom$1;
+type DragSurfaceKind = "content";
 type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
 type ScrimPresetConfig = {
     color: string;
@@ -93,6 +98,8 @@ type EngineOptions = {
     respectReducedMotion?: boolean;
     flickVelocity?: number;
     dragThreshold?: number;
+    dragFrom?: DragFrom;
+    dragFromContent?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -172,6 +179,7 @@ type EngineFeatureContext = {
     resyncAfterResize: () => void;
     snapTo: (id: string) => void;
     close: (reason?: CloseReason) => Promise<void>;
+    attachDragSurface: (surface: HTMLElement, kind: DragSurfaceKind) => (() => void) | void;
     on: <K extends keyof SheetEventMap>(event: K, fn: (payload: SheetEventMap[K]) => void) => () => void;
     addTeardown: (fn: (() => void) | null | undefined) => void;
 };
@@ -261,6 +269,8 @@ declare class BottomSheetCore {
     private mode;
     private flickVelocity;
     private dragThreshold;
+    private dragFromMode;
+    private dragFromContentDefault;
     private rubberBandEnabled;
     private scrim;
     private aria;
@@ -278,8 +288,11 @@ declare class BottomSheetCore {
     private activeId;
     private size;
     private gesture;
+    private contentGesture;
+    private detachSheetGesture;
     private rootEl;
     private destroyed;
+    private restClosed;
     private currentViewTransition;
     private currentAbort;
     private sizeWriteSentinel;
@@ -322,6 +335,7 @@ declare class BottomSheetCore {
         signal?: AbortSignal;
     }, _skipBeforeSnap?: boolean): Promise<void>;
     private completeSnap;
+    private setRestClosed;
     private emitOpenSequence;
     private emitCloseSequence;
     dragTo(targetSize: number, velocityOrOpts?: number | {
@@ -334,6 +348,9 @@ declare class BottomSheetCore {
     setPersistent(value: boolean): void;
     setDisableClose(value: boolean): void;
     setDisableDrag(value: boolean): void;
+    setDragFromContent(value: boolean): void;
+    setDragFrom(mode: DragFrom$1): void;
+    getDragFrom(): DragFrom$1;
     isTop(): boolean;
     depth(): number;
     expand(): Promise<void>;
@@ -373,9 +390,17 @@ declare class BottomSheetCore {
     private updateAriaSlider;
     private registerInStack;
     private applyStackDepth;
+    private buildGestureDeps;
+    private isContentDragAllowed;
+    private decideContentDrag;
+    private attachDragSurface;
+    private sheetDragSurface;
+    private canStartSheetDrag;
+    private mountSheetGesture;
     private attach;
     private attachFeatures;
     private settleAfterDrag;
+    private isDraggingAny;
     private clearWillChangeIfIdle;
     private haptic;
     private applySize;
@@ -385,4 +410,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type ScrimOverlayPosition as f, type AnchorAnimationPreset as g, type AnchorAnimationSpec as h, type AnchorHandle as i, type AnchorPosition as j, type AnchorState as k, type EngineFeature as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };

package/dist/{BottomSheetEngine-BYjAVrmd.d.cts → BottomSheetEngine-Lm7HIVHv.d.cts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-CsIjyq7C.cjs';
+import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-Cp7dWy91.cjs';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/{BottomSheetEngine-YuCNugZn.d.ts → BottomSheetEngine-O5PbeKfe.d.ts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-D16lsa6g.js';
+import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-DJYwWOqt.js';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);