@dryui/ui 1.7.0 → 1.7.1
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/diagram/edge-routing.d.ts +6 -12
- package/dist/diagram/edge-routing.js +2 -2
- package/dist/diagram/layout.js +12 -4
- package/dist/hover-card/context.svelte.d.ts +1 -1
- package/dist/hover-card/context.svelte.js +1 -1
- package/dist/internal/date-family-controller.svelte.d.ts +1 -1
- package/dist/internal/motion.d.ts +1 -1
- package/dist/internal/motion.js +1 -1
- package/dist/shader-canvas/presets.d.ts +0 -10
- package/dist/shader-canvas/presets.js +5 -5
- package/dist/theme-toggle/theme-controller.svelte.d.ts +0 -1
- package/dist/theme-toggle/theme-controller.svelte.js +1 -1
- package/package.json +2 -2
- package/dist/utils/use-anchor-styles.svelte.d.ts +0 -14
- package/dist/utils/use-anchor-styles.svelte.js +0 -32
|
@@ -1,24 +1,19 @@
|
|
|
1
1
|
import type { DiagramEdge, DiagramDirection, PositionedEdge } from './types.js';
|
|
2
|
-
/** Minimum distance (in path units, measured along the polyline) between a
|
|
3
|
-
* forward edge label and a directed-cluster boundary. Cross-boundary edges
|
|
4
|
-
* whose natural midpoint sits closer than this to the cluster are slid along
|
|
5
|
-
* the polyline toward the outside endpoint. */
|
|
6
|
-
export declare const LABEL_BORDER_AVOID_PX = 28;
|
|
7
2
|
interface Point {
|
|
8
3
|
x: number;
|
|
9
4
|
y: number;
|
|
10
5
|
}
|
|
11
|
-
|
|
6
|
+
interface EdgeRouteBounds {
|
|
12
7
|
minX: number;
|
|
13
8
|
minY: number;
|
|
14
9
|
maxX: number;
|
|
15
10
|
maxY: number;
|
|
16
11
|
}
|
|
17
|
-
|
|
12
|
+
interface ComputedEdges {
|
|
18
13
|
edges: PositionedEdge[];
|
|
19
14
|
collapsed: (Point[] | null)[];
|
|
20
15
|
}
|
|
21
|
-
|
|
16
|
+
interface ComputeEdgePathsOptions {
|
|
22
17
|
cornerRadius?: number;
|
|
23
18
|
reversedEdges?: Set<string>;
|
|
24
19
|
bounds?: EdgeRouteBounds;
|
|
@@ -46,14 +41,13 @@ export declare function computeEdgePaths(edges: DiagramEdge[], positions: Map<st
|
|
|
46
41
|
h: number;
|
|
47
42
|
}>, direction: DiagramDirection, opts?: ComputeEdgePathsOptions): ComputedEdges;
|
|
48
43
|
declare function buildPathFromCollapsed(collapsed: Point[], cornerRadius?: number): string;
|
|
49
|
-
|
|
50
|
-
export interface PointAtFraction {
|
|
44
|
+
interface PointAtFraction {
|
|
51
45
|
point: Point;
|
|
52
46
|
segmentIndex: number;
|
|
53
47
|
axis: 'h' | 'v';
|
|
54
48
|
}
|
|
55
49
|
export declare function getPointAtFraction(collapsed: Point[], t: number): PointAtFraction;
|
|
56
|
-
|
|
50
|
+
interface WaypointBox {
|
|
57
51
|
x: number;
|
|
58
52
|
y: number;
|
|
59
53
|
width: number;
|
|
@@ -67,5 +61,5 @@ export declare function splitCollapsedAtBox(collapsed: Point[], segmentIndex: nu
|
|
|
67
61
|
entry: Point[];
|
|
68
62
|
exit: Point[];
|
|
69
63
|
} | null;
|
|
70
|
-
export {
|
|
64
|
+
export { buildPathFromCollapsed };
|
|
71
65
|
export declare function emptyEdge(edge: DiagramEdge): PositionedEdge;
|
|
@@ -8,7 +8,7 @@ const BACK_EDGE_LANE_STEP = 22;
|
|
|
8
8
|
* forward edge label and a directed-cluster boundary. Cross-boundary edges
|
|
9
9
|
* whose natural midpoint sits closer than this to the cluster are slid along
|
|
10
10
|
* the polyline toward the outside endpoint. */
|
|
11
|
-
|
|
11
|
+
const LABEL_BORDER_AVOID_PX = 28;
|
|
12
12
|
function edgeKey(edge) {
|
|
13
13
|
return `${edge.from}->${edge.to}`;
|
|
14
14
|
}
|
|
@@ -557,7 +557,7 @@ export function splitCollapsedAtBox(collapsed, segmentIndex, box, axis) {
|
|
|
557
557
|
return null;
|
|
558
558
|
return { entry, exit };
|
|
559
559
|
}
|
|
560
|
-
export {
|
|
560
|
+
export { buildPathFromCollapsed };
|
|
561
561
|
export function emptyEdge(edge) {
|
|
562
562
|
return {
|
|
563
563
|
from: edge.from,
|
package/dist/diagram/layout.js
CHANGED
|
@@ -103,7 +103,9 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
|
|
|
103
103
|
const posInLayer = new Map();
|
|
104
104
|
// Initialize positions
|
|
105
105
|
for (const layer of layers) {
|
|
106
|
-
|
|
106
|
+
for (const [i, id] of layer.entries()) {
|
|
107
|
+
posInLayer.set(id, i);
|
|
108
|
+
}
|
|
107
109
|
}
|
|
108
110
|
function resortLayer(layer, neighbors) {
|
|
109
111
|
const sorted = layer.map((nodeId) => {
|
|
@@ -123,13 +125,17 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
|
|
|
123
125
|
for (let i = 1; i < layers.length; i++) {
|
|
124
126
|
const next = resortLayer(layers[i], adjacencyIn);
|
|
125
127
|
layers[i] = next;
|
|
126
|
-
|
|
128
|
+
for (const [j, id] of next.entries()) {
|
|
129
|
+
posInLayer.set(id, j);
|
|
130
|
+
}
|
|
127
131
|
}
|
|
128
132
|
// Up sweep
|
|
129
133
|
for (let i = layers.length - 2; i >= 0; i--) {
|
|
130
134
|
const next = resortLayer(layers[i], adjacencyOut);
|
|
131
135
|
layers[i] = next;
|
|
132
|
-
|
|
136
|
+
for (const [j, id] of next.entries()) {
|
|
137
|
+
posInLayer.set(id, j);
|
|
138
|
+
}
|
|
133
139
|
}
|
|
134
140
|
// Cluster-aware grouping: after barycenter ordering, group cluster members together
|
|
135
141
|
// and push non-clustered nodes to the edges
|
|
@@ -137,7 +143,9 @@ function orderWithinLayers(layers, adjacencyOut, adjacencyIn, clusterMap) {
|
|
|
137
143
|
for (let i = 0; i < layers.length; i++) {
|
|
138
144
|
const regrouped = groupByCluster(layers[i], clusterMap, adjacencyIn, adjacencyOut, posInLayer);
|
|
139
145
|
layers[i] = regrouped;
|
|
140
|
-
|
|
146
|
+
for (const [j, id] of regrouped.entries()) {
|
|
147
|
+
posInLayer.set(id, j);
|
|
148
|
+
}
|
|
141
149
|
}
|
|
142
150
|
}
|
|
143
151
|
return layers;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { getHoverCardCtx } from '@dryui/primitives';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { getHoverCardCtx } from '@dryui/primitives';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2
|
|
1
|
+
export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
|
|
2
2
|
export declare function supportsViewTransitions(): boolean;
|
|
3
3
|
export declare function supportsScrollTimelines(): boolean;
|
|
4
4
|
export declare function extractThemeColor(property: string, element?: HTMLElement): [number, number, number];
|
package/dist/internal/motion.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Re-export shared motion utilities from primitives (single source of truth)
|
|
2
|
-
export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2
|
|
2
|
+
export { getReducedMotionPreference, observeReducedMotionPreference, supportsIntersectionObservers, supportsPointerTracking, supportsPropertyRegistration, registerPropertyOnce, supportsWebGL2 } from '@dryui/primitives/internal/motion';
|
|
3
3
|
// UI-only motion utilities
|
|
4
4
|
export function supportsViewTransitions() {
|
|
5
5
|
return typeof document !== 'undefined' && 'startViewTransition' in document;
|
|
@@ -1,11 +1 @@
|
|
|
1
|
-
/** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
|
|
2
|
-
export declare const gradientFlow = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec3 u_color_primary;\nuniform vec3 u_color_secondary;\n\nvoid main() {\n vec2 uv = v_uv;\n float t = u_time * 0.4;\n\n vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.3, 0.4, 0.9);\n vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.9, 0.3, 0.5);\n\n float angle = t + uv.x * 3.14159 + uv.y * 2.0;\n float s = sin(angle) * 0.5 + 0.5;\n float c = cos(angle * 0.7 + 1.0) * 0.5 + 0.5;\n\n vec3 color = mix(c1, c2, s);\n color = mix(color, vec3(1.0) - color * 0.3, c * 0.3);\n\n fragColor = vec4(color, 1.0);\n}\n";
|
|
3
|
-
/** Procedural dots via hash/noise functions */
|
|
4
|
-
export declare const particleField = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat hash(vec2 p) {\n return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nvoid main() {\n vec2 uv = v_uv;\n float aspect = u_resolution.x / u_resolution.y;\n uv.x *= aspect;\n\n float t = u_time * 0.3;\n vec3 color = vec3(0.02, 0.02, 0.06);\n\n for (int i = 0; i < 36; i++) {\n float fi = float(i);\n vec2 pos = vec2(\n hash(vec2(fi, 0.0)),\n hash(vec2(0.0, fi))\n );\n pos.x *= aspect;\n pos += vec2(sin(t + fi * 0.5) * 0.05, cos(t * 0.7 + fi * 0.3) * 0.05);\n\n float d = length(uv - pos);\n float size = 0.002 + hash(vec2(fi, fi)) * 0.003;\n float brightness = smoothstep(size * 2.0, size * 0.5, d);\n\n vec3 particleColor = vec3(\n 0.4 + hash(vec2(fi, 1.0)) * 0.6,\n 0.3 + hash(vec2(fi, 2.0)) * 0.4,\n 0.6 + hash(vec2(fi, 3.0)) * 0.4\n );\n\n color += particleColor * brightness * 0.8;\n }\n\n fragColor = vec4(color, 1.0);\n}\n";
|
|
5
|
-
/** Sinusoidal UV warp, responds to u_mouse */
|
|
6
|
-
export declare const waveDistortion = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec2 u_mouse;\n\nvoid main() {\n vec2 uv = v_uv;\n float t = u_time * 0.5;\n vec2 mouse = u_mouse;\n\n float wave1 = sin(uv.x * 8.0 + t * 2.0 + mouse.x * 3.0) * 0.02;\n float wave2 = sin(uv.y * 6.0 + t * 1.5 + mouse.y * 2.0) * 0.03;\n float wave3 = cos(uv.x * 4.0 - t + uv.y * 5.0) * 0.015;\n\n uv.x += wave1 + wave3;\n uv.y += wave2;\n\n vec3 c1 = vec3(0.1, 0.2, 0.4);\n vec3 c2 = vec3(0.3, 0.1, 0.5);\n vec3 c3 = vec3(0.05, 0.3, 0.4);\n\n float blend = sin(uv.x * 3.14159 + uv.y * 2.0 + t) * 0.5 + 0.5;\n vec3 color = mix(mix(c1, c2, uv.x), c3, blend);\n\n fragColor = vec4(color, 1.0);\n}\n";
|
|
7
|
-
/** Multi-point gradient interpolation */
|
|
8
|
-
export declare const meshGradient = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\nuniform vec3 u_color_primary;\nuniform vec3 u_color_secondary;\n\nvoid main() {\n vec2 uv = v_uv;\n float t = u_time * 0.2;\n\n vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.5, 0.2, 0.8);\n vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.2, 0.6, 0.9);\n vec3 c3 = vec3(0.9, 0.3, 0.4);\n vec3 c4 = vec3(0.2, 0.8, 0.5);\n\n vec2 p1 = vec2(0.2 + sin(t) * 0.1, 0.3 + cos(t * 0.7) * 0.1);\n vec2 p2 = vec2(0.8 + sin(t * 0.8 + 1.0) * 0.1, 0.2 + cos(t * 0.6) * 0.1);\n vec2 p3 = vec2(0.7 + sin(t * 0.5 + 2.0) * 0.1, 0.8 + cos(t * 0.9) * 0.1);\n vec2 p4 = vec2(0.3 + sin(t * 0.6 + 3.0) * 0.1, 0.7 + cos(t * 0.4) * 0.1);\n\n float d1 = 1.0 / (length(uv - p1) + 0.01);\n float d2 = 1.0 / (length(uv - p2) + 0.01);\n float d3 = 1.0 / (length(uv - p3) + 0.01);\n float d4 = 1.0 / (length(uv - p4) + 0.01);\n float total = d1 + d2 + d3 + d4;\n\n vec3 color = (c1 * d1 + c2 * d2 + c3 * d3 + c4 * d4) / total;\n\n fragColor = vec4(color, 1.0);\n}\n";
|
|
9
|
-
/** Fresnel-like metallic reflection via distance fields */
|
|
10
|
-
export declare const liquidMetal = "#version 300 es\nprecision highp float;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_time;\nuniform vec2 u_resolution;\n\nfloat smin(float a, float b, float k) {\n float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);\n return mix(b, a, h) - k * h * (1.0 - h);\n}\n\nvoid main() {\n vec2 uv = v_uv * 2.0 - 1.0;\n float aspect = u_resolution.x / u_resolution.y;\n uv.x *= aspect;\n float t = u_time * 0.3;\n\n // Animated blob positions\n vec2 p1 = vec2(sin(t * 0.7) * 0.6, cos(t * 0.5) * 0.4);\n vec2 p2 = vec2(cos(t * 0.8 + 1.0) * 0.5, sin(t * 0.6 + 2.0) * 0.5);\n vec2 p3 = vec2(sin(t * 0.4 + 3.0) * 0.4, cos(t * 0.9 + 1.5) * 0.3);\n\n float d1 = length(uv - p1) - 0.3;\n float d2 = length(uv - p2) - 0.25;\n float d3 = length(uv - p3) - 0.2;\n\n float d = smin(smin(d1, d2, 0.3), d3, 0.3);\n\n // Fresnel-like effect\n float edge = smoothstep(0.02, -0.02, d);\n float fresnel = pow(1.0 - abs(d) * 3.0, 3.0);\n fresnel = clamp(fresnel, 0.0, 1.0);\n\n // Metal color\n vec3 baseColor = vec3(0.7, 0.72, 0.75);\n vec3 highlight = vec3(0.95, 0.95, 1.0);\n vec3 dark = vec3(0.15, 0.16, 0.2);\n\n float n = sin(uv.x * 8.0 + t) * cos(uv.y * 8.0 - t * 0.7) * 0.5 + 0.5;\n vec3 color = mix(dark, baseColor, edge);\n color = mix(color, highlight, fresnel * 0.8);\n color += n * 0.05 * edge;\n\n // Environment reflection hint\n float ref = sin(uv.x * 4.0 + uv.y * 3.0 + t * 2.0) * 0.5 + 0.5;\n color += vec3(0.1, 0.12, 0.15) * ref * edge * 0.4;\n\n fragColor = vec4(color, 1.0);\n}\n";
|
|
11
1
|
export declare const PRESETS: Record<string, string>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
|
|
2
|
-
|
|
2
|
+
const gradientFlow = `#version 300 es
|
|
3
3
|
precision highp float;
|
|
4
4
|
|
|
5
5
|
in vec2 v_uv;
|
|
@@ -28,7 +28,7 @@ void main() {
|
|
|
28
28
|
}
|
|
29
29
|
`;
|
|
30
30
|
/** Procedural dots via hash/noise functions */
|
|
31
|
-
|
|
31
|
+
const particleField = `#version 300 es
|
|
32
32
|
precision highp float;
|
|
33
33
|
|
|
34
34
|
in vec2 v_uv;
|
|
@@ -75,7 +75,7 @@ void main() {
|
|
|
75
75
|
}
|
|
76
76
|
`;
|
|
77
77
|
/** Sinusoidal UV warp, responds to u_mouse */
|
|
78
|
-
|
|
78
|
+
const waveDistortion = `#version 300 es
|
|
79
79
|
precision highp float;
|
|
80
80
|
|
|
81
81
|
in vec2 v_uv;
|
|
@@ -108,7 +108,7 @@ void main() {
|
|
|
108
108
|
}
|
|
109
109
|
`;
|
|
110
110
|
/** Multi-point gradient interpolation */
|
|
111
|
-
|
|
111
|
+
const meshGradient = `#version 300 es
|
|
112
112
|
precision highp float;
|
|
113
113
|
|
|
114
114
|
in vec2 v_uv;
|
|
@@ -145,7 +145,7 @@ void main() {
|
|
|
145
145
|
}
|
|
146
146
|
`;
|
|
147
147
|
/** Fresnel-like metallic reflection via distance fields */
|
|
148
|
-
|
|
148
|
+
const liquidMetal = `#version 300 es
|
|
149
149
|
precision highp float;
|
|
150
150
|
|
|
151
151
|
in vec2 v_uv;
|
|
@@ -26,7 +26,6 @@ export interface ThemeController {
|
|
|
26
26
|
/** Stop watching `matchMedia` changes. Called automatically on HMR disposal. */
|
|
27
27
|
destroy(): void;
|
|
28
28
|
}
|
|
29
|
-
export declare const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
|
|
30
29
|
export declare const DEFAULT_STORAGE_KEY = "dryui-theme";
|
|
31
30
|
/**
|
|
32
31
|
* Read the stored theme mode. Exported for testing; production callers
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';
|
|
2
2
|
export const DEFAULT_STORAGE_KEY = 'dryui-theme';
|
|
3
3
|
function isBrowser() {
|
|
4
4
|
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dryui/ui",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.1",
|
|
4
4
|
"description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
|
|
5
5
|
"author": "Rob Balfre",
|
|
6
6
|
"license": "MIT",
|
|
@@ -784,7 +784,7 @@
|
|
|
784
784
|
"postpack": "bun ../../scripts/postpack-exports.ts"
|
|
785
785
|
},
|
|
786
786
|
"dependencies": {
|
|
787
|
-
"@dryui/primitives": "^1.7.
|
|
787
|
+
"@dryui/primitives": "^1.7.1"
|
|
788
788
|
},
|
|
789
789
|
"peerDependencies": {
|
|
790
790
|
"svelte": "^5.55.1"
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Placement } from '@dryui/primitives';
|
|
2
|
-
export type { Placement };
|
|
3
|
-
interface AnchorStylesOptions {
|
|
4
|
-
triggerEl: () => HTMLElement | null;
|
|
5
|
-
contentEl: () => HTMLElement | null;
|
|
6
|
-
placement: () => Placement;
|
|
7
|
-
offset: () => number;
|
|
8
|
-
}
|
|
9
|
-
export declare function useAnchorStyles(options: AnchorStylesOptions): {
|
|
10
|
-
readonly styles: Record<string, string>;
|
|
11
|
-
applyPosition: (node: HTMLElement, initialUserStyle?: string | null) => {
|
|
12
|
-
update(newUserStyle?: string | null): void;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { createAnchorPosition } from '@dryui/primitives';
|
|
2
|
-
export function useAnchorStyles(options) {
|
|
3
|
-
const position = createAnchorPosition(options.triggerEl, options.contentEl, {
|
|
4
|
-
get placement() {
|
|
5
|
-
return options.placement();
|
|
6
|
-
},
|
|
7
|
-
get offset() {
|
|
8
|
-
return options.offset();
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
function applyPosition(node, initialUserStyle) {
|
|
12
|
-
let userStyle = $state(initialUserStyle);
|
|
13
|
-
$effect(() => {
|
|
14
|
-
node.style.cssText = typeof userStyle === 'string' ? userStyle : '';
|
|
15
|
-
const styles = position.styles;
|
|
16
|
-
for (const [key, value] of Object.entries(styles)) {
|
|
17
|
-
node.style.setProperty(key, value);
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
return {
|
|
21
|
-
update(newUserStyle) {
|
|
22
|
-
userStyle = newUserStyle;
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
return {
|
|
27
|
-
get styles() {
|
|
28
|
-
return position.styles;
|
|
29
|
-
},
|
|
30
|
-
applyPosition
|
|
31
|
-
};
|
|
32
|
-
}
|