@falcon-ui/falcon-ui 1.0.0 → 1.1.0

package/theme/src/loading.scss

@@ -0,0 +1,52 @@
+@use './mixins/bem.scss' as bem;
+
+@include bem.b(loading) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  vertical-align: middle;
+  color: var(--el-text-color-regular, #606266);
+  font-size: 14px;
+  line-height: 1.5;
+
+  @include bem.m(vertical) {
+    flex-direction: column;
+  }
+  @include bem.when(inactive) {
+    visibility: hidden;
+  }
+  @include bem.e(visual) {
+    display: inline-flex;
+    width: var(--fl-loading-size, 64px);
+    height: var(--fl-loading-size, 64px);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  }
+  @include bem.e(canvas) {
+    display: block;
+  }
+  @include bem.e(fallback) {
+    font-size: calc(var(--fl-loading-size, 64px) * 0.4);
+  }
+  @include bem.e(text) {
+    overflow-wrap: anywhere;
+  }
+}
+
+// Direct children make the adapter independent of Element Plus's configurable namespace.
+@include bem.b(loading-adapter) {
+  > div {
+    top: 50%;
+    margin-top: 0 !important;
+    transform: translateY(-50%);
+    > svg {
+      display: none !important;
+    }
+    > p {
+      margin: 0;
+      padding: 0 12px;
+    }
+  }
+}

package/types/components/barcode/index.d.ts

@@ -171,7 +171,7 @@ export declare const FlBarcode: import("@falcon-ui/falcon-ui/utils").SFCWithInst
     readonly displayValue: boolean;
     readonly fontOptions: string;
     readonly fontSize: number;
-    readonly textAlign: "center" | "right" | "left";
+    readonly textAlign: "center" | "left" | "right";
     readonly textPosition: "top" | "bottom";
     readonly textMargin: number;
     readonly marginTop: number;

package/types/components/barcode/src/barcode.vue.d.ts

@@ -172,7 +172,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     readonly displayValue: boolean;
     readonly fontOptions: string;
     readonly fontSize: number;
-    readonly textAlign: "center" | "right" | "left";
+    readonly textAlign: "center" | "left" | "right";
     readonly textPosition: "top" | "bottom";
     readonly textMargin: number;
     readonly marginTop: number;

package/types/components/index.d.ts

@@ -1,4 +1,6 @@
 export { FlButton } from './button';
+export { FlLoading, useFlLoading } from './loading';
+export type { FlLoadingProps, FlLoadingAnimation, FlLoadingSize, FlLoadingTheme, FlLoadingLayout, FlLoadingOptions, FlLoadingDirectiveOptions } from './loading';
 export type { ButtonEmits, ButtonProps, FlButtonEmits, FlButtonProps } from './button';
 export { FlDialog } from './dialog';
 export type { DialogEmits, DialogProps, FlDialogEmits, FlDialogProps } from './dialog';

package/types/components/input/index.d.ts

@@ -49,7 +49,7 @@ export declare const FlInput: import("@falcon-ui/falcon-ui/utils").SFCWithInstal
         readonly autofocus?: boolean | undefined;
         readonly rows?: number | undefined;
         readonly ariaLabel?: string | undefined;
-        readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+        readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         readonly name?: string | undefined;
         readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
         readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;

package/types/components/input/src/input.vue.d.ts

@@ -49,7 +49,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly autofocus?: boolean | undefined;
         readonly rows?: number | undefined;
         readonly ariaLabel?: string | undefined;
-        readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+        readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         readonly name?: string | undefined;
         readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
         readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;

package/types/components/input-number/index.d.ts

@@ -68,7 +68,7 @@ export declare const FlInputNumber: import("@falcon-ui/falcon-ui/utils").SFCWith
             readonly autofocus?: boolean | undefined;
             readonly rows?: number | undefined;
             readonly ariaLabel?: string | undefined;
-            readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+            readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
             readonly name?: string | undefined;
             readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
             readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;
@@ -308,7 +308,7 @@ export declare const FlInputNumber: import("@falcon-ui/falcon-ui/utils").SFCWith
             readonly autofocus?: boolean | undefined;
             readonly rows?: number | undefined;
             readonly ariaLabel?: string | undefined;
-            readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+            readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
             readonly name?: string | undefined;
             readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
             readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;
@@ -540,7 +540,7 @@ export declare const FlInputNumber: import("@falcon-ui/falcon-ui/utils").SFCWith
         readonly autofocus?: boolean | undefined;
         readonly rows?: number | undefined;
         readonly ariaLabel?: string | undefined;
-        readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+        readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         readonly name?: string | undefined;
         readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
         readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;

package/types/components/input-number/src/input-number.vue.d.ts

@@ -67,7 +67,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly autofocus?: boolean | undefined;
         readonly rows?: number | undefined;
         readonly ariaLabel?: string | undefined;
-        readonly inputmode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+        readonly inputmode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
         readonly name?: string | undefined;
         readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
         readonly onChange?: ((value: string, evt?: Event | undefined) => any) | undefined | undefined;

package/types/components/loading/index.d.ts

@@ -0,0 +1,183 @@
+export declare const FlLoading: import("@falcon-ui/falcon-ui/utils").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        readonly active: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly animation: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingAnimation>;
+            readonly default: "searching";
+            readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingAnimation) => boolean;
+        };
+        readonly size: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingSize>;
+            readonly default: 64;
+            readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingSize) => boolean;
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly theme: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingTheme>;
+            readonly default: "auto";
+        };
+        readonly speed: {
+            readonly type: NumberConstructor;
+            readonly default: 1;
+        };
+        readonly paused: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly text: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly layout: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingLayout>;
+            readonly default: "inline";
+        };
+        readonly ariaLabel: {
+            readonly type: StringConstructor;
+            readonly default: "加载中";
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        readonly size: 20 | 32 | 48 | 64 | 96;
+        readonly color: string;
+        readonly text: string;
+        readonly active: boolean;
+        readonly animation: "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "earth";
+        readonly theme: import("@falcon-ui/falcon-ui").FlLoadingTheme;
+        readonly speed: number;
+        readonly paused: boolean;
+        readonly layout: import("@falcon-ui/falcon-ui").FlLoadingLayout;
+        readonly ariaLabel: string;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        readonly active: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly animation: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingAnimation>;
+            readonly default: "searching";
+            readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingAnimation) => boolean;
+        };
+        readonly size: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingSize>;
+            readonly default: 64;
+            readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingSize) => boolean;
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly theme: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingTheme>;
+            readonly default: "auto";
+        };
+        readonly speed: {
+            readonly type: NumberConstructor;
+            readonly default: 1;
+        };
+        readonly paused: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly text: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly layout: {
+            readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingLayout>;
+            readonly default: "inline";
+        };
+        readonly ariaLabel: {
+            readonly type: StringConstructor;
+            readonly default: "加载中";
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        readonly size: 20 | 32 | 48 | 64 | 96;
+        readonly color: string;
+        readonly text: string;
+        readonly active: boolean;
+        readonly animation: "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "earth";
+        readonly theme: import("@falcon-ui/falcon-ui").FlLoadingTheme;
+        readonly speed: number;
+        readonly paused: boolean;
+        readonly layout: import("@falcon-ui/falcon-ui").FlLoadingLayout;
+        readonly ariaLabel: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    readonly active: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly animation: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingAnimation>;
+        readonly default: "searching";
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingAnimation) => boolean;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingSize>;
+        readonly default: 64;
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingSize) => boolean;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly theme: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingTheme>;
+        readonly default: "auto";
+    };
+    readonly speed: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly layout: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingLayout>;
+        readonly default: "inline";
+    };
+    readonly ariaLabel: {
+        readonly type: StringConstructor;
+        readonly default: "加载中";
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    readonly size: 20 | 32 | 48 | 64 | 96;
+    readonly color: string;
+    readonly text: string;
+    readonly active: boolean;
+    readonly animation: "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "earth";
+    readonly theme: import("@falcon-ui/falcon-ui").FlLoadingTheme;
+    readonly speed: number;
+    readonly paused: boolean;
+    readonly layout: import("@falcon-ui/falcon-ui").FlLoadingLayout;
+    readonly ariaLabel: string;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        text?: () => unknown;
+    };
+})>;
+export default FlLoading;
+export { useFlLoading } from './src/use-fl-loading';
+export type { FlLoadingOptions, FlLoadingDirectiveOptions } from './src/use-fl-loading';
+export type { FlLoadingProps, FlLoadingAnimation, FlLoadingSize, FlLoadingTheme, FlLoadingLayout } from './src/loading';

package/types/components/loading/src/FlLoading.vue.d.ts

@@ -0,0 +1,109 @@
+type __VLS_Slots = {
+    text?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly active: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly animation: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingAnimation>;
+        readonly default: "searching";
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingAnimation) => boolean;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingSize>;
+        readonly default: 64;
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingSize) => boolean;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly theme: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingTheme>;
+        readonly default: "auto";
+    };
+    readonly speed: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly layout: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingLayout>;
+        readonly default: "inline";
+    };
+    readonly ariaLabel: {
+        readonly type: StringConstructor;
+        readonly default: "加载中";
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly active: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly animation: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingAnimation>;
+        readonly default: "searching";
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingAnimation) => boolean;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingSize>;
+        readonly default: 64;
+        readonly validator: (v: import("@falcon-ui/falcon-ui").FlLoadingSize) => boolean;
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly theme: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingTheme>;
+        readonly default: "auto";
+    };
+    readonly speed: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly text: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly layout: {
+        readonly type: import("vue").PropType<import("@falcon-ui/falcon-ui").FlLoadingLayout>;
+        readonly default: "inline";
+    };
+    readonly ariaLabel: {
+        readonly type: StringConstructor;
+        readonly default: "加载中";
+    };
+}>> & Readonly<{}>, {
+    readonly size: 20 | 32 | 48 | 64 | 96;
+    readonly color: string;
+    readonly text: string;
+    readonly active: boolean;
+    readonly animation: "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "earth";
+    readonly theme: import("@falcon-ui/falcon-ui").FlLoadingTheme;
+    readonly speed: number;
+    readonly paused: boolean;
+    readonly layout: import("@falcon-ui/falcon-ui").FlLoadingLayout;
+    readonly ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/loading/src/animations/composing.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameRibbon: ModeFrame;

package/types/components/loading/src/animations/earth.d.ts

@@ -0,0 +1,12 @@
+import type { OrbFrame } from '../loading-frame';
+import type { FlLoadingSize } from '../loading';
+export interface EarthPoint {
+    x: number;
+    y: number;
+    z: number;
+    lon: number;
+    land: boolean;
+}
+/** Reconstruct stable geographic positions once, not on every animation frame. */
+export declare function getEarthPoints(size: FlLoadingSize): EarthPoint[];
+export declare function frameEarth(size: FlLoadingSize, time: number): OrbFrame;

package/types/components/loading/src/animations/listening.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameWave: ModeFrame;

package/types/components/loading/src/animations/searching.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameGlobe: ModeFrame;

package/types/components/loading/src/animations/shaping.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameMorph: ModeFrame;

package/types/components/loading/src/animations/solving.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameRubik: ModeFrame;

package/types/components/loading/src/animations/working.d.ts

@@ -0,0 +1,2 @@
+import type { ModeFrame } from '../loading-frame';
+export declare const frameOrbits: ModeFrame;

package/types/components/loading/src/earth-points.d.ts

@@ -0,0 +1,22 @@
+export declare const earthPointData: {
+    readonly '20': {
+        readonly rings: 9;
+        readonly flags: "01100000000000000000000000000000100010000100000011000110011000000000011111100000011001001100011000111010";
+    };
+    readonly '32': {
+        readonly rings: 17;
+        readonly flags: "011001001111000000000000000000000100000000000000000000010000000000000000000000000110000010000000101000000000000111000001110000001110000000000001111000011100000000000000000000001110000011110000001000000000000000100000111111000000000000000000100000001111111010100000000000011000000110011111111000000011110000101001111100000011110001111111100011100001111111000000010000";
+    };
+    readonly '48': {
+        readonly rings: 29;
+        readonly flags: "111011111111001011001111111100000000000000101111000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000001000000000000001100000000000000000000000001100000000000000000001100000000001100000000000011111000000000000000000001110000000001110100000000001111100000000000000000000011111000000001111010000000000011100000000000000000000001111110000000011110000000000000001100000000000000000000011111111000000011111000000000000000010100000000000000000000111100000000001111100000000000100000000000000000000000000011100000000111111111000001000000000000000000000000000000100000000001111111111000001000100000000000000000000000101001000000001111111111100110110000000000000000000001110010000000001111111111001111111100000000000000000111110000000000111110111111111111000000000000000011111100000000100001111111111110010000000000011111100000000101101111111111100000000000111111010000011111111111111100000000011110100000100111111111110100011111010100010111111111111111010010001011111110001001100001000000110000000";
+    };
+    readonly '64': {
+        readonly rings: 37;
+        readonly flags: "111011111111011110011111111100000001000111111111110000000000000000001101111100000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000011100000000000010000000000000001000111000000000000000000000000111100000000000011100000000000000011111110000000000000000000000000111100000000000011110100000000000011111110000000000000000000000000001111110000000000111100100000000000000111110000000000000000000000000001111111100000000001111110100000000000000011000000000000000000000000000001111111110000000000111110000000000000000000000001000000000000000000000000111111111000000000011111100000000000000000000100000000000000000000000000001111110000000000001111111000000000000101100000000000000000000000000000000001111100000000000011111111000000000011001000000000000000000000000000000000001100000000011111111111110000010000010000000000000000000000000000000011000000000000011111111111110000011000110000000000000000000000000000011000010000000000111111111111111000110011000000000000000000000000000011000100000000000111111111111110011111111110000000000000000000000011100000000000000011111111111111111111111100000000000000000000011111110000000000001110000111111111111110000000000000000000011111110000000000010000011101111111111000000000000000000011111111000000000010110010111111111111000000000000001111111101000000111111111111111111110000000000001111101110000011111111111111111110000000001111100100000010101111111111110010011111111010100000111111111111111101111010011000011111111111100001110110000001110000001011101000000000000000000";
+    };
+    readonly '96': {
+        readonly rings: 53;
+        readonly flags: "111111111111001111011111111100111110011111111111110000110111000111111111111110000000000001000000111111111111111100000000000000000000000000110111111110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000000001100000000000000000000000000000000000000000000000001000000000000000000000000011100000000000000000000000000000000000000000000000000001000000000000000000000000011110000000000000000000000000000000000000000000000110000001000000000000000000000000000111100000000000000000011000000000000000000000010000111000000000000000000000000000000000001111100000000000000000111100000000000000000000011111111110000000000000000000000000000000000011111100000000000000001111100000000000000000000011111111110000000000000000000000000000000000000111111100000000000000001111110010000000000000000001111111111000000000000000000000000000000000000001111111100000000000000011111100100000000000000000000111111110000000000000000000000000000000000000001111111110000000000000011111111011000000000000000000001111101000000000000000000000000000000000000000111111111110000000000000001111111100000000000000000000000001101000000000000000000000000000000000000000011111111111100000000000000111111110000000000000000000000000000000100000000000000000000000000000000000000111111111111100000000000000111111100000000000000000000110000000111000000000000000000000000000000000000000111111111111000000000000000111111110000000000000000000101101000111000000000000000000000000000000000000000011111111100000000000000000111111111100000000000000000100110000000000000000000000000000000000000000000000000111111100000000000000000011111111111000000000000000110001000000000000000000000000000000000000000000000000111111000000000000001111111111111111100000000010000010000001000000000000000000000000000000000000000000000011100000000000000111111111111111111100000000000000000000000000000000000000000000000000000000000000011000000000000000000011111111111111111110000000110000011100000000000000000000000000000000000000000001110000000000000000000011111111111111110111000000110001111000000000000000000000000000000000000000001100100010000000000000001111111111111110111110000111101111000000000000000000000000000000000000000011100000000000000000000001111111111111111111100111111111111111000000000000000000000000000000000011100001000000000000000001111111111110111011111111111111111100000000000000000000000000000000111111110000000000000000000111111111111111111111111111111111000000000000000000000000000000111111111000000000000000000111100000011111111111111111111100100000000000000000000000001111111111100000000000000011000000011111011111111111111100100000000000000000000000011111111111000000000000000110100111111001111111111111101000000000000000000000001111111111110000000000000011101110010111111111111111111010000000000000000000111111111101010000000000111111111111111111111111111100000000000000000011111111111111000000000111111111111111111111111111100000000000000011111111011110000000000001111111111111111111110001000000000001111110001100000000000010111111111111111111000100000111111111100100010000000101111111111111111111010001111111111111001000100010111111111111111111110111111001010011000001111111111111111111000001111101110000000101111111100000000010011100000000110000000000011110010000000000000101100000000000000000000";
+    };
+};

package/types/components/loading/src/loading-frame.d.ts

@@ -0,0 +1,4 @@
+import type { ModeOpts } from './loading-profiles';
+import type { OrbFrame } from './loading-geometry';
+export type { Dot, OrbFrame } from './loading-geometry';
+export type ModeFrame = (size: number, time: number, options: ModeOpts) => OrbFrame;

package/types/components/loading/src/loading-geometry.d.ts

@@ -0,0 +1,66 @@
+export interface Dot {
+    x: number;
+    y: number;
+    z: number;
+    r: number;
+    /** Ink value: 0 = darkest ink on paper. Mirrored on dark themes. */
+    white: number;
+    a?: number;
+}
+/** A stroked edge between two projected points (the `connecting` web). */
+export interface Line {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    /** Ink value, same convention as `Dot.white`. */
+    white: number;
+    a?: number;
+    w: number;
+}
+/**
+ * One rendered instant: a complete, final set of draw instructions.
+ * `dots` is already z-sorted into draw order and radius-clamped; `lines`
+ * are drawn first. Nothing here needs further interpretation, which is what
+ * makes a frame portable to any 2D renderer.
+ */
+export interface OrbFrame {
+    dots: Dot[];
+    lines: Line[];
+}
+export type Projector = (x: number, y: number, z: number) => [number, number, number];
+export declare function lerp(a: number, b: number, f: number): number;
+export declare function frac(x: number): number;
+/** Value noise on a 2D lattice — smooth, deterministic, cheap. */
+export declare function vnoise(x: number, y: number): number;
+/** Deterministic hash in [0, 1). */
+export declare function hashD(a: number, b: number): number;
+/** Stable directions on a unit sphere (Fibonacci lattice). */
+export declare function fibDir(i: number, n: number): [number, number, number];
+/** Shortest signed angular distance, wrapped to (-π, π]. */
+export declare function angleDelta(a: number, b: number): number;
+/** Shared spin + tilt + orthographic projection. */
+export declare function makeProj(yaw: number, tilt: number, cx: number, cy: number, scale: number): Projector;
+/**
+ * Painter: z-sort far→near, matte grayscale dots. On dark substrates the
+ * ink value is mirrored (1 - white) so near dots read bright — the same
+ * depth language on an inverted substrate.
+ */
+/** Stroke pass for edge-based modes. Runs before `paint` so nodes sit on top. */
+/**
+ * Turn raw mode output into a finished frame: drop invisible marks, clamp
+ * radii to the mode's floor, and z-sort far→near into draw order.
+ *
+ * This runs in the GEOMETRY step, not the painter, so a frame is a complete
+ * set of draw instructions: every value is final and the array order is the
+ * order to draw in. That is what lets the RN and SwiftUI ports share this
+ * output verbatim — a port draws the list, it never re-derives anything —
+ * and what lets the golden-vector tests compare numbers instead of pixels.
+ */
+export declare function finalizeFrame(dots: Dot[], lines: Line[], rMin?: number): OrbFrame;
+/** Paint a finished frame. Lines first, so nodes sit on top of their edges. */
+/**
+ * Dot radii were tuned for a 300pt frame; sub-linear scaling keeps small
+ * spinners legible. Lower pow = radii shrink less with size.
+ */
+export declare function radiusScale(size: number, pow: number): number;

package/types/components/loading/src/loading-presets.d.ts

@@ -0,0 +1,6 @@
+import type { ModeOpts } from './loading-profiles';
+import type { FlLoadingAnimation, FlLoadingSize } from './loading';
+export declare function resolvePreset(animation: FlLoadingAnimation, size: FlLoadingSize): {
+    speed: number;
+    opts: ModeOpts;
+};

package/types/components/loading/src/loading-profiles.d.ts

@@ -0,0 +1,7 @@
+export interface ModeOpts {
+    [key: string]: number | undefined;
+}
+export declare function scaleCounts(opts: ModeOpts, scale: number): ModeOpts;
+export declare function scaleRadii(opts: ModeOpts, scale: number): ModeOpts;
+/** Base (fine) profiles per mode, before preset multipliers. */
+export declare const BASE_PROFILES: Record<string, ModeOpts>;

package/types/components/loading/src/loading-renderer.d.ts

@@ -0,0 +1,4 @@
+import type { FlLoadingAnimation, FlLoadingSize } from './loading';
+import type { OrbFrame } from './loading-frame';
+export declare function createLoadingFrame(animation: FlLoadingAnimation, size: FlLoadingSize, time: number): OrbFrame;
+export declare function paintLoadingFrame(ctx: CanvasRenderingContext2D, frame: OrbFrame, color: string): void;