@thewaver/ss-components 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,1194 @@
+import * as solid_js from 'solid-js';
+import { Accessor, Setter, JSX, ParentProps } from 'solid-js';
+import * as _thewaver_ss_utils from '@thewaver/ss-utils';
+import { Rect, Bounds, Point2d, Size2d, CSSMargin, CSSAnimationKey } from '@thewaver/ss-utils';
+import { Color } from 'colorthief';
+
+declare namespace AudioUtils {
+    const isPlaying: (audioElement: HTMLAudioElement) => boolean;
+}
+
+declare namespace ElementFader {
+    const createFader: (getIsVisible: () => boolean, getTransitionDurationMs: () => number, opts?: {
+        onShow?: () => void;
+        onHide?: () => void;
+    }) => {
+        getIsVisible: solid_js.Accessor<boolean>;
+        getTransitionTarget: solid_js.Accessor<0 | 1>;
+        getHasTransitionFinished: solid_js.Accessor<boolean>;
+        show: () => void;
+        hide: () => void;
+    };
+}
+
+declare namespace ElementObserver {
+    const createObserver: <T extends HTMLElement>(getElementRef: Accessor<T | undefined>, setElementRect: Setter<Rect | undefined>, getIsVisible: Accessor<boolean>, opts?: {
+        getPadding?: () => Bounds | number;
+        getOffset?: () => Point2d;
+    }) => void;
+}
+
+declare namespace FPSUtils {
+    const createMonitor: (getIsEnabled: Accessor<boolean>, startupTimeMs?: number) => {
+        getFPS: Accessor<{
+            current: number;
+            average: number;
+        }>;
+    };
+}
+
+declare namespace FocusUtils {
+    const getFocusableChildren: (root?: HTMLElement) => HTMLElement[];
+    const getFirstFocusableChild: (root?: HTMLElement) => HTMLElement | null;
+    const getLastFocusableChild: (root?: HTMLElement) => HTMLElement | null;
+    const focusTrapKeyDown: (e: KeyboardEvent & {
+        currentTarget: HTMLDivElement;
+        target: Element;
+    }, ref: HTMLElement | undefined) => void;
+    const autoFocus: (getIsVisible: () => boolean, getRef: () => HTMLElement | undefined) => void;
+}
+
+type ExternalInteractionFlags = {
+    isDisabled?: boolean;
+    isPressed?: boolean;
+    hasError?: boolean;
+};
+type InternalInteractionFlags = {
+    isHovered?: boolean;
+    isActive?: boolean;
+    isFocused?: boolean;
+};
+type InteractionFlags = InternalInteractionFlags & ExternalInteractionFlags;
+
+declare namespace InteractionUtils {
+    const wrapElement: (getRef: () => HTMLElement | undefined, getIsDisabled: () => boolean, skipAriaSettings?: boolean) => {
+        getFlags: solid_js.Accessor<InternalInteractionFlags>;
+    };
+}
+
+type NonNullish<T> = T extends undefined | null ? never : T;
+type IsPrimitive<T> = T extends string | number | boolean | bigint | null | undefined ? true : false;
+type IsNonReactive<T> = T extends ((...args: any) => any) | JSX.Element | Date | Map<any, any> | Set<any> | symbol ? true : false;
+type IsOptional<T, K extends keyof T> = {} extends Pick<T, K> ? true : false;
+type IsSkippable<T> = IsPrimitive<NonNullish<T>> extends true ? false : IsNonReactive<NonNullish<T>>;
+type PrefixKeyWithGet<K> = K extends string ? `get${Capitalize<K>}` : never;
+type AccessorizedPart<T extends object> = {
+    [K in keyof T as IsSkippable<T[K]> extends false ? PrefixKeyWithGet<K & string> : never]: IsOptional<T, K> extends true ? Accessor<Exclude<T[K], undefined>> | undefined : Accessor<T[K]>;
+};
+type SkippedPart<T extends object> = {
+    [K in keyof T as IsSkippable<T[K]> extends true ? K : never]: T[K];
+};
+type AccessorProps<T extends object> = AccessorizedPart<T> & SkippedPart<T>;
+
+type SVGAnimationDefs = AccessorProps<{
+    animationDurationMs: number;
+}>;
+
+type SVGDefs = {
+    clipPath?: {
+        id: string;
+        defsElement: JSX.Element;
+    };
+    filter?: {
+        id: string;
+        defsElement: JSX.Element;
+    };
+    blend?: boolean;
+    opacity?: number;
+} & ({
+    color?: never;
+    gradientOrPattern: {
+        id: string;
+        defsElement: JSX.Element;
+    };
+} | {
+    color: string;
+    gradientOrPattern?: never;
+});
+
+declare namespace SVGDefsSamples {
+    type ColorDefs = {
+        [K in "primary" | "secondary" | "tertiary" | "background"]: string;
+    };
+    namespace Pattern {
+        type ElementDefs = SVGAnimationDefs & {
+            getSize: () => Size2d;
+            getCellSize: () => Size2d;
+            getColors: () => ColorDefs;
+            getBlurWidth?: () => number;
+        };
+        export type ConfigDefs = {
+            getSVGDefs: (id: string, getInteractionFlags: (() => InteractionFlags) | undefined, defs: ElementDefs) => SVGDefs[];
+        };
+        export const SAMPLE_CONFIGS: {
+            readonly plain: {
+                readonly getSVGDefs: (_: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    color: string;
+                }[];
+            };
+            readonly circle_g_2: ConfigDefs;
+            readonly circle_hd_2: ConfigDefs;
+            readonly circle_hs_2: ConfigDefs;
+            readonly hexagon_ft_2: ConfigDefs;
+            readonly hexagon_pt_2: ConfigDefs;
+            readonly lozenge_d_2: ConfigDefs;
+            readonly triangle_t_2: ConfigDefs;
+            readonly whirl_2: ConfigDefs;
+            readonly whirlCurved_2: ConfigDefs;
+        };
+        export {  };
+    }
+    namespace Gradient {
+        type ElementDefs = SVGAnimationDefs & {
+            getSize: () => Size2d;
+            getColors: () => ColorDefs;
+            getBlurWidth?: () => number;
+        };
+        export type ConfigDefs = {
+            getSVGDefs: (id: string, getInteractionFlags: (() => InteractionFlags) | undefined, defs: ElementDefs) => SVGDefs[];
+        };
+        export const SAMPLE_CONFIGS: {
+            readonly plain: {
+                readonly getSVGDefs: (_: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    color: string;
+                }[];
+            };
+            readonly flow_2s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                }[];
+            };
+            readonly flow_3: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                }[];
+            };
+            readonly flow_3s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                }[];
+            };
+            readonly flowDiagonal_2s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                }[];
+            };
+            readonly flowDiagonal_3: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                }[];
+            };
+            readonly flowDiagonal_3s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                }[];
+            };
+            readonly merge_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                    blend?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    blend: true;
+                    color?: undefined;
+                })[];
+            };
+            readonly mergeDiagonal_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                    blend?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    blend: true;
+                    color?: undefined;
+                })[];
+            };
+            readonly mergeDiagonalDesync_4x: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                    blend?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    blend: true;
+                    color?: undefined;
+                })[];
+            };
+            readonly orbit_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly orbit_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly orbitDesync_2v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly orbitDesync_3x: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                    blend?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    blend: true;
+                    color?: undefined;
+                })[];
+            };
+            readonly scan_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly scan_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly scanDiagonal_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly scanDiagonal_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly snake_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snake_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snake_2: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snake_4: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snakeDesync_3x: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snakeWait_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snakeWait_3x1s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly snakeWait_3x2s: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    clipPath?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    clipPath: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    color?: undefined;
+                })[];
+            };
+            readonly sweep_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly sweep_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly sweepDiagonal_1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly sweepDiagonal_1v1: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+            readonly sweepDiagonalDesync_4x: {
+                readonly getSVGDefs: (id: string, __: (() => InteractionFlags) | undefined, defs: ElementDefs) => ({
+                    color: string;
+                    gradientOrPattern?: undefined;
+                    filter?: undefined;
+                } | {
+                    gradientOrPattern: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    };
+                    filter: {
+                        id: string;
+                        defsElement: solid_js.JSX.Element;
+                    } | undefined;
+                    color?: undefined;
+                })[];
+            };
+        };
+        export {  };
+    }
+}
+
+declare namespace SVGAnimationUtils {
+    namespace Linear {
+        const grow: (vName: "x" | "y", v1: number, v2: number, sArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const sweepOrthogonal: (vName: "x" | "y", v1: number, v2: number, oArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const sweepDiagonal: (x1: number, y1: number, x2: number, y2: number, angle: number, oArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const rotate: (aArray: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+    }
+    namespace Radial {
+        const grow: (rArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const sweepOrthogonal: (vName: "cx" | "cy", vArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const sweepDiagonal: (cx: number, cy: number, angle: number, oArr: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+    }
+    namespace Path {
+        const getRotatingArc: (aArray: [rotation: number, arcSize: number][], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+        const getRotatingWedges: (wedgeCount: number, wedgeThickness: number, curvature: number, aArray: number[], defs: SVGAnimationDefs) => solid_js.JSX.Element;
+    }
+}
+
+type SVGBaseFilterDefs = {};
+type SVGDropShadowFilterDefs = SVGBaseFilterDefs & {
+    dx: number;
+    dy: number;
+    stdDeviation: number;
+    floodColor: string;
+    floodOpacity: number;
+};
+type SVGGaussianBlurFilterDefs = SVGBaseFilterDefs & {
+    stdDeviation: number;
+};
+type SVGSaturationFilterDefs = SVGBaseFilterDefs & {
+    amount: number;
+};
+type SVGHueRotationFilterDefs = SVGBaseFilterDefs & {
+    deg: number;
+};
+type SVGBrightnessFilterDefs = SVGBaseFilterDefs & {
+    amount: number;
+};
+type SVGContrastFilterDefs = SVGBaseFilterDefs & {
+    amount: number;
+};
+type SVGInversionFilterDefs = SVGBaseFilterDefs & {
+    amount: number;
+};
+type SVGColorFilterDefs = SVGBaseFilterDefs & {
+    r: number;
+    g: number;
+    b: number;
+};
+
+type SVGPrimitiveDefs = {
+    method?: "chain" | "isolate";
+};
+declare class SVGFilterDefsFactory {
+    private readonly filterId;
+    private filterPrimitives;
+    private dropShadowCount;
+    private gaussianBlurCount;
+    private hueRotationCount;
+    private saturationCount;
+    private brightnessCount;
+    private contrastCount;
+    private inversionCount;
+    private colorCount;
+    private maxOffset;
+    constructor(filterId: string);
+    getFilterPrimitives: (defs?: SVGPrimitiveDefs & {
+        elementSize?: Size2d;
+    }) => JSX.Element;
+    addDropShadowFilter: (defs: SVGDropShadowFilterDefs, custom?: JSX.Element) => this;
+    addGaussianBlurFilter: (defs: SVGGaussianBlurFilterDefs, custom?: JSX.Element) => this;
+    addHueRotationFilter: (defs: SVGHueRotationFilterDefs, custom?: JSX.Element) => this;
+    addSaturationFilter: (defs: SVGSaturationFilterDefs, custom?: JSX.Element) => this;
+    addBrightnessFilter: (defs: SVGBrightnessFilterDefs, custom?: JSX.Element) => this;
+    addContrastFilter: (defs: SVGContrastFilterDefs, custom?: JSX.Element) => this;
+    addInversionFilter: (defs: SVGInversionFilterDefs, custom?: JSX.Element) => this;
+    addColorChannelFilter: (defs: SVGColorFilterDefs, custom?: JSX.Element) => this;
+}
+
+type SVGBaseGradientDefs = {
+    id: string;
+};
+type SVGGradientDefs = SVGBaseGradientDefs & {
+    colors: {
+        value: string;
+        stop?: number;
+    }[];
+    spreadKind?: "smooth" | "banded";
+    spreadMethod?: "pad" | "reflect" | "repeat";
+};
+type SVGLinearGradientDefs = SVGGradientDefs & {
+    angle?: number;
+    scale?: Size2d;
+    offset?: Point2d;
+};
+type SVGRadialGradientDefs = SVGGradientDefs & {
+    origin?: Point2d;
+    scale?: number;
+};
+
+declare namespace SVGGradientDefsUtils {
+    const getLinearGradient: (defs: SVGLinearGradientDefs, custom?: JSX.Element | ((x1: number, y1: number, x2: number, y2: number) => JSX.Element)) => JSX.Element;
+    const getRadialGradient: (defs: SVGRadialGradientDefs, custom?: JSX.Element | ((cx: number, cy: number, r: number) => JSX.Element)) => JSX.Element;
+}
+
+declare namespace SVGPatternDefsUtils {
+    const getPattern: (id: string, cellCount: {
+        rows: number;
+        cols: number;
+    }, patternSize: Size2d, getCellPos: (index: {
+        row: number;
+        col: number;
+    }) => Point2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 1H
+     * - cols advance at 1W
+     */
+    const getGridPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 0.5H
+     * - cols advance at 1W
+     * - rows have a -0.5H offset
+     * - even rows have a -0.5W offset
+     */
+    const getDiagonalPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 1H
+     * - cols advance at 1W
+     * - even rows have a -0.5W offset
+     */
+    const getHalfShiftPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 1H
+     * - cols advance at 1W
+     * - even cols have a -0.5H offset
+     */
+    const getHalfDropPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 1H
+     * - cols advance at 0.5W
+     */
+    const getTrianglePattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 0.75H
+     * - cols advance at 1W
+     * - rows have a -0.75H offset
+     * - even rows have a -0.5W offset
+     */
+    const getHexPointyTopPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+    /**
+     * - rows advance at 1H
+     * - cols advance at 0.75W
+     * - cols have a -0.75W offset
+     * - even cols have a -0.5H offset
+     */
+    const getHexFlatTopPattern: (id: string, cellCountIn: {
+        rows: number;
+        cols: number;
+    }, cellSize: Size2d, renderCell: (id: string, index: {
+        row: number;
+        col: number;
+    }, cellCount: {
+        rows: number;
+        cols: number;
+    }, isSplit: boolean) => JSX.Element) => JSX.Element;
+}
+
+type AudioSwitcherController = {
+    play: () => boolean;
+    pause: () => boolean;
+    reset: () => boolean;
+};
+type AudioSwitcherProps = AccessorProps<{
+    src: string;
+    crossfadeMs?: number;
+    volume?: number;
+    getController?: (controller: AudioSwitcherController) => void;
+}>;
+
+declare const AudioSwitcher: (props: AudioSwitcherProps) => null;
+
+type TooltipHPlacement = "left-in" | "left-out" | "right-in" | "right-out" | "center";
+type TooltipVPlacement = "top-in" | "top-out" | "bottom-in" | "bottom-out" | "center";
+type TooltipPlacement = {
+    x: TooltipHPlacement;
+    y: TooltipVPlacement;
+};
+type TooltipProps = AccessorProps<{
+    placement: TooltipPlacement;
+    offset?: Point2d;
+    reservedScreenSize?: Size2d;
+    transitionDurationMs?: number;
+    focusShowDelayMs?: number;
+    getAnchorRef: () => HTMLElement | undefined;
+    renderContent: (getVisibilityTarget: () => 0 | 1, getTransitionDurationMs: () => number, getPlacement: () => TooltipPlacement) => JSX.Element;
+    getZindex?: (getPlacement: () => TooltipPlacement) => number;
+}>;
+
+type ButtonSizing = "fit-content" | "fill";
+type ButtonOutlineDefs = {
+    color: string;
+    width: number;
+};
+type ButtonCbs = {
+    onClick?: (e: MouseEvent | KeyboardEvent) => Promise<void>;
+    onMouseEnter?: (e: MouseEvent) => Promise<void>;
+    onMouseLeave?: (e: MouseEvent) => Promise<void>;
+};
+type ButtonProps = AccessorProps<ButtonCbs & ExternalInteractionFlags & {
+    id?: string;
+    sizing?: ButtonSizing;
+    tooltipDefs?: Omit<TooltipProps, "getAnchorRef">;
+    renderHighlight?: () => JSX.Element;
+}>;
+
+declare const Button: (props: ParentProps<ButtonProps>) => solid_js.JSX.Element;
+
+type ColorExtractorContextType = {
+    getSrc: Accessor<string>;
+    getColorCount?: Accessor<number>;
+    getSamplePercentile?: Accessor<number>;
+};
+
+declare const ColorExtractorContextProvider: solid_js.ContextProviderComponent<ColorExtractorContextType | undefined>;
+declare const useColorExtractor: (props?: ColorExtractorContextType) => {
+    getColorData: solid_js.Accessor<Color[]>;
+};
+declare const useColorExtractorContext: () => {
+    getColorData: solid_js.Accessor<Color[]>;
+};
+
+type CornerKey = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+type CornersProps = AccessorProps<{
+    color?: string;
+    cornerLength?: Size2d;
+    strokeThickness?: number;
+    transitionDurationMs?: number;
+    visibleCorners?: Partial<Record<CornerKey, boolean>>;
+}>;
+
+declare const Corners: (props: ParentProps<CornersProps>) => solid_js.JSX.Element;
+
+type ElementHighlightProps = AccessorProps<{
+    isVisible: boolean;
+    padding?: number;
+    transitionDurationMs?: number;
+    getElementRef: () => HTMLElement | undefined;
+    onShow?: () => void;
+    onHide?: () => void;
+    renderHighlight?: (getVisibilityTarget: () => 0 | 1, getTransitionDurationMs: () => number) => JSX.Element;
+    renderOverlay: (getVisibilityTarget: () => 0 | 1, getTransitionDurationMs: () => number) => JSX.Element;
+}>;
+
+declare const ElementHighlight: (props: ElementHighlightProps) => solid_js.JSX.Element;
+
+declare namespace ElementHighlightUtils {
+    const getSegmentRects: (rect: Rect) => {
+        topLeft: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        topCenter: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        topRight: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        centerLeft: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        centerRight: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        bottomLeft: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        bottomCenter: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+        bottomRight: {
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+        };
+    };
+}
+
+type ImageSwitcherProps = AccessorProps<{
+    src: string | undefined;
+    transitionDurationMs?: number;
+    onLoad?: GlobalEventHandlers["onload"];
+}>;
+
+declare const ImageSwitcher: (props: ImageSwitcherProps) => solid_js.JSX.Element;
+
+type ModalProps = AccessorProps<{
+    isVisible: boolean;
+    transitionDurationMs?: number;
+    margins?: CSSMargin;
+    onShow?: () => void;
+    onHide?: () => void;
+    onTransitionStatusChange?: (hasTransitionFinished: boolean) => void;
+    renderOverlay: (getVisibilityTarget: () => 0 | 1, getTransitionDurationMs: () => number) => JSX.Element;
+    renderContent: (getVisibilityTarget: () => 0 | 1, getTransitionDurationMs: () => number) => JSX.Element;
+}>;
+
+declare const Modal: (props: ModalProps) => solid_js.JSX.Element;
+
+type RichTextProps = AccessorProps<{
+    content: string;
+    removeOtherTags?: boolean;
+    getClassNames?: (defaultClasses: Record<string, string>) => Record<string, string>;
+}>;
+type RichTextNode = {
+    type: "text";
+    content: string;
+} | {
+    type: "tag";
+    tag: string;
+    children: RichTextNode[];
+};
+
+declare const RichText: (props: RichTextProps) => JSX.Element;
+
+declare namespace RichTextUtils {
+    const parseContent: (input: string) => RichTextNode[];
+}
+
+type ScanlineAnimationEvaluationResult = Partial<Record<CSSAnimationKey, number>>;
+type ScanlineAnimationController = {
+    start: () => void;
+    stop: () => void;
+};
+type ScanlineAnimationProps = AccessorProps<{
+    src: string;
+    sizeAnchor?: "width" | "height";
+    lineCount: number;
+    animationDurationMs?: number;
+    animationIterationCount?: number;
+    animationIterationDelayMs?: number;
+    getController?: (controller: ScanlineAnimationController) => void;
+    evaluateRootAnimation?: (getTimeline: () => number) => ScanlineAnimationEvaluationResult;
+    evaluateScanlineAnimation: (getIndex: () => number, getLineCount: () => number, getTimeline: () => number) => ScanlineAnimationEvaluationResult;
+    onAnimationEnd?: () => void;
+}>;
+
+declare const ScanlineAnimation: (props: ScanlineAnimationProps) => solid_js.JSX.Element;
+
+declare namespace ScanlineAnimationBreakpoints {
+    const DIRECTIONS: readonly ["asc", "desc"];
+    type Direction = (typeof DIRECTIONS)[number];
+    const ORDER_TYPES: readonly ["linear", "converge", "evenOdd", "interleaved", "reverseBinary"];
+    type OrderingType = (typeof ORDER_TYPES)[number];
+    type OrderingDefs<T extends OrderingType> = Record<string, never>;
+    type OrderingFn<T extends OrderingType> = (idx: number, lineCount: number, defs: OrderingDefs<T>) => number;
+    type BreakpointOpts = {
+        dir?: Direction;
+        smoothness?: number;
+    };
+    type BreakpointTupleTriple = [start: number, middle: number, end: number];
+    const getBreakpoints: <T extends OrderingType>(type: T, idx: number, lineCount: number, defs: OrderingDefs<T>, opts?: BreakpointOpts) => BreakpointTupleTriple;
+}
+declare namespace ScanlineAnimationKeyframes {
+    type HorizontalSnakeOpts = {
+        shiftPercent?: number;
+    };
+    const evaluateHorizontalSnake: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalSnakeOpts) => ScanlineAnimationEvaluationResult;
+    type HorizontalSplitOpts = {
+        shiftPercent?: number;
+    };
+    const evaluateHorizontalSplit: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalSplitOpts) => ScanlineAnimationEvaluationResult;
+    type HorizontalStretchOpts = {
+        peakScalePercent?: number;
+    };
+    const evaluateHorizontalStretch: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalStretchOpts) => ScanlineAnimationEvaluationResult;
+    type HorizontalHueOpts = {};
+    const evaluateHorizontalHue: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalHueOpts) => ScanlineAnimationEvaluationResult;
+    type HorizontalBrightnessOpts = {};
+    const evaluateHorizontalBrightness: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalBrightnessOpts) => ScanlineAnimationEvaluationResult;
+    type HorizontalGrayscaleOpts = {};
+    const evaluateHorizontalGrayscale: ([b0, b1, b2]: ScanlineAnimationBreakpoints.BreakpointTupleTriple, idx: number, t: number, opts?: HorizontalGrayscaleOpts) => ScanlineAnimationEvaluationResult;
+}
+declare namespace ScanlineAnimationUtils {
+    const assignAnimationProps: (el: HTMLElement, evalResult: Partial<Record<CSSAnimationKey, number>>) => void;
+}
+
+type AnimDirection = "in" | "out";
+
+type ScreenWiperShape = "lozenge" | "circle";
+type ScreenWiperProps = AccessorProps<{
+    initialWipeDirection: AnimDirection;
+    wipeDirection: AnimDirection;
+    shape?: ScreenWiperShape;
+    cellSize?: Size2d;
+    transitionDurationMs?: number;
+    onTransitionEnd?: (dir: AnimDirection) => void;
+}>;
+
+declare const ScreenWiper: (props: ScreenWiperProps) => solid_js.JSX.Element;
+
+type ShapeProps = AccessorProps<{
+    joinRadii?: number[];
+    lameExponents?: number[];
+    getPoints: (getSize: () => Size2d) => Point2d[];
+    getStrokeDefs?: (getSize: () => Size2d) => (SVGDefs & {
+        thicknesses: number[];
+        offset?: number;
+    })[];
+    getFillDefs?: (getSize: () => Size2d) => SVGDefs[];
+    renderChildren: (getSize: () => Size2d, getClipPath: () => string, getClipPoints: () => Point2d[]) => JSX.Element;
+}>;
+
+declare const Shape: (props: ShapeProps) => solid_js.JSX.Element;
+
+type TabProps = AccessorProps<{
+    dir?: "column" | "row";
+    selectedIndex: number | undefined;
+    tabCount: number;
+    tabGap?: number;
+    hrefs?: string[];
+    transitionDurationMs?: number;
+    getIsDisabled?: (getIndex: () => number) => boolean;
+    renderGutter?: () => JSX.Element;
+    renderFloater?: () => JSX.Element;
+    renderTab: (getIndex: () => number) => JSX.Element;
+    onSelectionChange?: (newIndex: number) => void;
+}>;
+
+declare const Tabs: (props: TabProps) => JSX.Element;
+
+declare const Tooltip: (props: TooltipProps) => solid_js.JSX.Element;
+
+declare namespace TooltipUtils {
+    const getHPlacementShift: (hPlacement: TooltipHPlacement, anchorRect: Rect, contentSize: Size2d) => number;
+    const getVPlacementShift: (vPlacement: TooltipVPlacement, anchorRect: Rect, contentSize: Size2d) => number;
+    const getHPlacementOffset: (hPlacement: TooltipHPlacement, offsetX: number) => number;
+    const getVPlacementOffset: (vPlacement: TooltipVPlacement, offsetY: number) => number;
+    const getSafeHPlacement: (hPlacement: TooltipHPlacement, anchorRect: Rect, contentSize: Size2d, screenSize: Size2d, offsetSize?: Point2d, reservedScreenSize?: Size2d) => TooltipHPlacement;
+    const getSafeVPlacement: (vPlacement: TooltipVPlacement, anchorRect: Rect, contentSize: Size2d, screenSize: Size2d, offsetSize?: Point2d, reservedScreenSize?: Size2d) => TooltipVPlacement;
+}
+
+type TypewriterUpdateCause = "content" | "layout" | "other";
+type TypewriterController = {
+    restartAnimation: () => boolean;
+    update: (cause: TypewriterUpdateCause) => void;
+};
+type TypewriterProps = AccessorProps<{
+    animationName?: string;
+    animationDurationMs?: number;
+    animationDelayMs?: number;
+    initialAnimationDelayMs?: number;
+    resetAnimationOnLayout?: boolean;
+    resetAnimationOnContent?: boolean;
+    getController?: (controller: TypewriterController) => void;
+    onAnimationEnd?: () => void;
+}>;
+
+declare const Typewriter: (props: ParentProps<TypewriterProps>) => solid_js.JSX.Element;
+
+type ViewportContextType = {
+    getPortalRef: Accessor<HTMLElement | undefined>;
+    getSize: Accessor<Size2d>;
+    getScale: Accessor<number>;
+    getScaledRect: Accessor<DOMRect>;
+};
+
+declare const ViewportContextProvider: solid_js.ContextProviderComponent<ViewportContextType | undefined>;
+declare const useViewportContext: () => {
+    getPortalRef: solid_js.Accessor<HTMLElement | undefined>;
+    getSize: solid_js.Accessor<_thewaver_ss_utils.Size2d>;
+    getScale: solid_js.Accessor<number>;
+    getScaledRect: solid_js.Accessor<DOMRect>;
+};
+
+type ViewportProps = AccessorProps<{
+    size: Size2d;
+}>;
+
+declare const Viewport: (props: ParentProps<ViewportProps>) => solid_js.JSX.Element;
+
+export { type AccessorProps, AudioSwitcher, type AudioSwitcherController, type AudioSwitcherProps, AudioUtils, Button, type ButtonCbs, type ButtonOutlineDefs, type ButtonProps, type ButtonSizing, ColorExtractorContextProvider, type ColorExtractorContextType, type CornerKey, Corners, type CornersProps, ElementFader, ElementHighlight, type ElementHighlightProps, ElementHighlightUtils, ElementObserver, type ExternalInteractionFlags, FPSUtils, FocusUtils, ImageSwitcher, type ImageSwitcherProps, type InteractionFlags, InteractionUtils, type InternalInteractionFlags, Modal, type ModalProps, RichText, type RichTextNode, type RichTextProps, RichTextUtils, type SVGAnimationDefs, SVGAnimationUtils, type SVGBrightnessFilterDefs, type SVGColorFilterDefs, type SVGContrastFilterDefs, type SVGDefs, SVGDefsSamples, type SVGDropShadowFilterDefs, SVGFilterDefsFactory, type SVGGaussianBlurFilterDefs, SVGGradientDefsUtils, type SVGHueRotationFilterDefs, type SVGInversionFilterDefs, type SVGLinearGradientDefs, SVGPatternDefsUtils, type SVGRadialGradientDefs, type SVGSaturationFilterDefs, ScanlineAnimation, ScanlineAnimationBreakpoints, type ScanlineAnimationController, type ScanlineAnimationEvaluationResult, ScanlineAnimationKeyframes, type ScanlineAnimationProps, ScanlineAnimationUtils, ScreenWiper, type ScreenWiperProps, type ScreenWiperShape, Shape, type ShapeProps, type TabProps, Tabs, Tooltip, type TooltipHPlacement, type TooltipPlacement, type TooltipProps, TooltipUtils, type TooltipVPlacement, Typewriter, type TypewriterController, type TypewriterProps, type TypewriterUpdateCause, Viewport, ViewportContextProvider, type ViewportContextType, type ViewportProps, useColorExtractor, useColorExtractorContext, useViewportContext };