@sdata/web-vue 3.25.0 → 3.27.0

package/es/thinking-orb/engine/web.js

@@ -0,0 +1,87 @@
+import { fibDir, frac, hashD, lerp, makeProj, paint, paintLines, radiusScale, vnoise } from "./core.js";
+//#region components/thinking-orb/engine/web.ts
+var drawWeb = (ctx, size, t, dark, o) => {
+	var _o$spread, _o$rsPow, _o$nodeN, _o$thr, _o$nodeR, _o$nodeRDepth, _o$signals;
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = size / 2 * .8 * ((_o$spread = o.spread) !== null && _o$spread !== void 0 ? _o$spread : 1);
+	const pt = makeProj(t * .12, .32, cx, cy, R);
+	const rs = radiusScale(size, (_o$rsPow = o.rsPow) !== null && _o$rsPow !== void 0 ? _o$rsPow : .6);
+	const nodeN = (_o$nodeN = o.nodeN) !== null && _o$nodeN !== void 0 ? _o$nodeN : 30;
+	const thr = (_o$thr = o.thr) !== null && _o$thr !== void 0 ? _o$thr : .72;
+	const nodeR = (_o$nodeR = o.nodeR) !== null && _o$nodeR !== void 0 ? _o$nodeR : 1.4;
+	const nodeRDepth = (_o$nodeRDepth = o.nodeRDepth) !== null && _o$nodeRDepth !== void 0 ? _o$nodeRDepth : 1.8;
+	const nodes = [];
+	for (let i = 0; i < nodeN; i++) {
+		const d = fibDir(i, nodeN);
+		const x = d[0] + .3 * (vnoise(i * .31 + 9, t * .24) - .5) * 2;
+		const y = d[1] + .3 * (vnoise(i * .53 + 27, t * .21) - .5) * 2;
+		const z = d[2] + .3 * (vnoise(i * .77 + 55, t * .27) - .5) * 2;
+		const l = Math.sqrt(x * x + y * y + z * z);
+		nodes.push([
+			x / l,
+			y / l,
+			z / l
+		]);
+	}
+	const lines = [];
+	const dots = [];
+	for (let i = 0; i < nodeN; i++) for (let j = i + 1; j < nodeN; j++) {
+		var _o$lineW;
+		const dx = nodes[i][0] - nodes[j][0];
+		const dy = nodes[i][1] - nodes[j][1];
+		const dz = nodes[i][2] - nodes[j][2];
+		const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+		if (dist >= thr) continue;
+		const [x1, y1, z1] = pt(nodes[i][0], nodes[i][1], nodes[i][2]);
+		const [x2, y2, z2] = pt(nodes[j][0], nodes[j][1], nodes[j][2]);
+		const depth = ((z1 + z2) / 2 + 1) / 2;
+		lines.push({
+			x1,
+			y1,
+			x2,
+			y2,
+			white: .42,
+			a: (1 - dist / thr) * (.3 + .55 * depth),
+			w: Math.max(.6, ((_o$lineW = o.lineW) !== null && _o$lineW !== void 0 ? _o$lineW : .8) * rs)
+		});
+	}
+	for (let i = 0; i < nodeN; i++) {
+		const [px, py, z] = pt(nodes[i][0], nodes[i][1], nodes[i][2]);
+		const depth = (z + 1) / 2;
+		const pulse = 1 + .25 * Math.sin(t * 1.4 + i * 2.7);
+		dots.push({
+			x: px,
+			y: py,
+			z,
+			r: (nodeR + nodeRDepth * depth) * pulse * rs,
+			white: .55 - .45 * depth
+		});
+	}
+	const signals = (_o$signals = o.signals) !== null && _o$signals !== void 0 ? _o$signals : 5;
+	for (let s = 0; s < signals; s++) {
+		const seg = Math.floor(t * .55 + s * 7.31);
+		const a = Math.floor(hashD(seg, s * 3.1 + 1.7) * nodeN);
+		const b = Math.floor(hashD(seg, s * 5.7 + 4.2) * nodeN);
+		if (a === b) continue;
+		const f = frac(t * .55 + s * 7.31);
+		const x = lerp(nodes[a][0], nodes[b][0], f);
+		const y = lerp(nodes[a][1], nodes[b][1], f);
+		const z = lerp(nodes[a][2], nodes[b][2], f);
+		const l = Math.max(1e-6, Math.sqrt(x * x + y * y + z * z));
+		const [px, py, zr] = pt(x / l, y / l, z / l);
+		const depth = (zr + 1) / 2;
+		dots.push({
+			x: px,
+			y: py,
+			z: zr,
+			r: (nodeR * 1.5 + nodeRDepth * depth) * rs,
+			white: .05,
+			a: .5 + .5 * depth
+		});
+	}
+	paintLines(ctx, lines, dark);
+	paint(ctx, dots, dark, o.rMin);
+};
+//#endregion
+export { drawWeb };

package/es/thinking-orb/index.d.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _ThinkingOrb from './thinking-orb.vue';
+declare const ThinkingOrb: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").ThinkingOrbProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./types").ThinkingOrbProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./types").ThinkingOrbProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type ThinkingOrbInstance = InstanceType<typeof _ThinkingOrb>;
+export type { ThinkingOrbProps, ThinkingOrbSize, ThinkingOrbState, ThinkingOrbTheme, } from './types';
+export default ThinkingOrb;

package/es/thinking-orb/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import thinking_orb_default from "./thinking-orb.js";
+//#region components/thinking-orb/index.ts
+var ThinkingOrb = Object.assign(thinking_orb_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + thinking_orb_default.name, thinking_orb_default);
+} });
+//#endregion
+export { ThinkingOrb as default };

package/es/thinking-orb/presets.d.ts

@@ -0,0 +1,10 @@
+import type { ModeOpts } from './engine/profiles';
+import type { OrbSize, OrbState } from './types';
+export type ModeKey = 'orbits' | 'globe' | 'rubik' | 'wave' | 'web' | 'braid' | 'ribbon' | 'ring' | 'morph';
+export declare const STATE_TO_MODE: Record<OrbState, ModeKey>;
+export interface Resolved {
+    mode: ModeKey;
+    speed: number;
+    opts: ModeOpts;
+}
+export declare function resolvePreset(state: OrbState, size: OrbSize): Resolved;

package/es/thinking-orb/presets.js

@@ -0,0 +1,176 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import { BASE_PROFILES, scaleCounts, scaleRadii } from "./engine/profiles.js";
+//#region components/thinking-orb/presets.ts
+var STATE_TO_MODE = {
+	working: "orbits",
+	searching: "globe",
+	solving: "rubik",
+	listening: "wave",
+	connecting: "web",
+	weaving: "braid",
+	composing: "ribbon",
+	breathing: "ring",
+	shaping: "morph"
+};
+var PRESETS = {
+	orbits: {
+		64: {
+			speed: 1.885,
+			count: 1,
+			size: 1
+		},
+		20: {
+			speed: 3.9,
+			count: .238,
+			size: 2.4
+		}
+	},
+	globe: {
+		64: {
+			speed: 2.015,
+			count: .42,
+			size: 1.15,
+			extra: {
+				scanMul: 4.08,
+				dimBase: .45
+			}
+		},
+		20: {
+			speed: 2.665,
+			count: .105,
+			size: 1.75,
+			extra: {
+				scanMul: 4.335,
+				dimBase: .45
+			}
+		}
+	},
+	rubik: {
+		64: {
+			speed: 1.82,
+			count: .35,
+			size: 1.05
+		},
+		20: {
+			speed: 1.95,
+			count: .088,
+			size: 1.9
+		}
+	},
+	wave: {
+		64: {
+			speed: 4.388,
+			count: .341,
+			size: 1
+		},
+		20: {
+			speed: 3.998,
+			count: .105,
+			size: 1.6
+		}
+	},
+	web: {
+		64: {
+			speed: 3.315,
+			count: 1.35,
+			size: .95
+		},
+		20: {
+			speed: 6.63,
+			count: .25,
+			size: 1.52
+		}
+	},
+	braid: {
+		64: {
+			speed: 1.625,
+			count: .5,
+			size: 1
+		},
+		20: {
+			speed: 2.75,
+			count: .1125,
+			size: 1.36
+		}
+	},
+	ribbon: {
+		64: {
+			speed: 2.34,
+			count: .25,
+			size: .85,
+			extra: {
+				spin: 0,
+				bandMul: 3.9,
+				wobMul: 1
+			}
+		},
+		20: {
+			speed: 3.12,
+			count: .051,
+			size: 1.073,
+			extra: {
+				spin: 0,
+				bandMul: 4.94,
+				wobMul: 1
+			}
+		}
+	},
+	ring: {
+		64: {
+			speed: 3.24,
+			count: .25,
+			size: .956,
+			extra: {
+				spin: 0,
+				bandMul: 3.627,
+				wobMul: .368
+			}
+		},
+		20: {
+			speed: 3.78,
+			count: .028,
+			size: 1.622,
+			extra: {
+				spin: 0,
+				bandMul: 3.968,
+				wobMul: .565
+			}
+		}
+	},
+	morph: {
+		64: {
+			speed: 2.405,
+			count: .702,
+			size: .395,
+			extra: { spread: 1.45 }
+		},
+		20: {
+			speed: 2.08,
+			count: .53,
+			size: 1.011,
+			extra: { spread: 1.45 }
+		}
+	}
+};
+var cache = /* @__PURE__ */ new Map();
+/** Resolve a (state, size) pair to its mode + fully-scaled draw options. */
+function resolvePreset(state, size) {
+	const key = `${state}-${size}`;
+	const hit = cache.get(key);
+	if (hit) return hit;
+	const mode = STATE_TO_MODE[state];
+	const preset = PRESETS[mode][size];
+	let opts = _objectSpread2({}, BASE_PROFILES[mode]);
+	if (preset.count !== 1) opts = scaleCounts(opts, preset.count);
+	if (preset.size !== 1) opts = scaleRadii(opts, preset.size);
+	if (preset.extra) opts = _objectSpread2(_objectSpread2({}, opts), preset.extra);
+	const resolved = {
+		mode,
+		speed: preset.speed,
+		opts
+	};
+	cache.set(key, resolved);
+	return resolved;
+}
+//#endregion
+export { STATE_TO_MODE, resolvePreset };

package/es/thinking-orb/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/thinking-orb/style/index.css

@@ -0,0 +1,20 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-thinking-orb {
+  display: block;
+}

package/es/thinking-orb/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/thinking-orb/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

package/es/thinking-orb/style/index.scss

@@ -0,0 +1,8 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$thinking-orb-prefix-cls: string.unquote('#{theme.$prefix}-thinking-orb');
+
+.#{$thinking-orb-prefix-cls} {
+  display: block;
+}

package/es/thinking-orb/thinking-orb.js

@@ -0,0 +1,5 @@
+import thinking_orb_vue_vue_type_script_setup_true_lang_default from "./thinking-orb.vue_vue_type_script_setup_true_lang.js";
+//#region components/thinking-orb/thinking-orb.vue
+var thinking_orb_default = thinking_orb_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { thinking_orb_default as default };

package/es/thinking-orb/thinking-orb.vue.d.ts

@@ -0,0 +1,4 @@
+import type { ThinkingOrbProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<ThinkingOrbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThinkingOrbProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/thinking-orb/thinking-orb.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,140 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useI18n } from "../locale/index.js";
+import { useThemeMode } from "../_hooks/use-theme-mode.js";
+import { MODE_DRAWS } from "./engine/registry.js";
+import { resolvePreset } from "./presets.js";
+import { computed, createElementBlock, defineComponent, mergeProps, onMounted, onUnmounted, openBlock, ref, shallowRef, useAttrs, watch } from "vue";
+//#region components/thinking-orb/thinking-orb.vue?vue&type=script&setup=true&lang.ts
+var thinking_orb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "ThinkingOrb",
+	inheritAttrs: false
+}), {}, {
+	__name: "thinking-orb",
+	props: {
+		state: { default: "working" },
+		size: { default: 64 },
+		theme: { default: "auto" },
+		speed: { default: 1 },
+		paused: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const attrs = useAttrs();
+		const canvasRef = ref(null);
+		const inheritedTheme = useThemeMode(canvasRef);
+		const reducedMotion = shallowRef(false);
+		const prefixCls = getPrefixCls("thinking-orb");
+		const { t } = useI18n();
+		const isDark = computed(() => __props.theme === "auto" ? inheritedTheme.value === "dark" : __props.theme === "dark");
+		const resolvedSize = computed(() => __props.size === 20 || __props.size === 64 ? __props.size : 64);
+		const canvasAttrs = computed(() => mergeProps({
+			"class": prefixCls,
+			"role": "img",
+			"aria-label": t(`a11y.thinkingOrb.${__props.state}`),
+			"data-theme": isDark.value ? "dark" : "light",
+			"data-state": __props.state,
+			"style": {
+				width: `${resolvedSize.value}px`,
+				height: `${resolvedSize.value}px`
+			}
+		}, attrs));
+		let stopRenderer;
+		let stopReducedMotion;
+		function setupRenderer() {
+			stopRenderer === null || stopRenderer === void 0 || stopRenderer();
+			stopRenderer = void 0;
+			const canvas = canvasRef.value;
+			if (!canvas) return;
+			const representativePhase = .6;
+			const sz = resolvedSize.value;
+			const dpr = Math.min(2, window.devicePixelRatio || 1);
+			canvas.width = Math.round(sz * dpr);
+			canvas.height = Math.round(sz * dpr);
+			const context = canvas.getContext("2d");
+			if (!context) return;
+			const { mode, speed: presetSpeed, opts } = resolvePreset(__props.state, sz);
+			const draw = MODE_DRAWS[mode];
+			const effectiveSpeed = presetSpeed * __props.speed;
+			const drawFrame = (time) => {
+				context.setTransform(dpr, 0, 0, dpr, 0, 0);
+				context.clearRect(0, 0, sz, sz);
+				draw(context, sz, time, isDark.value, opts);
+			};
+			if (reducedMotion.value) {
+				drawFrame(representativePhase);
+				return;
+			}
+			let animationFrame = 0;
+			let running = false;
+			let visible = true;
+			const loop = () => {
+				drawFrame(performance.now() / 1e3 * effectiveSpeed);
+				if (running) animationFrame = requestAnimationFrame(loop);
+			};
+			const start = () => {
+				if (running || __props.paused) return;
+				running = true;
+				animationFrame = requestAnimationFrame(loop);
+			};
+			const stop = () => {
+				running = false;
+				cancelAnimationFrame(animationFrame);
+			};
+			drawFrame(__props.paused ? representativePhase : performance.now() / 1e3 * effectiveSpeed);
+			const observer = typeof IntersectionObserver === "undefined" ? void 0 : new IntersectionObserver(([entry]) => {
+				var _entry$isIntersecting;
+				visible = (_entry$isIntersecting = entry === null || entry === void 0 ? void 0 : entry.isIntersecting) !== null && _entry$isIntersecting !== void 0 ? _entry$isIntersecting : false;
+				if (visible && document.visibilityState !== "hidden") start();
+				else stop();
+			});
+			observer === null || observer === void 0 || observer.observe(canvas);
+			const handleVisibilityChange = () => {
+				if (document.visibilityState === "hidden") stop();
+				else if (visible) start();
+			};
+			document.addEventListener("visibilitychange", handleVisibilityChange);
+			if (!observer) start();
+			stopRenderer = () => {
+				stop();
+				observer === null || observer === void 0 || observer.disconnect();
+				document.removeEventListener("visibilitychange", handleVisibilityChange);
+			};
+		}
+		function setupReducedMotion() {
+			const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+			const update = () => {
+				reducedMotion.value = mediaQuery.matches;
+			};
+			update();
+			mediaQuery.addEventListener("change", update);
+			stopReducedMotion = () => mediaQuery.removeEventListener("change", update);
+		}
+		watch([
+			() => __props.state,
+			resolvedSize,
+			() => __props.speed,
+			() => __props.paused,
+			isDark,
+			reducedMotion
+		], setupRenderer, { flush: "post" });
+		onMounted(() => {
+			setupReducedMotion();
+			setupRenderer();
+		});
+		onUnmounted(() => {
+			stopRenderer === null || stopRenderer === void 0 || stopRenderer();
+			stopReducedMotion === null || stopReducedMotion === void 0 || stopReducedMotion();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("canvas", mergeProps({
+				ref_key: "canvasRef",
+				ref: canvasRef
+			}, canvasAttrs.value), null, 16);
+		};
+	}
+}));
+//#endregion
+export { thinking_orb_vue_vue_type_script_setup_true_lang_default as default };

package/es/thinking-orb/types.d.ts

@@ -0,0 +1,12 @@
+export type ThinkingOrbState = 'working' | 'searching' | 'solving' | 'listening' | 'connecting' | 'weaving' | 'composing' | 'breathing' | 'shaping';
+export type ThinkingOrbSize = 20 | 64;
+export type ThinkingOrbTheme = 'auto' | 'dark' | 'light';
+export type OrbState = ThinkingOrbState;
+export type OrbSize = ThinkingOrbSize;
+export interface ThinkingOrbProps {
+    state?: ThinkingOrbState;
+    size?: ThinkingOrbSize;
+    theme?: ThinkingOrbTheme;
+    speed?: number;
+    paused?: boolean;
+}

package/json/vetur-attributes.json

@@ -4000,6 +4000,23 @@
   "sd-textarea/textarea-attrs": {
     "description": "Attributes passed to textarea"
   },
+  "sd-thinking-orb/state": {
+    "description": "Current thinking state"
+  },
+  "sd-thinking-orb/size": {
+    "description": "Purpose-tuned rendered size"
+  },
+  "sd-thinking-orb/theme": {
+    "description": "Theme mode; auto follows the nearest sd-theme container"
+  },
+  "sd-thinking-orb/speed": {
+    "description": "Animation speed multiplier",
+    "type": "number"
+  },
+  "sd-thinking-orb/paused": {
+    "description": "Whether the animation is paused",
+    "type": "boolean"
+  },
   "sd-time-picker/change": {
     "description": "The component value changes"
   },

package/json/vetur-tags.json

@@ -1657,6 +1657,15 @@
   "sd-theme-provider": {
     "attributes": []
   },
+  "sd-thinking-orb": {
+    "attributes": [
+      "state",
+      "size",
+      "theme",
+      "speed",
+      "paused"
+    ]
+  },
   "sd-time-picker": {
     "attributes": [
       "change",

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.24.1",
+  "version": "3.26.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -9796,6 +9796,53 @@
           "events": [],
           "slots": []
         },
+        {
+          "name": "sd-thinking-orb",
+          "attributes": [
+            {
+              "name": "state",
+              "description": "Current thinking state",
+              "value": {
+                "type": "ThinkingOrbState",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "size",
+              "description": "Purpose-tuned rendered size",
+              "value": {
+                "type": "ThinkingOrbSize",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "theme",
+              "description": "Theme mode; auto follows the nearest sd-theme container",
+              "value": {
+                "type": "ThinkingOrbTheme",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "speed",
+              "description": "Animation speed multiplier",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "paused",
+              "description": "Whether the animation is paused",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "sd-time-picker",
           "attributes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.25.0",
+  "version": "3.27.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",

package/es/locale/lang/ar-eg.d.ts

@@ -1,3 +0,0 @@
-import { SdLang } from '../interface';
-declare const lang: SdLang;
-export default lang;