@longline/aqua-ui 1.0.299 → 1.0.302

package/map/layers/ParticlesLayer/ParticlesVertexShader.js

@@ -1,2 +1,2 @@
-var ParticlesVertexShader = /*glsl*/ "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n  attribute float a_idx;\n  attribute float a_offset;\n\n  uniform float u_point_size;\n  uniform int u_num_instances;\n  uniform int u_frame;\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;  \n  uniform float minU;\n  uniform float maxU;\n  uniform float minV;\n  uniform float maxV;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];  \n\n  // Output color, calculated by this vertex shader:\n  varying vec4 v_color;\n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 normalizedCoord) {\n    return texture2D(tex, normalizedCoord);\n  }\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  }   \n\n  // Vertex shader merely sets vertex position. Fragment shader \n  // does all the work.\n  void main() {\n    int idx = int(a_idx);   \n    int offset = int(a_offset);\n    int frame = u_frame + offset;\n    if(frame >= u_num_instances) frame -= u_num_instances;\n\n    // Determine color from frame.\n    int start = idx - frame;\n    if(start < 0) start += u_num_instances;\n    v_color = getGradientColor(float(u_num_instances - start) / float(u_num_instances));\n\n    // a_pos.x is -1..1, left to right.\n    // a_pox.y is -1..1, bottom to top (negative is bottom).\n    vec2 pos = a_pos; // Start off at initial position.\n\n    // Find initial U. If there isn't one (outside of bounds of texture), \n    // then we don't draw anything.\n    float w = texelFetch(uTexture, (pos + 1.0) / 2.0).w;\n    if(w == 0.0) return;\n\n\n    // Use velocity vector [idx] times.\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n\n    for(int i = 1; i < 100; i++) {\n      if(i > idx) break;\n      // Find velocity vector at current position.\n      // u and v are 0..1 values.\n      vec4 uColor = texelFetch(uTexture, (pos + 1.0) / 2.0);\n      vec4 vColor = texelFetch(vTexture, (pos + 1.0) / 2.0);\n      if(uColor.w == 0.0) return;\n      float u = uRange * uColor.x + minU;\n      float v = vRange * vColor.x + minV;\n      \n      pos.x += u / 10.0;\n      pos.y += v / 10.0;\n      if(pos.x <= -1.0 || pos.x >= 1.0 || pos.y <= -1.0 || pos.x >= 1.0) {\n        return;\n      }\n    }\n\n    gl_Position = vec4(pos.x, pos.y, 0.0, 1.0);\n    gl_PointSize = u_point_size;\n  }\n";
+var ParticlesVertexShader = /*glsl*/ "\n  attribute vec2 a_pos;\n  attribute float a_idx;\n  attribute float a_offset;\n\n  uniform float u_point_size;\n  uniform int u_num_instances;\n  uniform int u_frame;\n  uniform sampler2D positionTexture;  // Pre-computed positions (X in RG, Y in BA)\n  uniform float u_posTexWidth;\n  uniform float u_posTexHeight;\n  uniform float u_density;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n\n  // Output color, calculated by this vertex shader:\n  varying vec4 v_color;\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i];\n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i];\n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);\n  }\n\n  // Decode a 16-bit encoded position from two bytes (high, low as 0-1 floats)\n  float decodePosition(float hi, float lo) {\n    float encoded = hi * 255.0 * 256.0 + lo * 255.0;\n    return encoded / 65535.0 * 2.0 - 1.0;\n  }\n\n  void main() {\n    int idx = int(a_idx);\n    int offset = int(a_offset);\n    int frame = u_frame + offset;\n    if(frame >= u_num_instances) frame -= u_num_instances;\n\n    // Determine color from frame.\n    int start = idx - frame;\n    if(start < 0) start += u_num_instances;\n    v_color = getGradientColor(float(u_num_instances - start) / float(u_num_instances));\n\n    // Compute texture coordinates for this particle's pre-computed position.\n    // WebGL 1 doesn't have gl_VertexID, so we compute the particle index from\n    // vertex attributes. The vertex buffer layout is:\n    // for y in [0, density): for x in [0, density): for i in [0, particles): (pos, idx, offset)\n\n    // Convert grid position back to grid index\n    float gridX = (a_pos.x + 0.99) * (u_density - 1.0) / 1.98;\n    float gridY = (a_pos.y + 0.99) * (u_density - 1.0) / 1.98;\n    float gridIndex = floor(gridY + 0.5) * u_density + floor(gridX + 0.5);\n    float particleIdx = gridIndex * float(u_num_instances) + a_idx;\n\n    // Convert particle index to texture coordinates\n    float texX = mod(particleIdx, u_posTexWidth);\n    float texY = floor(particleIdx / u_posTexWidth);\n\n    // Sample position texture (add 0.5 to sample pixel center)\n    vec2 texCoord = vec2((texX + 0.5) / u_posTexWidth, (texY + 0.5) / u_posTexHeight);\n    vec4 encodedPos = texture2D(positionTexture, texCoord);\n\n    // Decode position (X in RG, Y in BA)\n    float posX = decodePosition(encodedPos.r, encodedPos.g);\n    float posY = decodePosition(encodedPos.b, encodedPos.a);\n\n    // Check for off-screen marker (position > 1.5 means invalid)\n    if(posX > 1.5) return;\n\n    gl_Position = vec4(posX, posY, 0.0, 1.0);\n    gl_PointSize = u_point_size;\n  }\n";
 export { ParticlesVertexShader };

package/map/layers/ParticlesLayer/PositionComputeFragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const PositionComputeFragmentShader = "\n  #ifdef GL_ES\n  precision highp float;\n  #endif\n\n  uniform sampler2D uvTexture;  // Combined UV texture (U in R, V in G)\n  uniform float minU;\n  uniform float maxU;\n  uniform float minV;\n  uniform float maxV;\n  uniform float u_density;      // Grid density (e.g., 40)\n  uniform float u_particles;    // Particles per trail (e.g., 80)\n  uniform float u_texWidth;     // Position texture width\n  uniform float u_minVisMag;    // Minimum visible velocity magnitude\n  uniform float u_maxVisMag;    // Maximum visible velocity magnitude\n\n  // Encode a value in range [-1, 1] to two bytes (high, low) as 0-1 floats\n  vec2 encodePosition(float pos) {\n    // Map [-1, 1] to [0, 65535]\n    float encoded = (pos + 1.0) * 0.5 * 65535.0;\n    float hi = floor(encoded / 256.0);\n    float lo = encoded - hi * 256.0;\n    return vec2(hi / 255.0, lo / 255.0);\n  }\n\n  void main() {\n    // Determine which particle this fragment represents\n    float pixelX = floor(gl_FragCoord.x);\n    float pixelY = floor(gl_FragCoord.y);\n    float particleIndex = pixelY * u_texWidth + pixelX;\n\n    float totalParticles = u_density * u_density * u_particles;\n\n    // If this pixel is beyond our particle count, output off-screen position\n    if (particleIndex >= totalParticles) {\n      // Encode (2, 2) as off-screen marker\n      gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n      return;\n    }\n\n    // Compute grid position and trail index from particle index\n    float gridIndex = floor(particleIndex / u_particles);\n    float trailIdx = particleIndex - gridIndex * u_particles;\n    float gridX = mod(gridIndex, u_density);\n    float gridY = floor(gridIndex / u_density);\n\n    // Compute starting position (same formula as createBufferScreen)\n    float startX = gridX * 1.98 / (u_density - 1.0) - 0.99;\n    float startY = gridY * 1.98 / (u_density - 1.0) - 0.99;\n\n    vec2 pos = vec2(startX, startY);\n\n    // Check if starting position has valid UV data\n    vec2 texCoord = (pos + 1.0) / 2.0;\n    vec4 uvColor = texture2D(uvTexture, texCoord);\n    if (uvColor.w == 0.0) {\n      // No data at starting position - output off-screen\n      gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n      return;\n    }\n\n    // Compute maximum possible velocity magnitude from data ranges\n    // Max magnitude is at one of the four corners of the UV rectangle\n    float maxPossibleMag = sqrt(\n      max(minU * minU, maxU * maxU) +\n      max(minV * minV, maxV * maxV)\n    );\n\n    // Trace the particle path\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    int idx = int(trailIdx);\n\n    for (int i = 1; i < 100; i++) {\n      if (i > idx) break;\n\n      texCoord = (pos + 1.0) / 2.0;\n      uvColor = texture2D(uvTexture, texCoord);\n\n      if (uvColor.w == 0.0) {\n        // Hit boundary - output off-screen\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n\n      float u = uRange * uvColor.x + minU;\n      float v = vRange * uvColor.y + minV;\n\n      // Compute velocity magnitude\n      float mag = sqrt(u * u + v * v);\n\n      // If magnitude is zero, skip this particle entirely\n      if (mag == 0.0) {\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n\n      // Linear remap magnitude to visible range [minVisMag, maxVisMag]\n      float t = mag / maxPossibleMag;  // Normalize to [0, 1]\n      float newMag = u_minVisMag + t * (u_maxVisMag - u_minVisMag);\n\n      // Scale velocity to new magnitude while preserving direction\n      float scale = newMag / mag;\n      u = u * scale;\n      v = v * scale;\n\n      pos.x += u / 10.0;\n      pos.y += v / 10.0;\n\n      // Bounds check (same as original shader, including the bug with pos.x on right side)\n      if (pos.x <= -1.0 || pos.x >= 1.0 || pos.y <= -1.0 || pos.x >= 1.0) {\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n    }\n\n    // Output encoded position: X in RG, Y in BA\n    gl_FragColor = vec4(encodePosition(pos.x), encodePosition(pos.y));\n  }\n";
+export { PositionComputeFragmentShader };

package/map/layers/ParticlesLayer/PositionComputeFragmentShader.js

@@ -0,0 +1,2 @@
+var PositionComputeFragmentShader = /*glsl*/ "\n  #ifdef GL_ES\n  precision highp float;\n  #endif\n\n  uniform sampler2D uvTexture;  // Combined UV texture (U in R, V in G)\n  uniform float minU;\n  uniform float maxU;\n  uniform float minV;\n  uniform float maxV;\n  uniform float u_density;      // Grid density (e.g., 40)\n  uniform float u_particles;    // Particles per trail (e.g., 80)\n  uniform float u_texWidth;     // Position texture width\n  uniform float u_minVisMag;    // Minimum visible velocity magnitude\n  uniform float u_maxVisMag;    // Maximum visible velocity magnitude\n\n  // Encode a value in range [-1, 1] to two bytes (high, low) as 0-1 floats\n  vec2 encodePosition(float pos) {\n    // Map [-1, 1] to [0, 65535]\n    float encoded = (pos + 1.0) * 0.5 * 65535.0;\n    float hi = floor(encoded / 256.0);\n    float lo = encoded - hi * 256.0;\n    return vec2(hi / 255.0, lo / 255.0);\n  }\n\n  void main() {\n    // Determine which particle this fragment represents\n    float pixelX = floor(gl_FragCoord.x);\n    float pixelY = floor(gl_FragCoord.y);\n    float particleIndex = pixelY * u_texWidth + pixelX;\n\n    float totalParticles = u_density * u_density * u_particles;\n\n    // If this pixel is beyond our particle count, output off-screen position\n    if (particleIndex >= totalParticles) {\n      // Encode (2, 2) as off-screen marker\n      gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n      return;\n    }\n\n    // Compute grid position and trail index from particle index\n    float gridIndex = floor(particleIndex / u_particles);\n    float trailIdx = particleIndex - gridIndex * u_particles;\n    float gridX = mod(gridIndex, u_density);\n    float gridY = floor(gridIndex / u_density);\n\n    // Compute starting position (same formula as createBufferScreen)\n    float startX = gridX * 1.98 / (u_density - 1.0) - 0.99;\n    float startY = gridY * 1.98 / (u_density - 1.0) - 0.99;\n\n    vec2 pos = vec2(startX, startY);\n\n    // Check if starting position has valid UV data\n    vec2 texCoord = (pos + 1.0) / 2.0;\n    vec4 uvColor = texture2D(uvTexture, texCoord);\n    if (uvColor.w == 0.0) {\n      // No data at starting position - output off-screen\n      gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n      return;\n    }\n\n    // Compute maximum possible velocity magnitude from data ranges\n    // Max magnitude is at one of the four corners of the UV rectangle\n    float maxPossibleMag = sqrt(\n      max(minU * minU, maxU * maxU) +\n      max(minV * minV, maxV * maxV)\n    );\n\n    // Trace the particle path\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    int idx = int(trailIdx);\n\n    for (int i = 1; i < 100; i++) {\n      if (i > idx) break;\n\n      texCoord = (pos + 1.0) / 2.0;\n      uvColor = texture2D(uvTexture, texCoord);\n\n      if (uvColor.w == 0.0) {\n        // Hit boundary - output off-screen\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n\n      float u = uRange * uvColor.x + minU;\n      float v = vRange * uvColor.y + minV;\n\n      // Compute velocity magnitude\n      float mag = sqrt(u * u + v * v);\n\n      // If magnitude is zero, skip this particle entirely\n      if (mag == 0.0) {\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n\n      // Linear remap magnitude to visible range [minVisMag, maxVisMag]\n      float t = mag / maxPossibleMag;  // Normalize to [0, 1]\n      float newMag = u_minVisMag + t * (u_maxVisMag - u_minVisMag);\n\n      // Scale velocity to new magnitude while preserving direction\n      float scale = newMag / mag;\n      u = u * scale;\n      v = v * scale;\n\n      pos.x += u / 10.0;\n      pos.y += v / 10.0;\n\n      // Bounds check (same as original shader, including the bug with pos.x on right side)\n      if (pos.x <= -1.0 || pos.x >= 1.0 || pos.y <= -1.0 || pos.x >= 1.0) {\n        gl_FragColor = vec4(encodePosition(2.0), encodePosition(2.0));\n        return;\n      }\n    }\n\n    // Output encoded position: X in RG, Y in BA\n    gl_FragColor = vec4(encodePosition(pos.x), encodePosition(pos.y));\n  }\n";
+export { PositionComputeFragmentShader };

package/map/layers/ParticlesLayer/PositionComputeVertexShader.d.ts

@@ -0,0 +1,2 @@
+declare const PositionComputeVertexShader = "\n  attribute vec2 a_pos;\n\n  void main() {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { PositionComputeVertexShader };

package/map/layers/ParticlesLayer/PositionComputeVertexShader.js

@@ -0,0 +1,2 @@
+var PositionComputeVertexShader = /*glsl*/ "\n  attribute vec2 a_pos;\n\n  void main() {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { PositionComputeVertexShader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.299",
+  "version": "1.0.302",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/services/Dialog/AlertDialog.d.ts

@@ -20,7 +20,7 @@ interface IAlertDialogProps {
      */
     onClose: () => void;
     /**
-     * If true, inverteds Dialog colors.
+     * If true, inverts Dialog colors.
      * @default false
      */
     inverted?: boolean;

package/services/Dialog/ConfirmDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface IConfirmDialogProps {
     /**
      * Dialog content.
      */
@@ -23,7 +23,7 @@ interface IProps {
      */
     onConfirm: () => void;
     /**
-     * If true, inverteds Dialog colors.
+     * If true, inverts Dialog colors.
      * @default false
      */
     inverted?: boolean;
@@ -35,10 +35,10 @@ interface IProps {
 }
 /**
  * A `Dialog.Confirm` is a preset dialog with a title, and a "Yes" and a "No"
- * button. Clicking "Yes" cals `onConfirm`, and clicking "No" calls `onClose`.
+ * button. Clicking "Yes" calls `onConfirm`, and clicking "No" calls `onClose`.
  */
 declare const ConfirmDialog: {
-    ({ open, title, ...props }: IProps): React.JSX.Element;
+    ({ open, title, ...props }: IConfirmDialogProps): React.JSX.Element;
     displayName: string;
 };
-export { ConfirmDialog, IProps };
+export { ConfirmDialog, IConfirmDialogProps };

package/services/Dialog/ConfirmDialog.js

@@ -15,7 +15,7 @@ import { Dialog } from './Dialog';
 import { PrimaryButton } from '../../controls/PrimaryButton';
 /**
  * A `Dialog.Confirm` is a preset dialog with a title, and a "Yes" and a "No"
- * button. Clicking "Yes" cals `onConfirm`, and clicking "No" calls `onClose`.
+ * button. Clicking "Yes" calls `onConfirm`, and clicking "No" calls `onClose`.
  */
 var ConfirmDialog = function (_a) {
     var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? 'Confirmation' : _c, props = __rest(_a, ["open", "title"]);

package/services/Dialog/Dialog.d.ts

@@ -25,7 +25,7 @@ interface IDialogProps {
      */
     canClose?: boolean;
     /**
-     * If true, inverteds Dialog colors.
+     * If true, inverts Dialog colors.
      * @default false
      */
     inverted?: boolean;
@@ -40,47 +40,77 @@ declare const Dialog: {
     ({ open, canClose, width, inverted, ...props }: IDialogProps): React.JSX.Element;
     displayName: string;
     /**
-     * Dialog.Header contains dialog header content.
+     * The header section of a Dialog, typically containing a title.
+     * Rendered with larger text and appropriate spacing.
      */
     Header: {
-        (props: import("./DialogHeader").IProps): React.JSX.Element;
+        (props: import("./DialogHeader").IDialogHeaderProps): React.JSX.Element;
         displayName: string;
     };
     /**
-     * Dialog.Content contains main dialog body content.
+     * The main content area of a Dialog.
+     * Provides appropriate padding and scrollable overflow for longer content.
      */
     Content: {
-        ({ nopadding, maxHeight, ...props }: import("./DialogContent").IProps): React.JSX.Element;
+        ({ nopadding, maxHeight, ...props }: import("./DialogContent").IDialogContentProps): React.JSX.Element;
         displayName: string;
     };
     /**
-     * Dialog.Footer contains dialog footer content.
+     * The footer section of a Dialog, typically containing action buttons.
+     * Buttons are right-aligned with appropriate spacing between them.
      */
     Footer: {
-        ({ align, ...props }: import("./DialogFooter").IProps): React.JSX.Element;
+        ({ align, ...props }: import("./DialogFooter").IDialogFooterProps): React.JSX.Element;
         displayName: string;
     };
     /**
-     * The Dialog component offers a pre-built Dialog.Alert type, with an "OK" button.
-     * The caller provides a title, and any JSX inside the component is used as dialog content.
+     * A preset alert dialog with a title, content, and single "OK" button.
+     *
+     * ```tsx
+     * <Dialog.Alert
+     *   open={showAlert}
+     *   title="Warning"
+     *   onClose={() => setShowAlert(false)}
+     * >
+     *   Your session will expire in 5 minutes.
+     * </Dialog.Alert>
+     * ```
      */
     Alert: {
         ({ open, title, ...props }: import("./AlertDialog").IAlertDialogProps): React.JSX.Element;
         displayName: string;
     };
     /**
-     * The Dialog component offers a pre-built Dialog.Confirm type, with a "Yes" and a "No"
-     * button. The caller provides a title, and any JSX inside the component is used as dialog
-     * content.
+     * A preset confirmation dialog with "Yes" and "No" buttons.
+     *
+     * ```tsx
+     * <Dialog.Confirm
+     *   open={showConfirm}
+     *   title="Delete Item"
+     *   onYes={handleDelete}
+     *   onNo={() => setShowConfirm(false)}
+     * >
+     *   Are you sure you want to delete this item?
+     * </Dialog.Confirm>
+     * ```
      */
     Confirm: {
-        ({ open, title, ...props }: import("./ConfirmDialog").IProps): React.JSX.Element;
+        ({ open, title, ...props }: import("./ConfirmDialog").IConfirmDialogProps): React.JSX.Element;
         displayName: string;
     };
     /**
-     * The Dialog component offers a pre-built Dialog.Xhr type, with an "OK" and a "Retry"
-     * button. This dialog can be used when an XHR request fails. It takes an error attribute
-     * with an Axios response object, and reports it to the user.
+     * A preset dialog for displaying Axios network errors.
+     * Shows a human-readable error message based on the HTTP status code.
+     * Includes "OK" button and optional "Retry" button.
+     *
+     * ```tsx
+     * <Dialog.Xhr
+     *   open={!!error}
+     *   error={error}
+     *   onClose={() => setError(null)}
+     *   onRetry={() => refetch()}
+     * />
+     * ```
      */
     Xhr: {
         ({ open, title, ...props }: import("./XhrDialog").IXhrDialogProps): React.JSX.Element;

package/services/Dialog/Dialog.js

@@ -34,11 +34,63 @@ import { ConfirmDialog } from './ConfirmDialog';
 import { XhrDialog } from './XhrDialog';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
 /**
- * A Dialog is an overlay window that is shown when the Dialog’s `open`
- * attribute is set to `true`. The calling code is responsible for setting
- * `open` to false when the Dialog should close. The Dialog also calls
- * `onClose` when the user clicks outside the Dialog (`canClose` can be set
- * to prevent this behavior).
+ * A modal overlay window for displaying content that requires user attention or interaction.
+ *
+ * The `Dialog` component renders its content in a React portal, ensuring it appears above
+ * all other page content with a semi-transparent backdrop. It supports animated open/close
+ * transitions, click-outside-to-close behavior, and escape key handling.
+ *
+ * ## Usage
+ *
+ * Build dialogs using the compound component pattern with `Dialog.Header`, `Dialog.Content`,
+ * and `Dialog.Footer`:
+ *
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Dialog.Header>Confirm Action</Dialog.Header>
+ *   <Dialog.Content>
+ *     Are you sure you want to proceed?
+ *   </Dialog.Content>
+ *   <Dialog.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *     <PrimaryButton onClick={handleConfirm}>Confirm</PrimaryButton>
+ *   </Dialog.Footer>
+ * </Dialog>
+ * ```
+ *
+ * ## Preset Dialogs
+ *
+ * For common use cases, preset dialog variants are available:
+ *
+ * | Component | Description |
+ * |-----------|-------------|
+ * | `Dialog.Alert` | Simple alert with title, content, and "OK" button |
+ * | `Dialog.Confirm` | Confirmation with "Yes" and "No" buttons |
+ * | `Dialog.Xhr` | Network error display with optional "Retry" button |
+ *
+ * ## Close Behavior
+ *
+ * By default, dialogs can be closed by:
+ * - Clicking outside the dialog window
+ * - Pressing the Escape key
+ * - Calling `onClose` programmatically
+ *
+ * Set `canClose={false}` to prevent user-initiated closing (useful during async operations).
+ *
+ * ## Animation States
+ *
+ * The dialog uses `react-transition-state` for smooth enter/exit animations:
+ * - **preEnter/exiting**: Faded out, scaled to 80%
+ * - **entering/entered**: Fully visible, normal scale
+ *
+ * Transitions use a 500ms duration with a bounce easing curve.
+ *
+ * ## Responsive Width
+ *
+ * On small screens (below theme breakpoint), dialog width automatically reduces to
+ * a maximum of 400px to ensure proper display on mobile devices.
  */
 var DialogBase = function (props) {
     var windowRef = React.useRef(null);
@@ -74,32 +126,62 @@ var Dialog = function (_a) {
 };
 Dialog.displayName = "Dialog";
 /**
- * Dialog.Header contains dialog header content.
+ * The header section of a Dialog, typically containing a title.
+ * Rendered with larger text and appropriate spacing.
  */
 Dialog.Header = DialogHeader;
 /**
- * Dialog.Content contains main dialog body content.
+ * The main content area of a Dialog.
+ * Provides appropriate padding and scrollable overflow for longer content.
  */
 Dialog.Content = DialogContent;
 /**
- * Dialog.Footer contains dialog footer content.
+ * The footer section of a Dialog, typically containing action buttons.
+ * Buttons are right-aligned with appropriate spacing between them.
  */
 Dialog.Footer = DialogFooter;
 /**
- * The Dialog component offers a pre-built Dialog.Alert type, with an "OK" button.
- * The caller provides a title, and any JSX inside the component is used as dialog content.
+ * A preset alert dialog with a title, content, and single "OK" button.
+ *
+ * ```tsx
+ * <Dialog.Alert
+ *   open={showAlert}
+ *   title="Warning"
+ *   onClose={() => setShowAlert(false)}
+ * >
+ *   Your session will expire in 5 minutes.
+ * </Dialog.Alert>
+ * ```
  */
 Dialog.Alert = AlertDialog;
 /**
- * The Dialog component offers a pre-built Dialog.Confirm type, with a "Yes" and a "No"
- * button. The caller provides a title, and any JSX inside the component is used as dialog
- * content.
+ * A preset confirmation dialog with "Yes" and "No" buttons.
+ *
+ * ```tsx
+ * <Dialog.Confirm
+ *   open={showConfirm}
+ *   title="Delete Item"
+ *   onYes={handleDelete}
+ *   onNo={() => setShowConfirm(false)}
+ * >
+ *   Are you sure you want to delete this item?
+ * </Dialog.Confirm>
+ * ```
  */
 Dialog.Confirm = ConfirmDialog;
 /**
- * The Dialog component offers a pre-built Dialog.Xhr type, with an "OK" and a "Retry"
- * button. This dialog can be used when an XHR request fails. It takes an error attribute
- * with an Axios response object, and reports it to the user.
+ * A preset dialog for displaying Axios network errors.
+ * Shows a human-readable error message based on the HTTP status code.
+ * Includes "OK" button and optional "Retry" button.
+ *
+ * ```tsx
+ * <Dialog.Xhr
+ *   open={!!error}
+ *   error={error}
+ *   onClose={() => setError(null)}
+ *   onRetry={() => refetch()}
+ * />
+ * ```
  */
 Dialog.Xhr = XhrDialog;
 export { Dialog };

package/services/Dialog/DialogBackground.js

@@ -8,5 +8,6 @@ var DialogBackgroundBase = function (props) {
     return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status) });
 };
 var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"], ["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"])));
+DialogBackground.displayName = "DialogBackground";
 export { DialogBackground };
 var templateObject_1;

package/services/Dialog/DialogContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface IDialogContentProps {
     /** @ignore */
     className?: string;
     /**
@@ -24,7 +24,7 @@ interface IProps {
  * can be adjusted with the `maxHeight` prop.
  */
 declare const DialogContent: {
-    ({ nopadding, maxHeight, ...props }: IProps): React.JSX.Element;
+    ({ nopadding, maxHeight, ...props }: IDialogContentProps): React.JSX.Element;
     displayName: string;
 };
-export { DialogContent, IProps };
+export { DialogContent, IDialogContentProps };

package/services/Dialog/DialogContent.js

@@ -29,7 +29,7 @@ import styled, { css } from 'styled-components';
 var DialogContentBase = function (props) {
     return React.createElement("div", { className: props.className }, props.children);
 };
-var DialogContentStyled = styled(DialogContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;  \n"], ["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;  \n"
+var DialogContentStyled = styled(DialogContentBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;\n"], ["\n  position:   relative;\n  ", "\n  max-height: ", "vh;\n  overflow-y: auto;\n"
     /**
      * `Dialog.Content` is a content block for a `Dialog` component. The content
      * will auto-scroll when it is taller than 70% of the viewport. This percentage

package/services/Dialog/DialogFooter.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface IDialogFooterProps {
     /** @ignore */
     className?: string;
     /**
@@ -18,7 +18,7 @@ interface IProps {
  * where the `align` prop may be used to align them left, right or center.
  */
 declare const DialogFooter: {
-    ({ align, ...props }: IProps): React.JSX.Element;
+    ({ align, ...props }: IDialogFooterProps): React.JSX.Element;
     displayName: string;
 };
-export { DialogFooter, IProps };
+export { DialogFooter, IDialogFooterProps };

package/services/Dialog/DialogHeader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface IDialogHeaderProps {
     /** @ignore */
     className?: string;
     /**
@@ -12,7 +12,7 @@ interface IProps {
  * any JSX.
  */
 declare const DialogHeader: {
-    (props: IProps): React.JSX.Element;
+    (props: IDialogHeaderProps): React.JSX.Element;
     displayName: string;
 };
-export { DialogHeader, IProps };
+export { DialogHeader, IDialogHeaderProps };

package/services/Dialog/DialogWindow.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-interface IProps {
+interface IDialogWindowProps {
     /** @ignore */
     className?: string;
     /** @ignore */
     children?: React.ReactNode;
-    windowRef?: any;
     width?: number | string;
     /**
      * Are Dialog colors inverted?
@@ -15,7 +14,7 @@ interface IProps {
      */
     status: string;
 }
-declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IDialogWindowProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, never>> & string & Omit<React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
+}, never>> & string & Omit<React.ForwardRefExoticComponent<IDialogWindowProps & React.RefAttributes<HTMLDivElement>>, keyof React.Component<any, {}, any>>;
 export { DialogWindow };

package/services/Dialog/DialogWindow.js

@@ -22,5 +22,6 @@ var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_
         return p.width;
     return p.width > 400 ? '400px' : "".concat(p.width, "px");
 });
+DialogWindow.displayName = "DialogWindow";
 export { DialogWindow };
 var templateObject_1, templateObject_2;

package/services/Dialog/XhrDialog.d.ts

@@ -26,7 +26,7 @@ interface IXhrDialogProps {
      */
     title?: string;
     /**
-     * If true, inverteds Dialog colors.
+     * If true, inverts Dialog colors.
      * @default false
      */
     inverted?: boolean;

package/services/Dialog/index.d.ts

@@ -1 +1,7 @@
-export { Dialog } from './Dialog';
+export { Dialog, IDialogProps } from './Dialog';
+export { IAlertDialogProps } from './AlertDialog';
+export { IConfirmDialogProps } from './ConfirmDialog';
+export { IXhrDialogProps } from './XhrDialog';
+export { IDialogHeaderProps } from './DialogHeader';
+export { IDialogContentProps } from './DialogContent';
+export { IDialogFooterProps } from './DialogFooter';

package/svg/icons/index.d.ts

@@ -22,6 +22,7 @@ export declare enum Icons {
     Download = "/aquaui-sprites.svg#icon-download",
     Edit = "/aquaui-sprites.svg#icon-edit",
     Ellipsis = "/aquaui-sprites.svg#icon-ellipsis",
+    Eyedropper = "/aquaui-sprites.svg#icon-eyedropper",
     Expand = "/aquaui-sprites.svg#icon-expand",
     Export = "/aquaui-sprites.svg#icon-export",
     Extents = "/aquaui-sprites.svg#icon-extents",

package/svg/icons/index.js

@@ -23,6 +23,7 @@ export var Icons;
     Icons["Download"] = "/aquaui-sprites.svg#icon-download";
     Icons["Edit"] = "/aquaui-sprites.svg#icon-edit";
     Icons["Ellipsis"] = "/aquaui-sprites.svg#icon-ellipsis";
+    Icons["Eyedropper"] = "/aquaui-sprites.svg#icon-eyedropper";
     Icons["Expand"] = "/aquaui-sprites.svg#icon-expand";
     Icons["Export"] = "/aquaui-sprites.svg#icon-export";
     Icons["Extents"] = "/aquaui-sprites.svg#icon-extents";