@mkbabb/glass-ui 3.9.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{MetricBadge-lTc002u2.js → MetricBadge-BZVWIxNy.js} +6 -4
- package/dist/{Notification-BxK8LZMw.js → Notification-DLMhblXR.js} +2 -2
- package/dist/{Switch-LDKLmmgx.js → Switch-Ch-k3Rv-.js} +1 -1
- package/dist/animated-digit.js +1 -1
- package/dist/api/index.d.ts +1 -0
- package/dist/api.js +1 -1
- package/dist/aurora.js +236 -545
- package/dist/{badge-BvwvT50i.js → badge-CaoFJzRb.js} +1 -1
- package/dist/badge.js +1 -1
- package/dist/color.js +1 -1
- package/dist/{compile-DAjIoEy2.js → compile-BOXjLUxu.js} +23 -23
- package/dist/components/custom/aurora/composables/atoms.d.ts +21 -4
- package/dist/components/custom/aurora/composables/runtime.d.ts +0 -9
- package/dist/components/custom/aurora/composables/uniformBridge.d.ts +0 -11
- package/dist/components/custom/aurora/constants/renderMode.d.ts +0 -32
- package/dist/components/custom/aurora/constants/shaders/brush.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/constants/shaders/mediums.glsl.d.ts +2 -2
- package/dist/components/custom/aurora/constants/shaders/tonemap.glsl.d.ts +1 -1
- package/dist/components/custom/aurora/index.d.ts +1 -1
- package/dist/components/custom/constellation/Constellation.vue.d.ts +73 -1
- package/dist/components/custom/constellation/constellationField.d.ts +255 -3
- package/dist/components/custom/constellation/index.d.ts +2 -2
- package/dist/components/custom/dock/DockTabButton.vue.d.ts +4 -3
- package/dist/components/custom/expandable-container/ExpandableContainer.vue.d.ts +29 -0
- package/dist/components/custom/fourier-field/FourierField.vue.d.ts +6 -0
- package/dist/components/custom/fourier-field/index.d.ts +25 -1
- package/dist/components/custom/fourier-field/math.d.ts +3 -8
- package/dist/components/custom/goo-blob/GooBlob.vue.d.ts +8 -10
- package/dist/components/custom/goo-blob/composables/useMetaballRenderer.d.ts +6 -14
- package/dist/components/custom/goo-blob/index.d.ts +1 -1
- package/dist/components/custom/goo-blob/types.d.ts +59 -25
- package/dist/components/custom/handmark/HandMark.vue.d.ts +29 -0
- package/dist/components/custom/handmark/brush.d.ts +219 -0
- package/dist/components/custom/handmark/freehand.d.ts +69 -0
- package/dist/components/custom/handmark/geometry.d.ts +32 -0
- package/dist/components/custom/handmark/index.d.ts +21 -0
- package/dist/components/custom/handmark/ink.d.ts +11 -0
- package/dist/components/custom/handmark/texture.d.ts +39 -0
- package/dist/components/custom/handmark/types.d.ts +53 -0
- package/dist/components/custom/handmark/useHandMark.d.ts +66 -0
- package/dist/components/custom/metric-badge/MetricBadge.vue.d.ts +8 -0
- package/dist/components/ui/slider/index.d.ts +20 -16
- package/dist/composables/color/index.d.ts +12 -7
- package/dist/composables/glass/webgl/shaders/procedural-color.glsl.d.ts +1 -6
- package/dist/composables/motion/core/index.d.ts +1 -0
- package/dist/composables/motion/useRouteTransition.d.ts +42 -0
- package/dist/constellation.js +212 -72
- package/dist/controls.js +1 -1
- package/dist/dark.js +1 -1
- package/dist/dock.js +1 -0
- package/dist/expandable-container.js +61 -38
- package/dist/forms.js +2 -2
- package/dist/fourier-field.js +89 -97
- package/dist/fourier-math.d.ts +1 -0
- package/dist/fourier-math.js +2 -0
- package/dist/glass-panel.js +1 -1
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +81 -80
- package/dist/goo-blob.js +299 -284
- package/dist/handmark.d.ts +1 -0
- package/dist/handmark.js +609 -0
- package/dist/icon-tooltip.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/keyboard.js +1 -1
- package/dist/labeled-field.js +4 -4
- package/dist/math-DTpRVC0e.js +27 -0
- package/dist/metric-badge.js +1 -1
- package/dist/metric-stack.js +1 -1
- package/dist/motion-core.js +70 -69
- package/dist/motion.js +2 -2
- package/dist/notification.js +1 -1
- package/dist/search.js +2 -2
- package/dist/{slider-DC2mwuoe.js → slider-CyzcxBoh.js} +6 -6
- package/dist/slider.js +1 -1
- package/dist/styles/animations.css +74 -18
- package/dist/styles/cards.css +2 -2
- package/dist/styles/components.css +1 -1
- package/dist/styles/dock/layer-group.css +16 -4
- package/dist/styles/dock-controls.css +39 -23
- package/dist/styles/drawer.css +12 -4
- package/dist/styles/glass.css +145 -9
- package/dist/styles/paper.css +68 -2
- package/dist/styles/theme.css +7 -0
- package/dist/styles/tokens.css +101 -15
- package/dist/styles/transitions.css +20 -2
- package/dist/styles/utilities.css +130 -40
- package/dist/styles/view-transition.css +51 -0
- package/dist/switch.js +1 -1
- package/dist/{useAnimatedNumber-C5I3wWd8.js → useAnimatedNumber-Bcpy5Etf.js} +1 -1
- package/dist/{useGlassRenderer-5I0YkI4t.js → useGlassRenderer-D7YGOYiM.js} +1 -1
- package/dist/useViewTransition-DaN5Zrox.js +21 -0
- package/dist/vReveal-zUIQk-rJ.js +53 -0
- package/dist/watercolor-dot.js +1 -1
- package/package.json +51 -9
- package/src/styles/animations.css +74 -18
- package/src/styles/cards.css +2 -2
- package/src/styles/dock/layer-group.css +16 -4
- package/src/styles/dock-controls.css +39 -23
- package/src/styles/drawer.css +12 -4
- package/src/styles/glass.css +145 -9
- package/src/styles/paper.css +68 -2
- package/src/styles/theme.css +7 -0
- package/src/styles/tokens.css +101 -15
- package/src/styles/transitions.css +20 -2
- package/src/styles/utilities.css +130 -40
- package/src/styles/view-transition.css +51 -0
- package/dist/components/custom/aurora/composables/gpuRuntime.d.ts +0 -16
- package/dist/components/custom/aurora/constants/shaders/aurora.wgsl.d.ts +0 -7
- package/dist/composables/glass/createGPUCanvas.d.ts +0 -40
- package/dist/vReveal-CqaCz_mC.js +0 -44
- /package/dist/{IconTooltip-yefK7cJc.js → IconTooltip-Cus0fvK0.js} +0 -0
- /package/dist/{Input-DWQQIOC4.js → Input-xuDwALQR.js} +0 -0
- /package/dist/{color-8jBjWiJ6.js → color-C5ls_QF7.js} +0 -0
- /package/dist/{constants-CS75AWHG.js → constants-yKeKnE84.js} +0 -0
- /package/dist/{presets-BKVyQfbt.js → presets-Dkdv55Gt.js} +0 -0
- /package/dist/{prng-wHuHlNHE.js → prng-D27-B3tK.js} +0 -0
- /package/dist/{useGlobalDark-yhL4Wp-s.js → useGlobalDark-d6waty-X.js} +0 -0
- /package/dist/{useIntersectionPause-Cc-H9ees.js → useIntersectionPause-Cck5Uxk8.js} +0 -0
- /package/dist/{useKeyboardShortcuts-Be3w_Rwk.js → useKeyboardShortcuts-CyIYrndH.js} +0 -0
- /package/dist/{useScrollProgress-CAH8Ofwt.js → useScrollProgress-CffFGLa5.js} +0 -0
- /package/dist/{useTextHighlight-DON84L8w.js → useTextHighlight-CWEi25hf.js} +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'vue';
|
|
2
2
|
type MetricBadgeSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
3
|
type MetricBadgeLabelPosition = 'inline' | 'stacked';
|
|
4
|
+
type MetricBadgeVariant = 'default' | 'record';
|
|
4
5
|
type __VLS_Props = {
|
|
5
6
|
amount: string | number | null | undefined;
|
|
6
7
|
unit?: string;
|
|
@@ -29,10 +30,17 @@ type __VLS_Props = {
|
|
|
29
30
|
* rung (`text-mono-prose` amount, `text-prose` unit) for hero
|
|
30
31
|
* placements that need to read at chassis distance. */
|
|
31
32
|
size?: MetricBadgeSize;
|
|
33
|
+
/** Surface register. `default` is the canonical 5-tier glass pill;
|
|
34
|
+
* `record` is the GILT pill (D6.b) — a 1px `--gold-rim` tooled edge +
|
|
35
|
+
* `--gold-ink` amount + a faint ≤8% gold wash (never opaque). Gold marks
|
|
36
|
+
* the SUPERLATIVE, exactly one per view: the all-time-high / peak figure.
|
|
37
|
+
* The medal reads as earned, not as a fourth data color. */
|
|
38
|
+
variant?: MetricBadgeVariant;
|
|
32
39
|
class?: HTMLAttributes['class'];
|
|
33
40
|
};
|
|
34
41
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
35
42
|
size: MetricBadgeSize;
|
|
43
|
+
variant: MetricBadgeVariant;
|
|
36
44
|
placeholder: string;
|
|
37
45
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
38
46
|
declare const _default: typeof __VLS_export;
|
|
@@ -9,28 +9,32 @@ export { default as Slider } from './Slider.vue';
|
|
|
9
9
|
* `.slider-thumb` paint. The size axis lifts pure geometry via CSS vars
|
|
10
10
|
* (`--slider-track-height`, `--slider-thumb-size`) the SFC defaults read.
|
|
11
11
|
*
|
|
12
|
-
* Exactly two canonical recipes ship
|
|
13
|
-
* standard — the
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* fill
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* the
|
|
12
|
+
* Exactly two canonical recipes ship:
|
|
13
|
+
* standard — the CONTINUOUS ROUNDED CYLINDER: a THICK glass capsule track with
|
|
14
|
+
* the round knob INSCRIBED inside it (knob diameter = track height −
|
|
15
|
+
* 2×inset, inset 2px) so the whole reads as ONE continuous piece — a
|
|
16
|
+
* ball-bearing seated in the cylinder, never a floating disc on a
|
|
17
|
+
* wire. The fill is the W52 liquid-glass material (backdrop + edge
|
|
18
|
+
* rim, tinted to `--primary`) pulled along the capsule; the knob
|
|
19
|
+
* rides ON it with zero protrusion (`thumbAlignment: 'contain'`).
|
|
20
|
+
* The reka SliderThumb stays mounted (a11y/keyboard/focus) and
|
|
21
|
+
* carries a faint specular grip. Halo-on-state + the iOS press
|
|
22
|
+
* spring. This is the general-purpose glass scrubber and the default.
|
|
22
23
|
* spectrum — the value.js gradient-track color slider: a tall capsule whose
|
|
23
24
|
* background is a consumer-supplied `--slider-track-bg`
|
|
24
25
|
* linear-gradient (the LCH/hue ramp), a transparent range, and a
|
|
25
26
|
* SQUIRCLE thumb the HEIGHT of the track (the iOS color-picker
|
|
26
27
|
* idiom — `corner-shape: superellipse()` via `--corner-shape-thumb`,
|
|
27
|
-
* @supports-gated over a
|
|
28
|
-
*
|
|
28
|
+
* @supports-gated over a generous proportional round fallback that
|
|
29
|
+
* reads squircle-adjacent cross-engine). This is the aurora/blob
|
|
30
|
+
* color-picking surface. The spectrum already obeys the containment
|
|
31
|
+
* law the standard cylinder now matches (thumb inscribed, protrusion 0).
|
|
29
32
|
*
|
|
30
|
-
* Sizes:
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
33
|
+
* Sizes — the standard cylinder inscribes the knob: track height = thumb + 4px
|
|
34
|
+
* (a 2px inset reveal each side), thumb diameter ≤ track height at every rung:
|
|
35
|
+
* sm — 12px track / 8px thumb
|
|
36
|
+
* md — 20px track / 16px thumb (default)
|
|
37
|
+
* lg — 28px track / 24px thumb
|
|
34
38
|
*/
|
|
35
39
|
export declare const sliderVariants: (props?: ({
|
|
36
40
|
variant?: "standard" | "spectrum" | null | undefined;
|
|
@@ -5,9 +5,13 @@ export interface OklchStop {
|
|
|
5
5
|
h: number;
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* A color seam: resolves a CSS color string to a GAMMA-sRGB triple in [0,1].
|
|
9
|
+
* `defaultBlobColorResolver` is the shipped default. A general-purpose injection
|
|
10
|
+
* type — the `<FourierField>` background takes it as a REQUIRED `colorResolver`
|
|
11
|
+
* prop (the SVG-field surface owns its own color pipeline). The goo-blob no longer
|
|
12
|
+
* injects it: it resolves color internally through `cssToOklch → oklchToGammaRgb`
|
|
13
|
+
* (W-BLOB3 STRIPPED the speculative DI built for an absent value.js consumer that
|
|
14
|
+
* never repatriated; see `docs/consumer-evidence/goo-blob.md`).
|
|
11
15
|
*/
|
|
12
16
|
export type ColorResolver = (css: string) => [number, number, number];
|
|
13
17
|
/**
|
|
@@ -60,10 +64,11 @@ export declare function cssToOklch(css: string): OklchStop;
|
|
|
60
64
|
/** OKLCh stop → `#rrggbb` gamma hex (value.js `oklabToRgb255`). */
|
|
61
65
|
export declare function oklchStopToHex(s: OklchStop): string;
|
|
62
66
|
/**
|
|
63
|
-
* The
|
|
64
|
-
* `cssToOklch → oklchToGammaRgb
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
+
* The shipped default `ColorResolver` — `(css) => gamma [r,g,b]` via
|
|
68
|
+
* `cssToOklch → oklchToGammaRgb` (the GAMMA exit; `proof:blob-space-gamma` witnesses
|
|
69
|
+
* the `oklchToGammaRgb` resolve). The `<FourierField>` background passes THIS as its
|
|
70
|
+
* `colorResolver` prop. The goo-blob inlines this exact body internally (W-BLOB3 —
|
|
71
|
+
* no DI seam).
|
|
67
72
|
*/
|
|
68
73
|
export declare const defaultBlobColorResolver: ColorResolver;
|
|
69
74
|
/**
|
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
export declare const OETF_GLSL = "\nfloat srgbToLinearCh(float c) {\n return c <= 0.04045 ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);\n}\nvec3 srgbToLinear(vec3 c) {\n return vec3(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\n\nfloat linearToSrgbCh(float c) {\n return c <= 0.0031308 ? c * 12.92 : 1.055 * pow(c, 1.0 / 2.4) - 0.055;\n}\nvec3 linearToSrgb(vec3 c) {\n return vec3(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}";
|
|
2
2
|
export declare const FBM_ROT_GLSL = "const mat2 FBM_ROT = mat2(0.8, 0.6, -0.6, 0.8);";
|
|
3
3
|
export declare const OKLCH_MATRICES_GLSL = "\n// value.js LINEAR_SRGB_TO_LMS (constants.ts), row-major; written here as GLSL\n// columns (= the transpose) so mat3 * vec3 evaluates the row-major M\u00B7v.\nconst mat3 LINEAR_SRGB_TO_LMS = mat3(\n 0.4122214708, 0.2119034982, 0.0883024619,\n 0.5363325363, 0.6806995451, 0.2817188376,\n 0.0514459929, 0.1073969566, 0.6299787005\n);\n\n// value.js srgbToOKLab's INLINE LMS\u2192OKLab coefficients (gamut.ts lines 295-297 \u2014\n// these differ at the ~1e-9 digit from LMS_TO_OKLAB_MATRIX; use the inline ones to\n// mirror the exact value.js path), row-major \u2192 GLSL columns.\nconst mat3 LMS_TO_OKLAB = mat3(\n 0.2104542553, 1.9779984951, 0.0259040371,\n 0.7936177850, -2.4285922050, 0.7827717662,\n -0.0040720468, 0.4505937099, -0.8086757660\n);\n\n// value.js OKLAB_TO_LMS_COEFF (constants.ts), row-major \u2192 GLSL columns. Rows:\n// l = [1, 0.3963377774, 0.2158037573], m = [1, -0.1055613458, -0.0638541728],\n// s = [1, -0.0894841775, -1.2914855480].\nconst mat3 OKLAB_TO_LMS = mat3(\n 1.0, 1.0, 1.0,\n 0.3963377774, -0.1055613458, -0.0894841775,\n 0.2158037573, -0.0638541728, -1.2914855480\n);\n\n// value.js LMS_TO_LINEAR_SRGB (constants.ts), row-major \u2192 GLSL columns.\nconst mat3 LMS_TO_LINEAR_SRGB = mat3(\n 4.0767416621, -1.2684380046, -0.0041960863,\n -3.3077115913, 2.6097574011, -0.7034186147,\n 0.2309699292, -0.3413193965, 1.7076147010\n);\n\n// Gamma sRGB \u2192 raw OKLab (L, a, b). Mirrors value.js srgbToOKLab.\nvec3 srgbToOklab(vec3 c) {\n vec3 lin = srgbToLinear(c);\n vec3 lms = LINEAR_SRGB_TO_LMS * lin;\n vec3 lmsCbrt = sign(lms) * pow(abs(lms), vec3(1.0 / 3.0));\n return LMS_TO_OKLAB * lmsCbrt;\n}\n\n// Raw OKLab (L, a, b) \u2192 linear sRGB. Mirrors value.js oklabToLinearSRGB.\nvec3 oklabToLinearSrgb(vec3 lab) {\n vec3 lms_ = OKLAB_TO_LMS * lab;\n vec3 lms = lms_ * lms_ * lms_;\n return LMS_TO_LINEAR_SRGB * lms;\n}\n\n// OKLab \u2192 OKLCh: H in RADIANS. Mirrors value.js rawOklabToOklch (which returns\n// degrees; we stay in radians and only fold to [0, 2pi)).\nvec3 oklabToOklch(vec3 lab) {\n float C = length(lab.yz);\n float H = atan(lab.z, lab.y);\n if (H < 0.0) H += 2.0 * PI;\n return vec3(lab.x, C, H);\n}\n\n// OKLCh (H radians) \u2192 OKLab. Mirrors value.js rawOklchToOklab.\nvec3 oklchToOklab(vec3 lch) {\n return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}";
|
|
4
|
-
export declare const PALETTE_RAMP_GLSL = "\n// value.js interpolateHue in the NORMALIZED-TURNS domain (h_rad/TAU \u2192 turns, the\n// exact .5/+1.0 branch per method, fract() wrap, *TAU back). A radians-native port\n// (PI thresholds / +TAU wrap) diverges 180\u00B0 at the antipode. methods: 0 shorter,\n// 1 longer, 2 increasing, 3 decreasing.\nfloat interpolateHueTurns(float h0, float h1, float t, int method) {\n float TAU = 2.0 * PI;\n float a = h0 / TAU;\n float b = h1 / TAU;\n float i = b - a;\n if (method == 0) { // shorter\n if (i > 0.5) a += 1.0; else if (i < -0.5) b += 1.0;\n } else if (method == 1) { // longer\n if (i > 0.0 && i < 0.5) a += 1.0; else if (i > -0.5 && i <= 0.0) b += 1.0;\n } else if (method == 2) { // increasing\n if (i < 0.0) b += 1.0;\n } else { // decreasing\n if (i > 0.0) a += 1.0;\n }\n float r = a + t * (b - a);\n r = fract(r); // (r % 1 + 1) % 1 \u2014 fract is non-negative in GLSL\n return r * TAU; // back to radians\n}\n\n// Linear-sRGB endpoint pair \u2192 OKLab-rectangular interpolation \u2192 linear sRGB. Holds\n// chroma across the ramp (no grey midpoint). The default/shorter ramp path.\nvec3 mixPaletteOklab(vec3 linA, vec3 linB, float t) {\n vec3 labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3(1.0 / 3.0)));\n vec3 labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3(1.0 / 3.0)));\n vec3 lab = mix(labA, labB, t);\n return oklabToLinearSrgb(lab);\n}\n\n// Linear-sRGB endpoint pair \u2192 OKLCh interpolation along the huePath arc \u2192 linear\n// sRGB. L and C lerp; H walks the chosen arc. The deliberate-rainbow path.\nvec3 mixPaletteOklchArc(vec3 linA, vec3 linB, float t, int method) {\n vec3 labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3(1.0 / 3.0)));\n vec3 labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3(1.0 / 3.0)));\n vec3 lchA = oklabToOklch(labA);\n vec3 lchB = oklabToOklch(labB);\n float L = mix(lchA.x, lchB.x, t);\n float C = mix(lchA.y, lchB.y, t);\n float H = interpolateHueTurns(lchA.z, lchB.z, t, method);\n return oklabToLinearSrgb(oklchToOklab(vec3(L, C, H)));\n}\n\n// The ramp dispatcher
|
|
4
|
+
export declare const PALETTE_RAMP_GLSL = "\n// value.js interpolateHue in the NORMALIZED-TURNS domain (h_rad/TAU \u2192 turns, the\n// exact .5/+1.0 branch per method, fract() wrap, *TAU back). A radians-native port\n// (PI thresholds / +TAU wrap) diverges 180\u00B0 at the antipode. methods: 0 shorter,\n// 1 longer, 2 increasing, 3 decreasing.\nfloat interpolateHueTurns(float h0, float h1, float t, int method) {\n float TAU = 2.0 * PI;\n float a = h0 / TAU;\n float b = h1 / TAU;\n float i = b - a;\n if (method == 0) { // shorter\n if (i > 0.5) a += 1.0; else if (i < -0.5) b += 1.0;\n } else if (method == 1) { // longer\n if (i > 0.0 && i < 0.5) a += 1.0; else if (i > -0.5 && i <= 0.0) b += 1.0;\n } else if (method == 2) { // increasing\n if (i < 0.0) b += 1.0;\n } else { // decreasing\n if (i > 0.0) a += 1.0;\n }\n float r = a + t * (b - a);\n r = fract(r); // (r % 1 + 1) % 1 \u2014 fract is non-negative in GLSL\n return r * TAU; // back to radians\n}\n\n// Linear-sRGB endpoint pair \u2192 OKLab-rectangular interpolation \u2192 linear sRGB. Holds\n// chroma across the ramp (no grey midpoint). The default/shorter ramp path.\nvec3 mixPaletteOklab(vec3 linA, vec3 linB, float t) {\n vec3 labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3(1.0 / 3.0)));\n vec3 labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3(1.0 / 3.0)));\n vec3 lab = mix(labA, labB, t);\n return oklabToLinearSrgb(lab);\n}\n\n// Linear-sRGB endpoint pair \u2192 OKLCh interpolation along the huePath arc \u2192 linear\n// sRGB. L and C lerp; H walks the chosen arc. The deliberate-rainbow path.\nvec3 mixPaletteOklchArc(vec3 linA, vec3 linB, float t, int method) {\n vec3 labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3(1.0 / 3.0)));\n vec3 labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3(1.0 / 3.0)));\n vec3 lchA = oklabToOklch(labA);\n vec3 lchB = oklabToOklch(labB);\n float L = mix(lchA.x, lchB.x, t);\n float C = mix(lchA.y, lchB.y, t);\n float H = interpolateHueTurns(lchA.z, lchB.z, t, method);\n return oklabToLinearSrgb(oklchToOklab(vec3(L, C, H)));\n}\n\n// The ramp dispatcher aurora's samplePalette splices. tRaw is the raw inter-stop\n// parameter [0,1]; the smoothstep ease + the huePath branch live HERE so the ramp is\n// one source. increasing(2)/decreasing(3) take the OKLCh hue-arc (rainbow sweep);\n// every other method takes the OKLab-rectangular straight line (no hue detour).\nvec3 samplePaletteRamp(vec3 a, vec3 b, float tRaw, int huePath) {\n float t = smoothstep(0.0, 1.0, tRaw);\n if (huePath == 2 || huePath == 3) {\n return mixPaletteOklchArc(a, b, t, huePath);\n }\n return mixPaletteOklab(a, b, t);\n}";
|
|
5
5
|
export declare const PCG_HASH_GLSL = "\n// Jarzynski PCG2D \u2014 uvec2 \u2192 uvec2 permuted-congruential hash (JCGT 2020).\nuvec2 pcg2d(uvec2 v) {\n v = v * 1664525u + 1013904223u;\n v.x += v.y * 1664525u;\n v.y += v.x * 1664525u;\n v = v ^ (v >> 16u);\n v.x += v.y * 1664525u;\n v.y += v.x * 1664525u;\n v = v ^ (v >> 16u);\n return v;\n}\n\n// Float\u2192[0,1) scalar hash: bit-reinterpret the lattice coordinate, pcg2d it, take the\n// high word back to [0,1). Integer-bit \u2014 no sin() periodicity, no float-fract lattice.\nfloat pcgHash2(vec2 p) {\n uvec2 u = floatBitsToUint(p);\n return float(pcg2d(u).x) * (1.0 / 4294967296.0);\n}\n\n// Integer-lattice gradient: pcg2d the integer cell, fold the hash to an angle, return\n// the unit gradient vector. The gradient basis (not a scalar value) is what makes the\n// noise zero at the nodes (no value-noise plateaus).\nvec2 pcgGrad2(ivec2 cell) {\n uvec2 h = pcg2d(uvec2(cell));\n float ang = float(h.x) * (1.0 / 4294967296.0) * 6.28318530717958647692;\n return vec2(cos(ang), sin(ang));\n}\n\n// 2D SIMPLEX gradient noise (Gustavson skew). The skew transform F2/G2 maps the square\n// lattice onto a simplex (triangular) grid \u2014 no axis-aligned directional bias. Each of\n// the three simplex corners contributes grad\u00B7offset shaped by a radial (0.5 - r\u00B2)\u2074\n// falloff. Output is ~[-1, 1]; callers remap to [0,1] via 0.5 + 0.5*gnoise.\nfloat gnoise(vec2 p) {\n const float F2 = 0.36602540378443864676; // (sqrt(3) - 1) / 2\n const float G2 = 0.21132486540518711775; // (3 - sqrt(3)) / 6\n float s = (p.x + p.y) * F2;\n vec2 i = floor(p + s);\n float tt = (i.x + i.y) * G2;\n vec2 x0 = p - (i - tt); // offset from the simplex origin corner\n ivec2 i1 = (x0.x > x0.y) ? ivec2(1, 0) : ivec2(0, 1);\n vec2 x1 = x0 - vec2(i1) + G2;\n vec2 x2 = x0 - 1.0 + 2.0 * G2;\n ivec2 ii = ivec2(i);\n float n = 0.0;\n float t0 = 0.5 - dot(x0, x0);\n if (t0 > 0.0) { t0 *= t0; n += t0 * t0 * dot(pcgGrad2(ii), x0); }\n float t1 = 0.5 - dot(x1, x1);\n if (t1 > 0.0) { t1 *= t1; n += t1 * t1 * dot(pcgGrad2(ii + i1), x1); }\n float t2 = 0.5 - dot(x2, x2);\n if (t2 > 0.0) { t2 *= t2; n += t2 * t2 * dot(pcgGrad2(ii + ivec2(1, 1)), x2); }\n return 70.0 * n; // normalize to ~[-1, 1]\n}";
|
|
6
|
-
export declare const OETF_WGSL = "\nfn srgbToLinearCh(c: f32) -> f32 {\n return select(pow((c + 0.055) / 1.055, 2.4), c / 12.92, c <= 0.04045);\n}\nfn srgbToLinear(c: vec3f) -> vec3f {\n return vec3f(srgbToLinearCh(c.r), srgbToLinearCh(c.g), srgbToLinearCh(c.b));\n}\nfn linearToSrgbCh(c: f32) -> f32 {\n return select(1.055 * pow(c, 1.0 / 2.4) - 0.055, c * 12.92, c <= 0.0031308);\n}\nfn linearToSrgb(c: vec3f) -> vec3f {\n return vec3f(linearToSrgbCh(c.r), linearToSrgbCh(c.g), linearToSrgbCh(c.b));\n}";
|
|
7
|
-
export declare const FBM_ROT_WGSL = "const FBM_ROT: mat2x2f = mat2x2f(0.8, 0.6, -0.6, 0.8);";
|
|
8
|
-
export declare const OKLCH_MATRICES_WGSL = "\nconst LINEAR_SRGB_TO_LMS: mat3x3f = mat3x3f(\n 0.4122214708, 0.2119034982, 0.0883024619,\n 0.5363325363, 0.6806995451, 0.2817188376,\n 0.0514459929, 0.1073969566, 0.6299787005\n);\nconst LMS_TO_OKLAB: mat3x3f = mat3x3f(\n 0.2104542553, 1.9779984951, 0.0259040371,\n 0.7936177850, -2.4285922050, 0.7827717662,\n -0.0040720468, 0.4505937099, -0.8086757660\n);\nconst OKLAB_TO_LMS: mat3x3f = mat3x3f(\n 1.0, 1.0, 1.0,\n 0.3963377774, -0.1055613458, -0.0894841775,\n 0.2158037573, -0.0638541728, -1.2914855480\n);\nconst LMS_TO_LINEAR_SRGB: mat3x3f = mat3x3f(\n 4.0767416621, -1.2684380046, -0.0041960863,\n -3.3077115913, 2.6097574011, -0.7034186147,\n 0.2309699292, -0.3413193965, 1.7076147010\n);\n\nfn srgbToOklab(c: vec3f) -> vec3f {\n let lin = srgbToLinear(c);\n let lms = LINEAR_SRGB_TO_LMS * lin;\n let lmsCbrt = sign(lms) * pow(abs(lms), vec3f(1.0 / 3.0));\n return LMS_TO_OKLAB * lmsCbrt;\n}\nfn oklabToLinearSrgb(lab: vec3f) -> vec3f {\n let lms_ = OKLAB_TO_LMS * lab;\n let lms = lms_ * lms_ * lms_;\n return LMS_TO_LINEAR_SRGB * lms;\n}\nfn oklabToOklch(lab: vec3f) -> vec3f {\n let C = length(lab.yz);\n var H = atan2(lab.z, lab.y);\n if (H < 0.0) { H = H + 2.0 * PI; }\n return vec3f(lab.x, C, H);\n}\nfn oklchToOklab(lch: vec3f) -> vec3f {\n return vec3f(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}";
|
|
9
|
-
export declare const PALETTE_RAMP_WGSL = "\nfn interpolateHueTurns(h0: f32, h1: f32, t: f32, method: i32) -> f32 {\n let TAU = 2.0 * PI;\n var a = h0 / TAU;\n var b = h1 / TAU;\n let i = b - a;\n if (method == 0) { // shorter\n if (i > 0.5) { a = a + 1.0; } else if (i < -0.5) { b = b + 1.0; }\n } else if (method == 1) { // longer\n if (i > 0.0 && i < 0.5) { a = a + 1.0; } else if (i > -0.5 && i <= 0.0) { b = b + 1.0; }\n } else if (method == 2) { // increasing\n if (i < 0.0) { b = b + 1.0; }\n } else { // decreasing\n if (i > 0.0) { a = a + 1.0; }\n }\n let r = fract(a + t * (b - a));\n return r * TAU;\n}\n\nfn mixPaletteOklab(linA: vec3f, linB: vec3f, t: f32) -> vec3f {\n let labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3f(1.0 / 3.0)));\n let labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3f(1.0 / 3.0)));\n let lab = mix(labA, labB, vec3f(t));\n return oklabToLinearSrgb(lab);\n}\n\nfn mixPaletteOklchArc(linA: vec3f, linB: vec3f, t: f32, method: i32) -> vec3f {\n let labA = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linA) * pow(abs(LINEAR_SRGB_TO_LMS * linA), vec3f(1.0 / 3.0)));\n let labB = LMS_TO_OKLAB * (sign(LINEAR_SRGB_TO_LMS * linB) * pow(abs(LINEAR_SRGB_TO_LMS * linB), vec3f(1.0 / 3.0)));\n let lchA = oklabToOklch(labA);\n let lchB = oklabToOklch(labB);\n let L = mix(lchA.x, lchB.x, t);\n let C = mix(lchA.y, lchB.y, t);\n let H = interpolateHueTurns(lchA.z, lchB.z, t, method);\n return oklabToLinearSrgb(oklchToOklab(vec3f(L, C, H)));\n}\n\nfn samplePaletteRamp(a: vec3f, b: vec3f, tRaw: f32, huePath: i32) -> vec3f {\n let t = smoothstep(0.0, 1.0, tRaw);\n if (huePath == 2 || huePath == 3) {\n return mixPaletteOklchArc(a, b, t, huePath);\n }\n return mixPaletteOklab(a, b, t);\n}";
|
|
10
|
-
export declare const PCG_HASH_WGSL = "\nfn pcg2d(v0: vec2u) -> vec2u {\n var v = v0 * 1664525u + vec2u(1013904223u);\n v.x = v.x + v.y * 1664525u;\n v.y = v.y + v.x * 1664525u;\n v = v ^ (v >> vec2u(16u));\n v.x = v.x + v.y * 1664525u;\n v.y = v.y + v.x * 1664525u;\n v = v ^ (v >> vec2u(16u));\n return v;\n}\n\nfn pcgHash2(p: vec2f) -> f32 {\n let u = bitcast<vec2u>(p);\n return f32(pcg2d(u).x) * (1.0 / 4294967296.0);\n}\n\nfn pcgGrad2(cell: vec2i) -> vec2f {\n let h = pcg2d(bitcast<vec2u>(cell));\n let ang = f32(h.x) * (1.0 / 4294967296.0) * 6.28318530717958647692;\n return vec2f(cos(ang), sin(ang));\n}\n\nfn gnoise(p: vec2f) -> f32 {\n let F2 = 0.36602540378443864676;\n let G2 = 0.21132486540518711775;\n let s = (p.x + p.y) * F2;\n let i = floor(p + vec2f(s));\n let tt = (i.x + i.y) * G2;\n let x0 = p - (i - vec2f(tt));\n var i1 = vec2i(0, 1);\n if (x0.x > x0.y) { i1 = vec2i(1, 0); }\n let x1 = x0 - vec2f(i1) + vec2f(G2);\n let x2 = x0 - vec2f(1.0) + vec2f(2.0 * G2);\n let ii = vec2i(i);\n var n = 0.0;\n var t0 = 0.5 - dot(x0, x0);\n if (t0 > 0.0) { t0 = t0 * t0; n = n + t0 * t0 * dot(pcgGrad2(ii), x0); }\n var t1 = 0.5 - dot(x1, x1);\n if (t1 > 0.0) { t1 = t1 * t1; n = n + t1 * t1 * dot(pcgGrad2(ii + i1), x1); }\n var t2 = 0.5 - dot(x2, x2);\n if (t2 > 0.0) { t2 = t2 * t2; n = n + t2 * t2 * dot(pcgGrad2(ii + vec2i(1, 1)), x2); }\n return 70.0 * n;\n}";
|
|
@@ -7,5 +7,6 @@ export * from "../useIntersectionPause";
|
|
|
7
7
|
export * from "../useYieldToMain";
|
|
8
8
|
export * from "../usePrioritizedTask";
|
|
9
9
|
export * from "../useViewTransition";
|
|
10
|
+
export * from "../useRouteTransition";
|
|
10
11
|
export * from "../vReveal";
|
|
11
12
|
export * from "../useTextHighlight";
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export interface RouteTransitionOptions {
|
|
2
|
+
/**
|
|
3
|
+
* Directional transition types tagged on the active transition for
|
|
4
|
+
* `:active-view-transition-type(<t>)` CSS curves (Chrome 140+; feature-
|
|
5
|
+
* detected, degrades to one symmetric curve elsewhere). For a route morph a
|
|
6
|
+
* consumer might tag `["forward"]` / `["back"]` off the navigation direction.
|
|
7
|
+
*/
|
|
8
|
+
types?: string[];
|
|
9
|
+
}
|
|
10
|
+
export interface RouteTransitionResult {
|
|
11
|
+
/**
|
|
12
|
+
* Resolves when the transition's `finished` promise settles (or immediately
|
|
13
|
+
* in the fallback / PRM path). Use to route focus per the a11y MANDATORY:
|
|
14
|
+
* `await navigate(go).finished; mastheadTitle.value?.focus()`. Never rejects —
|
|
15
|
+
* a skipped/aborted transition settles cleanly.
|
|
16
|
+
*/
|
|
17
|
+
finished: Promise<void>;
|
|
18
|
+
/** True when the native VT ran; false when the instant / PRM fallback ran. */
|
|
19
|
+
transitioned: boolean;
|
|
20
|
+
}
|
|
21
|
+
export interface UseRouteTransitionReturn {
|
|
22
|
+
/**
|
|
23
|
+
* Run `navigate` (the route/state change, possibly async) wrapped in a View
|
|
24
|
+
* Transition. Under PRM or on an unsupported engine the navigation runs
|
|
25
|
+
* directly (awaited), unanimated. Returns `{ finished, transitioned }`.
|
|
26
|
+
*/
|
|
27
|
+
navigate: (navigate: () => void | Promise<void>, options?: RouteTransitionOptions) => RouteTransitionResult;
|
|
28
|
+
/** True when the native VT API is available (feature-detect for VT-only CSS). */
|
|
29
|
+
supported: boolean;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* True when `document.startViewTransition` is available — the feature-detected
|
|
33
|
+
* predicate the helper (and a consumer's VT-only styling) gate on.
|
|
34
|
+
*/
|
|
35
|
+
export declare function supportsRouteTransitions(): boolean;
|
|
36
|
+
/**
|
|
37
|
+
* The route-transition helper. Returns `navigate` — a function that wraps a
|
|
38
|
+
* (possibly async) navigation callback in `document.startViewTransition` with PRM
|
|
39
|
+
* + unsupported fallbacks. The navigation ALWAYS runs (information parity); the
|
|
40
|
+
* morph is conditional on support + motion preference.
|
|
41
|
+
*/
|
|
42
|
+
export declare function useRouteTransition(): UseRouteTransitionReturn;
|
package/dist/constellation.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { t as e } from "./cn-DJXf4yaB.js";
|
|
2
2
|
import { t } from "./useCanvas2D-ClrQuZtp.js";
|
|
3
3
|
import { t as n } from "./_plugin-vue_export-helper-ok8pgSl5.js";
|
|
4
|
-
import { n as r, t as i } from "./prng-
|
|
5
|
-
import { computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c,
|
|
4
|
+
import { n as r, t as i } from "./prng-D27-B3tK.js";
|
|
5
|
+
import { computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c, getCurrentInstance as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, unref as m, useTemplateRef as h } from "vue";
|
|
6
6
|
//#region src/components/custom/constellation/constellationField.ts
|
|
7
|
-
var
|
|
7
|
+
var g = 1280, _ = 8e3, v = 8e3, y = {
|
|
8
8
|
node: "#b4afa3",
|
|
9
9
|
nodeDim: "#cdc8bd",
|
|
10
10
|
line: "#1c1714",
|
|
11
11
|
edgeAlpha: .22,
|
|
12
12
|
edgeFocusAlpha: .34,
|
|
13
|
-
alpha: .
|
|
13
|
+
alpha: .84
|
|
14
14
|
};
|
|
15
|
-
function
|
|
16
|
-
if (typeof window > "u") return { ...
|
|
15
|
+
function b(e) {
|
|
16
|
+
if (typeof window > "u") return { ...y };
|
|
17
17
|
let t = getComputedStyle(e), n = (e, n) => t.getPropertyValue(e).trim() || n, r = (e, n) => {
|
|
18
18
|
let r = t.getPropertyValue(e).trim();
|
|
19
19
|
if (!r) return n;
|
|
@@ -21,15 +21,40 @@ function _(e) {
|
|
|
21
21
|
return Number.isFinite(i) ? i : n;
|
|
22
22
|
};
|
|
23
23
|
return {
|
|
24
|
-
node: n("--constellation-node",
|
|
25
|
-
nodeDim: n("--constellation-node-dim",
|
|
26
|
-
line: n("--constellation-line",
|
|
27
|
-
edgeAlpha: r("--constellation-edge-alpha",
|
|
28
|
-
edgeFocusAlpha: r("--constellation-edge-focus-alpha",
|
|
29
|
-
alpha: r("--constellation-alpha",
|
|
24
|
+
node: n("--constellation-node", y.node),
|
|
25
|
+
nodeDim: n("--constellation-node-dim", y.nodeDim),
|
|
26
|
+
line: n("--constellation-line", y.line),
|
|
27
|
+
edgeAlpha: r("--constellation-edge-alpha", y.edgeAlpha),
|
|
28
|
+
edgeFocusAlpha: r("--constellation-edge-focus-alpha", y.edgeFocusAlpha),
|
|
29
|
+
alpha: r("--constellation-alpha", y.alpha)
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function x(e) {
|
|
33
|
+
let t = {
|
|
34
|
+
response: A,
|
|
35
|
+
zeta: 1
|
|
36
|
+
}, n = { ...N }, r = {
|
|
37
|
+
minIdle: _,
|
|
38
|
+
jitter: v
|
|
39
|
+
};
|
|
40
|
+
if (typeof window > "u") return {
|
|
41
|
+
warp: t,
|
|
42
|
+
well: n,
|
|
43
|
+
wander: r
|
|
44
|
+
};
|
|
45
|
+
let i = getComputedStyle(e), a = (e, t) => {
|
|
46
|
+
let n = i.getPropertyValue(e).trim();
|
|
47
|
+
if (!n) return t;
|
|
48
|
+
let r = Number.parseFloat(n);
|
|
49
|
+
return Number.isFinite(r) ? r : t;
|
|
50
|
+
};
|
|
51
|
+
return t.response = a("--constellation-warp-response", A), t.zeta = a("--constellation-warp-zeta", 1), n.gain = a("--constellation-well-gain", N.gain), n.reach = a("--constellation-well-reach", N.reach), n.ramp = a("--constellation-well-ramp", N.ramp), n.maxSpeed = a("--constellation-well-max-speed", N.maxSpeed), n.holdMs = a("--constellation-well-hold-ms", N.holdMs), r.minIdle = a("--constellation-wander-idle", _), r.jitter = a("--constellation-wander-jitter", v), {
|
|
52
|
+
warp: t,
|
|
53
|
+
well: n,
|
|
54
|
+
wander: r
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
function S(e, t, n, r, i) {
|
|
33
58
|
let a = [];
|
|
34
59
|
for (let o = 0; o < t; o++) {
|
|
35
60
|
let t = e() * Math.PI * 2;
|
|
@@ -44,26 +69,65 @@ function v(e, t, n, r, i) {
|
|
|
44
69
|
}
|
|
45
70
|
return a;
|
|
46
71
|
}
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
72
|
+
function C(e, t, n) {
|
|
73
|
+
if (!(t > 0) || !(n > 0) || t === e.w && n === e.h) return;
|
|
74
|
+
let r = e.w / t, i = e.h / n;
|
|
75
|
+
for (let t of e.nodes) t.x *= r, t.y *= i;
|
|
76
|
+
e.warp.x *= r, e.warp.y *= i;
|
|
77
|
+
}
|
|
78
|
+
function w(e, t, n, r, i = 0, a = 0, o = Math.random) {
|
|
79
|
+
let { nodes: s, w: c, h: l } = e;
|
|
80
|
+
for (let e = 0; e < s.length; e++) {
|
|
81
|
+
let n = s[e];
|
|
82
|
+
n.x += n.vx * t, n.y += n.vy * t, n.x < 0 ? (n.x = 0, n.vx *= -1) : n.x > c && (n.x = c, n.vx *= -1), n.y < 0 ? (n.y = 0, n.vy *= -1) : n.y > l && (n.y = l, n.vy *= -1);
|
|
52
83
|
}
|
|
53
84
|
if (r && r.x >= 0) {
|
|
54
85
|
let e = 180 * t;
|
|
55
|
-
for (let t = 0; t <
|
|
56
|
-
let i =
|
|
86
|
+
for (let t = 0; t < s.length; t++) {
|
|
87
|
+
let i = s[t], a = r.x - i.x, o = r.y - i.y, c = Math.hypot(a, o);
|
|
57
88
|
if (c > .5 && c < e) {
|
|
58
|
-
let t = Math.hypot(i.vx, i.vy) || n, r = (1 - c / e) * .08,
|
|
59
|
-
i.vx =
|
|
89
|
+
let t = Math.hypot(i.vx, i.vy) || n, r = (1 - c / e) * .08, s = i.vx + a / c * r * t, l = i.vy + o / c * r * t, u = Math.hypot(s, l) || 1;
|
|
90
|
+
i.vx = s / u * t, i.vy = l / u * t;
|
|
60
91
|
}
|
|
61
92
|
}
|
|
62
93
|
}
|
|
63
|
-
|
|
94
|
+
if (k(e, t, n, i), F(e, i), e.wander && a > 0) {
|
|
95
|
+
let t = e.wander;
|
|
96
|
+
t.nextAt < 0 ? t.nextAt = a + t.minIdle + o() * t.jitter : a >= t.nextAt && z(e) && (I(e, B(e, o)), t.nextAt = a + t.minIdle + o() * t.jitter);
|
|
97
|
+
}
|
|
64
98
|
}
|
|
65
|
-
var
|
|
66
|
-
function
|
|
99
|
+
var T = .001, E = 1.5, D = 7, O = 22;
|
|
100
|
+
function k(e, t, n, r) {
|
|
101
|
+
let i = e.well;
|
|
102
|
+
if (!i || !(r > 0)) return;
|
|
103
|
+
let a = Math.min(r, M), o = i.cfg, s = i.target > 0 ? o.ramp : O, c = Math.min(s * a, 1);
|
|
104
|
+
i.strength += (i.target - i.strength) * c, i.strength < T && (i.strength = i.target <= 0 ? 0 : i.strength);
|
|
105
|
+
let { nodes: l } = e, u = o.reach * t, d = u * u, f = o.maxSpeed * t, p = i.target > 0 ? E : D, m = Math.min(p * a, 1), h = i.strength > T && i.x >= 0;
|
|
106
|
+
for (let e = 0; e < l.length; e++) {
|
|
107
|
+
let t = l[e];
|
|
108
|
+
if (h) {
|
|
109
|
+
let e = i.x - t.x, n = i.y - t.y, r = e * e + n * n;
|
|
110
|
+
if (r <= d) {
|
|
111
|
+
let s = Math.max(Math.sqrt(r), o.soften), c = o.gain * i.strength / (s * s), l = t.vx + e / s * c * a, u = t.vy + n / s * c * a, d = Math.hypot(l, u);
|
|
112
|
+
d > f && (l = l / d * f, u = u / d * f), t.vx = l, t.vy = u;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
let r = Math.hypot(t.vx, t.vy);
|
|
116
|
+
if (r > 1e-9) {
|
|
117
|
+
let e = (r + (n - r) * m) / r;
|
|
118
|
+
t.vx *= e, t.vy *= e;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
var A = .55, j = 1, M = .05, N = {
|
|
123
|
+
gain: 14e3,
|
|
124
|
+
reach: 340,
|
|
125
|
+
ramp: 4,
|
|
126
|
+
maxSpeed: 4,
|
|
127
|
+
soften: 8,
|
|
128
|
+
holdMs: 140
|
|
129
|
+
};
|
|
130
|
+
function P(e, t, n, r = -1) {
|
|
67
131
|
let { nodes: i } = e, a = -1, o = Infinity;
|
|
68
132
|
for (let e = 0; e < i.length; e++) {
|
|
69
133
|
if (e === r) continue;
|
|
@@ -72,13 +136,13 @@ function w(e, t, n, r = -1) {
|
|
|
72
136
|
}
|
|
73
137
|
return a;
|
|
74
138
|
}
|
|
75
|
-
function
|
|
139
|
+
function F(e, t) {
|
|
76
140
|
let { warp: n, nodes: r } = e;
|
|
77
141
|
if (!n || n.targetIdx < 0 || n.targetIdx >= r.length || !(t > 0)) return;
|
|
78
|
-
let i = Math.min(t,
|
|
79
|
-
n.vx +=
|
|
142
|
+
let i = Math.min(t, M), a = e.warpCfg?.response ?? .55, o = e.warpCfg?.zeta ?? 1, s = 2 * Math.PI / a, c = r[n.targetIdx], l = -2 * o * s * n.vx - s * s * (n.x - c.x), u = -2 * o * s * n.vy - s * s * (n.y - c.y);
|
|
143
|
+
n.vx += l * i, n.vy += u * i, n.x += n.vx * i, n.y += n.vy * i;
|
|
80
144
|
}
|
|
81
|
-
function
|
|
145
|
+
function I(e, t) {
|
|
82
146
|
let { warp: n, nodes: r } = e;
|
|
83
147
|
if (t < 0 || t >= r.length) {
|
|
84
148
|
n.targetIdx = -1, e.focalIndex = -1;
|
|
@@ -86,13 +150,28 @@ function E(e, t) {
|
|
|
86
150
|
}
|
|
87
151
|
e.focalIndex = t, n.targetIdx = t;
|
|
88
152
|
}
|
|
89
|
-
function
|
|
90
|
-
let r =
|
|
153
|
+
function L(e, t, n) {
|
|
154
|
+
let r = P(e, t, n, -1);
|
|
91
155
|
if (r >= 0 && r === e.focalIndex) return e.focalIndex;
|
|
92
|
-
let i =
|
|
93
|
-
return i < 0 ? -1 : (
|
|
156
|
+
let i = P(e, t, n, e.focalIndex);
|
|
157
|
+
return i < 0 ? -1 : (I(e, i), i);
|
|
94
158
|
}
|
|
95
|
-
|
|
159
|
+
var R = 24;
|
|
160
|
+
function z(e) {
|
|
161
|
+
let { warp: t, nodes: n } = e;
|
|
162
|
+
if (!t || t.targetIdx < 0 || t.targetIdx >= n.length) return !0;
|
|
163
|
+
let r = n[t.targetIdx];
|
|
164
|
+
return Math.hypot(t.x - r.x, t.y - r.y) < R;
|
|
165
|
+
}
|
|
166
|
+
function B(e, t) {
|
|
167
|
+
let n = e.nodes.length;
|
|
168
|
+
if (n <= 1) return e.focalIndex;
|
|
169
|
+
let r = e.focalIndex;
|
|
170
|
+
if (r < 0 || r >= n) return Math.floor(t() * n) % n;
|
|
171
|
+
let i = Math.floor(t() * (n - 1));
|
|
172
|
+
return i < r ? i : i + 1;
|
|
173
|
+
}
|
|
174
|
+
function V(e, t, n, r) {
|
|
96
175
|
let { nodes: i, k: a } = t, o = n * a, s = o * o, c = r.edgeAlpha * r.alpha;
|
|
97
176
|
e.strokeStyle = r.line, e.lineWidth = 1 * a;
|
|
98
177
|
for (let t = 0; t < i.length; t++) {
|
|
@@ -104,14 +183,14 @@ function O(e, t, n, r) {
|
|
|
104
183
|
}
|
|
105
184
|
e.globalAlpha = 1;
|
|
106
185
|
}
|
|
107
|
-
function
|
|
186
|
+
function H(e, t, n) {
|
|
108
187
|
let { nodes: r, k: i } = t;
|
|
109
188
|
for (let t = 0; t < r.length; t++) {
|
|
110
189
|
let a = r[t];
|
|
111
190
|
e.fillStyle = a.dim ? n.nodeDim : n.node, e.beginPath(), e.arc(a.x, a.y, a.r * i, 0, Math.PI * 2), e.fill();
|
|
112
191
|
}
|
|
113
192
|
}
|
|
114
|
-
function
|
|
193
|
+
function U(e, t, n, r, i) {
|
|
115
194
|
if (!i || i.x < 0) return;
|
|
116
195
|
let { nodes: a, k: o } = t, s = n * o, c = s * s, l = r.edgeFocusAlpha * r.alpha;
|
|
117
196
|
e.strokeStyle = r.line, e.lineWidth = 1 * o;
|
|
@@ -121,7 +200,7 @@ function A(e, t, n, r, i) {
|
|
|
121
200
|
}
|
|
122
201
|
e.globalAlpha = .55, e.fillStyle = r.node, e.beginPath(), e.arc(i.x, i.y, 2.6 * o, 0, Math.PI * 2), e.fill(), e.globalAlpha = 1;
|
|
123
202
|
}
|
|
124
|
-
function
|
|
203
|
+
function W(e, t, n, r, i) {
|
|
125
204
|
let { k: a } = t;
|
|
126
205
|
e.strokeStyle = i.line;
|
|
127
206
|
for (let t = r.length - 1; t >= 0; t--) {
|
|
@@ -137,8 +216,8 @@ function j(e, t, n, r, i) {
|
|
|
137
216
|
e.globalAlpha = 1;
|
|
138
217
|
}
|
|
139
218
|
//#endregion
|
|
140
|
-
//#region src/components/custom/constellation/Constellation.vue
|
|
141
|
-
var
|
|
219
|
+
//#region src/components/custom/constellation/Constellation.vue?vue&type=script&setup=true&lang.ts
|
|
220
|
+
var G = 0, K = /* @__PURE__ */ n(/* @__PURE__ */ c({
|
|
142
221
|
__name: "Constellation",
|
|
143
222
|
props: {
|
|
144
223
|
count: { default: 64 },
|
|
@@ -153,6 +232,15 @@ var M = /* @__PURE__ */ n(/* @__PURE__ */ c({
|
|
|
153
232
|
type: Boolean,
|
|
154
233
|
default: !1
|
|
155
234
|
},
|
|
235
|
+
wander: {
|
|
236
|
+
type: [Boolean, Object],
|
|
237
|
+
default: !1
|
|
238
|
+
},
|
|
239
|
+
gravityWell: {
|
|
240
|
+
type: [Boolean, Object],
|
|
241
|
+
default: !1
|
|
242
|
+
},
|
|
243
|
+
freeze: { type: Boolean },
|
|
156
244
|
class: { type: [
|
|
157
245
|
Boolean,
|
|
158
246
|
null,
|
|
@@ -163,7 +251,7 @@ var M = /* @__PURE__ */ n(/* @__PURE__ */ c({
|
|
|
163
251
|
drawOverlay: { type: Function }
|
|
164
252
|
},
|
|
165
253
|
setup(n, { expose: c }) {
|
|
166
|
-
let
|
|
254
|
+
let _ = h("hostRef"), v = h("canvasRef"), T = a(() => n.seed === void 0 ? Math.random : r(typeof n.seed == "string" ? i(n.seed) : n.seed)), E = () => typeof window < "u" && /[?&](export|print|freeze)\b/.test(window.location.search), D = l()?.vnode.props?.freeze, O = a(() => D === void 0 ? E() : D === !0 || D === ""), k = {
|
|
167
255
|
nodes: [],
|
|
168
256
|
canvas: null,
|
|
169
257
|
w: 0,
|
|
@@ -178,74 +266,126 @@ var M = /* @__PURE__ */ n(/* @__PURE__ */ c({
|
|
|
178
266
|
vy: 0,
|
|
179
267
|
targetIdx: -1
|
|
180
268
|
}
|
|
181
|
-
},
|
|
269
|
+
}, A = n.wander && n.wander !== !0 ? n.wander : {};
|
|
270
|
+
k.wander = n.wander ? {
|
|
271
|
+
nextAt: -1,
|
|
272
|
+
minIdle: A.minIdle ?? 8e3,
|
|
273
|
+
jitter: A.jitter ?? 8e3
|
|
274
|
+
} : void 0;
|
|
275
|
+
let j = n.gravityWell && n.gravityWell !== !0 ? n.gravityWell : {};
|
|
276
|
+
k.well = n.gravityWell ? {
|
|
277
|
+
x: -1,
|
|
278
|
+
y: -1,
|
|
279
|
+
strength: 0,
|
|
280
|
+
target: 0,
|
|
281
|
+
cfg: {
|
|
282
|
+
...N,
|
|
283
|
+
...j
|
|
284
|
+
}
|
|
285
|
+
} : void 0;
|
|
286
|
+
let M = {
|
|
182
287
|
x: -1,
|
|
183
288
|
y: -1
|
|
184
|
-
},
|
|
185
|
-
return
|
|
186
|
-
let e =
|
|
289
|
+
}, P = [], F = { ...y }, I = -1, R = !1, z = p(null);
|
|
290
|
+
return d(() => {
|
|
291
|
+
let e = v.value;
|
|
187
292
|
if (!e) return;
|
|
188
293
|
let r = t({
|
|
189
|
-
canvas:
|
|
294
|
+
canvas: v,
|
|
190
295
|
setup: (t) => ({ render(t, i) {
|
|
191
|
-
let a = e.clientWidth || e.offsetWidth || 1280, o = e.clientHeight || e.offsetHeight || 720, s = a /
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
296
|
+
let a = e.clientWidth || e.offsetWidth || 1280, o = e.clientHeight || e.offsetHeight || 720, s = a / g;
|
|
297
|
+
if (k.canvas = e, k.dpr = Math.min(typeof window < "u" && window.devicePixelRatio || 1, 2), k.w !== a || k.h !== o) {
|
|
298
|
+
let t = k.w, r = k.h;
|
|
299
|
+
if (k.w = a, k.h = o, k.k = s, k.nodes.length ? C(k, t, r) : (k.nodes = S(T.value, n.count, a, o, n.speed), k.warp.x = a / 2, k.warp.y = o / 2), F = b(e), !R) {
|
|
300
|
+
R = !0;
|
|
301
|
+
let t = x(e);
|
|
302
|
+
k.warpCfg = t.warp, k.well && (k.well.cfg = {
|
|
303
|
+
...t.well,
|
|
304
|
+
...j
|
|
305
|
+
}), k.wander && (k.wander.minIdle = A.minIdle ?? t.wander.minIdle, k.wander.jitter = A.jitter ?? t.wander.jitter);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
k.k = s;
|
|
309
|
+
let c = I < 0 ? 0 : (i - I) / 1e3;
|
|
310
|
+
I = i;
|
|
311
|
+
let l = O.value || r.reducedMotion;
|
|
312
|
+
if (l && k.well && (k.well.strength = 0, k.well.target = 0, k.well.x = -1, k.well.y = -1), !l) {
|
|
313
|
+
let e = n.pointerReactive ? M : null;
|
|
314
|
+
w(k, s, n.speed, e, c, i, T.value);
|
|
197
315
|
}
|
|
198
|
-
t.clearRect(0, 0, a, o),
|
|
316
|
+
t.clearRect(0, 0, a, o), V(t, k, n.link, F), H(t, k, F), n.pointerReactive && !l && (U(t, k, n.link, F, M), W(t, k, i, P, F)), n.drawOverlay?.(t, k, l ? G : i);
|
|
199
317
|
} })
|
|
200
|
-
}), i =
|
|
318
|
+
}), i = _.value, a = (t) => {
|
|
201
319
|
let n = e.getBoundingClientRect();
|
|
202
320
|
if (!n.width || !n.height) return null;
|
|
203
321
|
let r = (t.clientX - n.left) / n.width, i = (t.clientY - n.top) / n.height;
|
|
204
322
|
return r < 0 || i < 0 || r > 1 || i > 1 ? null : {
|
|
205
|
-
x: r *
|
|
206
|
-
y: i *
|
|
323
|
+
x: r * k.w,
|
|
324
|
+
y: i * k.h
|
|
207
325
|
};
|
|
208
326
|
};
|
|
209
|
-
|
|
327
|
+
if (z.value = a, n.pointerReactive && i && !O.value && !r.reducedMotion && (i.addEventListener("pointermove", (e) => {
|
|
210
328
|
let t = a(e);
|
|
211
|
-
t ? (
|
|
329
|
+
t ? (M.x = t.x, M.y = t.y) : (M.x = -1, M.y = -1), r.wake();
|
|
212
330
|
}), i.addEventListener("pointerleave", () => {
|
|
213
|
-
|
|
331
|
+
M.x = -1, M.y = -1;
|
|
214
332
|
}), i.addEventListener("pointerdown", (e) => {
|
|
215
333
|
let t = a(e);
|
|
216
|
-
t &&
|
|
334
|
+
t && P.push({
|
|
217
335
|
x: t.x,
|
|
218
336
|
y: t.y,
|
|
219
337
|
start: -1
|
|
220
338
|
}), r.wake();
|
|
221
|
-
})), n.warpOnClick && i && !r.reducedMotion && i.addEventListener("pointerdown", (e) => {
|
|
339
|
+
})), n.warpOnClick && i && !O.value && !r.reducedMotion && i.addEventListener("pointerdown", (e) => {
|
|
222
340
|
let t = a(e);
|
|
223
|
-
t && (
|
|
224
|
-
})
|
|
341
|
+
t && (L(k, t.x, t.y), r.wake());
|
|
342
|
+
}), n.gravityWell && i && k.well && !O.value && !r.reducedMotion) {
|
|
343
|
+
let e = k.well, t, n = (n) => {
|
|
344
|
+
let i = a(n);
|
|
345
|
+
i && (e.x = i.x, e.y = i.y, t = window.setTimeout(() => {
|
|
346
|
+
e.target = 1, r.wake();
|
|
347
|
+
}, e.cfg.holdMs), r.wake());
|
|
348
|
+
}, o = (t) => {
|
|
349
|
+
if (e.target > 0) {
|
|
350
|
+
let n = a(t);
|
|
351
|
+
n && (e.x = n.x, e.y = n.y);
|
|
352
|
+
}
|
|
353
|
+
}, s = () => {
|
|
354
|
+
t !== void 0 && (clearTimeout(t), t = void 0), e.target = 0, r.wake();
|
|
355
|
+
};
|
|
356
|
+
i.addEventListener("pointerdown", n), i.addEventListener("pointermove", o), i.addEventListener("pointerup", s), i.addEventListener("pointerleave", s), i.addEventListener("pointercancel", s);
|
|
357
|
+
}
|
|
225
358
|
}), c({
|
|
226
|
-
field:
|
|
359
|
+
field: k,
|
|
360
|
+
isFrozen: O,
|
|
227
361
|
warpTo(e, t) {
|
|
228
362
|
if (typeof e == "number" && typeof t == "number") {
|
|
229
|
-
let n =
|
|
363
|
+
let n = z.value?.({
|
|
230
364
|
clientX: e,
|
|
231
365
|
clientY: t
|
|
232
366
|
});
|
|
233
|
-
return n ?
|
|
367
|
+
return n ? L(k, n.x, n.y) : -1;
|
|
234
368
|
}
|
|
235
369
|
let n = e;
|
|
236
|
-
return
|
|
370
|
+
return L(k, n.x, n.y);
|
|
371
|
+
},
|
|
372
|
+
holdWellAt(e, t) {
|
|
373
|
+
return k.well ? (k.well.x = e, k.well.y = t, k.well.target = 1, !0) : !1;
|
|
374
|
+
},
|
|
375
|
+
releaseWell() {
|
|
376
|
+
k.well && (k.well.target = 0);
|
|
237
377
|
}
|
|
238
|
-
}), (t, r) => (
|
|
378
|
+
}), (t, r) => (f(), o("div", {
|
|
239
379
|
ref_key: "hostRef",
|
|
240
|
-
ref:
|
|
241
|
-
class:
|
|
380
|
+
ref: _,
|
|
381
|
+
class: u(m(e)("constellation", n.class))
|
|
242
382
|
}, [s("canvas", {
|
|
243
383
|
ref_key: "canvasRef",
|
|
244
|
-
ref:
|
|
384
|
+
ref: v,
|
|
245
385
|
class: "constellation-canvas",
|
|
246
386
|
"aria-hidden": "true"
|
|
247
387
|
}, null, 512)], 2));
|
|
248
388
|
}
|
|
249
|
-
}), [["__scopeId", "data-v-
|
|
389
|
+
}), [["__scopeId", "data-v-a8ae86fe"]]);
|
|
250
390
|
//#endregion
|
|
251
|
-
export {
|
|
391
|
+
export { g as BASE_WIDTH, K as Constellation, y as DEFAULT_PALETTE, _ as DEFAULT_WANDER_IDLE, v as DEFAULT_WANDER_JITTER, N as DEFAULT_WELL_CONFIG, A as WARP_RESPONSE, j as WARP_ZETA, V as drawEdges, H as drawNodes, U as drawPointerWeb, W as drawRipples, P as nearestNode, B as pickWanderTarget, x as readInteractionConfig, b as readPalette, C as refitField, S as seedField, I as setWarpTarget, w as stepField, k as stepWell, z as warpSettled, F as warpStep, L as warpTo };
|
package/dist/controls.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as e } from "./cn-DJXf4yaB.js";
|
|
2
2
|
import { t } from "./_plugin-vue_export-helper-ok8pgSl5.js";
|
|
3
|
-
import { t as n } from "./useGlobalDark-
|
|
3
|
+
import { t as n } from "./useGlobalDark-d6waty-X.js";
|
|
4
4
|
import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, openBlock as c, resolveDynamicComponent as l, unref as u, useAttrs as d, watchEffect as f, withCtx as p } from "vue";
|
|
5
5
|
//#endregion
|
|
6
6
|
//#region src/components/custom/controls/DarkModeToggle.vue
|