@lightningtv/solid 3.0.7-1 → 3.0.7

package/src/core/shaders.ts

@@ -73,6 +73,9 @@ export const defaultShaderRadialGradient: ShaderRadialGradient =
 export const defaultShaderLinearGradient: ShaderLinearGradient =
   lngr_shaders.LinearGradient;
 
+export const defaultShaderRoundedWithBorder =
+  lngr_shaders.RoundedWithBorder as ShaderRoundedWithBorder;
+
 function calcFactoredRadiusArray(
   radius: Vec4,
   width: number,
@@ -123,6 +126,7 @@ const roundedWithBorderProps: lngr.ShaderProps<ShaderRoundedWithBorderProps> = {
       return toValidVec4(value);
     },
   },
+  'border-align': 0,
   'top-left': {
     default: 0,
     set(value, props) {
@@ -206,297 +210,6 @@ const roundedWithBorderProps: lngr.ShaderProps<ShaderRoundedWithBorderProps> = {
   'border-inset': true,
 };
 
-export const defaultShaderRoundedWithBorder: ShaderRoundedWithBorder = {
-  props: roundedWithBorderProps,
-  canBatch: () => false,
-  update(node) {
-    let props = this.props!;
-    let borderWidth = props['border-w'] as Vec4;
-    let borderGap = props['border-gap'];
-    let inset = props['border-inset'];
-
-    let [b_t, b_r, b_b, b_l] = borderWidth;
-
-    this.uniformRGBA('u_borderColor', props['border-color']);
-    this.uniform4fa('u_border', borderWidth);
-    this.uniform1f('u_gap', borderGap);
-    this.uniform1i('u_inset', inset ? 1 : 0);
-
-    // Check if border is zero (no border widths)
-    let borderZero = b_t === 0 && b_r === 0 && b_b === 0 && b_l === 0;
-    this.uniform1i('u_borderZero', borderZero ? 1 : 0);
-
-    let origWidth = node.w;
-    let origHeight = node.h;
-    this.uniform2f('u_dimensions_orig', origWidth, origHeight);
-
-    let finalWidth = origWidth;
-    let finalHeight = origHeight;
-    if (!inset) {
-      // For outside borders, expand dimensions
-      finalWidth = origWidth + b_l + b_r + borderGap * 2;
-      finalHeight = origHeight + b_t + b_b + borderGap * 2;
-    }
-
-    // u_dimensions for the shader's SDF functions
-    this.uniform2f('u_dimensions', finalWidth, finalHeight);
-
-    // The `radius` property is for the content rectangle.
-    // Factor it against the appropriate dimensions to prevent self-intersection.
-    let contentRadius = calcFactoredRadiusArray(
-      props.radius as Vec4,
-      origWidth,
-      origHeight,
-    );
-
-    // Calculate the appropriate radius for the shader based on inset mode
-    let finalRadius = contentRadius;
-    if (!inset) {
-      // For each corner, the total radius is content radius + gap + border thickness.
-      // Border thickness at a corner is approximated as the max of the two adjacent border sides.
-      let outerRadius: Vec4 = [
-        contentRadius[0] + borderGap + Math.max(b_t, b_l), // top-left
-        contentRadius[1] + borderGap + Math.max(b_t, b_r), // top-right
-        contentRadius[2] + borderGap + Math.max(b_b, b_r), // bottom-right
-        contentRadius[3] + borderGap + Math.max(b_b, b_l), // bottom-left
-      ];
-      calcFactoredRadiusArray(
-        outerRadius,
-        finalWidth,
-        finalHeight,
-        finalRadius,
-      );
-    }
-
-    this.uniform4fa('u_radius', finalRadius);
-  },
-  vertex: /*glsl*/ `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    /* Passed by lightning renderer */
-    attribute vec2 a_position;
-    attribute vec2 a_textureCoords;
-    attribute vec4 a_color;
-    attribute vec2 a_nodeCoords;
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-
-    /* Passed by shader setup */
-    uniform vec2 u_dimensions;
-    uniform vec2 u_dimensions_orig;
-    uniform vec4 u_radius;
-    uniform vec4 u_border;
-    uniform float u_gap;
-    uniform bool u_inset;
-    uniform bool u_borderZero;
-
-    varying vec4 v_color;
-    varying vec2 v_texcoords;
-    varying vec2 v_nodeCoords;
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-    varying vec2 v_halfDimensions;
-
-    void main() {
-      vec2 screen_space = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-      v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
-
-      float b_t = u_border.x;
-      float b_r = u_border.y;
-      float b_b = u_border.z;
-      float b_l = u_border.w;
-
-      // Calculate the offset to expand/contract the quad for border and gap
-      vec2 expansion_offset = vec2(0.0);
-      if (!u_inset) {
-        // Outside border: expand the quad
-        if (a_nodeCoords.x == 0.0) { // Left edge vertex
-          expansion_offset.x = -(b_l + u_gap);
-        } else { // Right edge vertex (a_nodeCoords.x == 1.0)
-          expansion_offset.x =  (b_r + u_gap);
-        }
-        if (a_nodeCoords.y == 0.0) { // Top edge vertex
-          expansion_offset.y = -(b_t + u_gap);
-        } else { // Bottom edge vertex (a_nodeCoords.y == 1.0)
-          expansion_offset.y =  (b_b + u_gap);
-        }
-      }
-      // For inset borders, no expansion needed - use original position
-
-      // Texture coordinate calculation
-      v_texcoords = a_textureCoords;
-      if (!u_inset) { // For outside borders, adjust texture coordinates for expansion
-        v_texcoords *= u_dimensions;
-        v_texcoords.x -= b_l + u_gap;
-        v_texcoords.y -= b_t + u_gap;
-        v_texcoords /= u_dimensions_orig;
-      }
-
-      v_halfDimensions = u_dimensions * 0.5;
-      if (!u_borderZero) {
-
-        float gap_x2 = u_gap * 2.0;
-
-        if (u_inset) {
-          // For inset borders, flip the meaning:
-          // v_borderEndRadius/Size represents the gap area
-          // v_innerRadius/Size represents the border area
-
-          // Gap area (v_borderEnd represents gap boundary) - uniform gap
-          v_borderEndRadius = u_radius - u_gap - 0.5;
-          v_borderEndSize = (u_dimensions - gap_x2 - 1.0) * 0.5;
-
-          // Border area (v_inner represents border boundary) - individual border widths
-          v_innerRadius.x = u_radius.x - u_gap - max(b_t, b_l) - 0.5;
-          v_innerRadius.y = u_radius.y - u_gap - max(b_t, b_r) - 0.5;
-          v_innerRadius.z = u_radius.z - u_gap - max(b_b, b_r) - 0.5;
-          v_innerRadius.w = u_radius.w - u_gap - max(b_b, b_l) - 0.5;
-
-          v_innerSize = (u_dimensions - gap_x2 - vec2(b_l + b_r, b_t + b_b) - 1.0) * 0.5;
-        } else {
-          // For outside borders, calculate from expanded dimensions inward
-          v_borderEndRadius.x = u_radius.x - max(b_t, b_l) - 0.5;
-          v_borderEndRadius.y = u_radius.y - max(b_t, b_r) - 0.5;
-          v_borderEndRadius.z = u_radius.z - max(b_b, b_r) - 0.5;
-          v_borderEndRadius.w = u_radius.w - max(b_b, b_l) - 0.5;
-
-          v_borderEndSize = (u_dimensions - vec2(b_l + b_r, b_t + b_b) - 1.0) * 0.5;
-
-          v_innerRadius.x = u_radius.x - max(b_t, b_l) - u_gap - 0.5;
-          v_innerRadius.y = u_radius.y - max(b_t, b_r) - u_gap - 0.5;
-          v_innerRadius.z = u_radius.z - max(b_b, b_r) - u_gap - 0.5;
-          v_innerRadius.w = u_radius.w - max(b_b, b_l) - u_gap - 0.5;
-
-          v_innerSize.x = u_dimensions.x - (b_l + b_r) - gap_x2 - 1.0;
-          v_innerSize.y = u_dimensions.y - (b_t + b_b) - gap_x2 - 1.0;
-          v_innerSize *= 0.5;
-        }
-
-        v_borderEndRadius = max(v_borderEndRadius, vec4(0.0));
-        v_innerRadius     = max(v_innerRadius, vec4(0.0));
-      }
-
-      vec2 normalized = (a_position + expansion_offset) * u_pixelRatio;
-
-      gl_Position = vec4(normalized.x * screen_space.x - 1.0, normalized.y * -abs(screen_space.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screen_space.y) * gl_Position.y;
-    }
-  `,
-  fragment: /*glsl*/ `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    /* Passed by lightning renderer */
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
-    uniform sampler2D u_texture;
-
-    /* Passed by shader setup */
-    uniform vec4 u_radius;
-
-    uniform vec4 u_border;
-    uniform vec4 u_borderColor;
-    uniform bool u_inset;
-    uniform bool u_borderZero;
-
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_color;
-    varying vec2 v_texcoords;
-    varying vec2 v_nodeCoords;
-
-    varying vec2 v_halfDimensions;
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-
-    float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
-    }
-
-    void main() {
-      vec4 contentTexColor = texture2D(u_texture, v_texcoords) * v_color;
-
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
-      float outerShapeDist = roundedBox(boxUv, v_halfDimensions, u_radius);
-      float outerShapeAlpha = 1.0 - smoothstep(0.0, 1.0, outerShapeDist); // 1 inside, 0 outside
-
-      if (u_borderZero) { // No border, effectively no gap from border logic
-        gl_FragColor = mix(vec4(0.0), contentTexColor, outerShapeAlpha) * u_alpha;
-        return;
-      }
-
-      // Adjust boxUv for non-uniform borders
-      // This adjusted UV is used for calculating distances to border-end and content shapes
-      vec2 adjustedBoxUv = boxUv;
-      vec2 borderAdjustedBoxUv = boxUv;
-
-      if (!u_inset) {
-        // For outside borders, use same adjustment for both calculations
-        adjustedBoxUv.x += (u_border.y - u_border.w) * 0.5;
-        adjustedBoxUv.y += (u_border.z - u_border.x) * 0.5;
-        borderAdjustedBoxUv = adjustedBoxUv;
-      } else {
-        // For inset borders, gap calculation uses no adjustment (uniform gap)
-        // Border calculation uses adjustment (non-uniform border)
-        borderAdjustedBoxUv.x += (u_border.y - u_border.w) * 0.5;
-        borderAdjustedBoxUv.y += (u_border.z - u_border.x) * 0.5;
-      }
-
-      // Distance to the inner edge of the border (where the gap begins)
-      float borderEndDist = roundedBox(adjustedBoxUv, v_borderEndSize, v_borderEndRadius);
-      float borderEndAlpha = 1.0 - smoothstep(0.0, 1.0, borderEndDist); // 1 if inside gap or content, 0 if in border or outside
-
-      // Distance to the content area (after the gap)
-      float contentDist = roundedBox(borderAdjustedBoxUv, v_innerSize, v_innerRadius);
-      float contentAlpha = 1.0 - smoothstep(0.0, 1.0, contentDist); // 1 if inside content, 0 if in gap, border or outside
-
-      vec4 finalColor;
-      if (u_inset) { // For inset borders: border <- gap <- element
-        // flip the logic: borderEndAlpha becomes gap, contentAlpha becomes border+content
-        if (contentAlpha > 0.0) { // Pixel is inside the content area (innermost)
-          finalColor = contentTexColor;
-        } else if (borderEndAlpha > 0.0) { // Pixel is inside the border area (middle)
-          vec4 borderColor = u_borderColor;
-          finalColor = mix(contentTexColor, vec4(borderColor.rgb, 1.0), borderColor.a);
-        } else { // Pixel is in the gap area (outermost) - show content through gap
-          finalColor = contentTexColor;
-        }
-      } else { // For outside borders: element -> gap -> border
-        if (contentAlpha > 0.0) { // Pixel is inside the content area
-          finalColor = contentTexColor;
-        } else if (borderEndAlpha > 0.0) { // Pixel is inside the gap area
-          finalColor = vec4(0.0); // Transparent gap
-        } else { // Pixel is inside the border area
-          vec4 borderColor = u_borderColor;
-          finalColor = borderColor;
-          finalColor.rgb *= finalColor.a;
-        }
-      }
-
-      gl_FragColor = mix(vec4(0.0), finalColor, outerShapeAlpha) * u_alpha;
-    }
-  `,
-};
-
 export function registerDefaultShaderRounded(
   shManager: IRendererShaderManager,
 ) {

package/src/primitives/borderBox.tsx

@@ -5,7 +5,6 @@ import {
   type NodeStyles,
 } from '@lightningtv/solid';
 import { getOwner, runWithOwner, type Accessor } from 'solid-js';
-import { fadeIn, fadeOut } from './FadeInOut.jsx';
 import { chainFunctions } from '@lightningtv/solid/primitives';
 
 export const BorderBoxStyle: NodeStyles = {
@@ -13,23 +12,27 @@ export const BorderBoxStyle: NodeStyles = {
   borderSpace: 6,
   borderRadius: 20,
   border: { color: 0xffffff, width: 2 },
-  scale: 1,
+  transition: { alpha: { duration: 100, easing: 'linear' } },
 };
 
 type BorderProps = NodeProps & { borderSpace?: number };
 const borderComponent = (props: BorderProps) => {
   const space = props.borderSpace ?? (BorderBoxStyle.borderSpace as number);
-  const scale = props.scale ?? (BorderBoxStyle.scale as number);
   return (
     <view
       skipFocus
       onCreate={(el) => {
         const parent = el.parent!;
-        el.width = parent.width * scale + space * 2;
-        el.height = parent.height * scale + space * 2;
-        fadeIn(el);
+        el.width = parent.width + space * 2;
+        el.height = parent.height + space * 2;
+        el.alpha = 1;
+      }}
+      onDestroy={(el) => {
+        return el
+          .animate({ alpha: 0 }, el.transition as any)
+          .start()
+          .waitUntilStopped();
       }}
-      onDestroy={fadeOut}
       style={BorderBoxStyle}
       x={-space}
       y={-space}

package/dist/src/shaders/Rounded.d.ts

@@ -1,7 +0,0 @@
-import type { WebGlShaderType } from '@lightningjs/renderer/webgl';
-import { type RoundedProps } from './templates/RoundedTemplate.js';
-/**
- * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
- * as defined by the specified corner {@link RoundedProps.radius}
- */
-export declare const Rounded: WebGlShaderType<RoundedProps>;

package/dist/src/shaders/Rounded.js

@@ -1,88 +0,0 @@
-import { calcFactoredRadiusArray } from './utils.js';
-import { RoundedTemplate, } from './templates/RoundedTemplate.js';
-/**
- * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
- * as defined by the specified corner {@link RoundedProps.radius}
- */
-export const Rounded = {
-    props: RoundedTemplate.props,
-    update(node) {
-        this.uniform4fa('u_radius', calcFactoredRadiusArray(this.props.radius, node.w, node.h));
-    },
-    vertex: `
-  # ifdef GL_FRAGMENT_PRECISION_HIGH
-  precision highp float;
-  # else
-  precision mediump float;
-  # endif
-
-  attribute vec2 a_position;
-  attribute vec2 a_textureCoords;
-  attribute vec4 a_color;
-  attribute vec2 a_nodeCoords;
-
-  uniform vec2 u_resolution;
-  uniform float u_pixelRatio;
-
-  varying vec4 v_color;
-  varying vec2 v_textureCoords;
-  varying vec2 v_nodeCoords;
-
-  void main() {
-    vec2 normalized = a_position * u_pixelRatio;
-    vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-    v_color = a_color;
-    v_nodeCoords = a_nodeCoords;
-    v_textureCoords = a_textureCoords;
-
-    gl_Position = vec4(
-      normalized.x * screenSpace.x - 1.0,
-      normalized.y * -abs(screenSpace.y) + 1.0,
-      0.0,
-      1.0
-    );
-  }
-`,
-    fragment: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    uniform vec2 u_dimensions;
-    uniform float u_alpha;
-    uniform float u_pixelRatio;
-    uniform sampler2D u_texture;
-    uniform vec4 u_radius;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
-
-    void main() {
-      vec2 halfDimensions = u_dimensions * 0.5;
-      vec2 boxUv = v_nodeCoords * u_dimensions - halfDimensions;
-
-      // Branchless radius selection based on quadrant
-      // x: TL, y: TR, z: BR, w: BL
-      vec2 stepVal = step(vec2(0.0), boxUv);
-      float r = mix(
-        mix(u_radius.x, u_radius.y, stepVal.x),
-        mix(u_radius.w, u_radius.z, stepVal.x),
-        stepVal.y
-      );
-
-      vec2 q = abs(boxUv) - halfDimensions + r;
-      float d = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-
-      float edgeWidth = 1.0 / u_pixelRatio;
-      float alpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, d);
-
-      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      gl_FragColor = color * alpha * u_alpha;
-    }
-  `,
-};
-//# sourceMappingURL=Rounded.js.map

package/dist/src/shaders/Rounded.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Rounded.js","sourceRoot":"","sources":["../../../src/shaders/Rounded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAa,MAAM,YAAY,CAAC;AAChE,OAAO,EACL,eAAe,GAEhB,MAAM,gCAAgC,CAAC;AAOxC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAkC;IACpD,KAAK,EAAE,eAAe,CAAC,KAAK;IAC5B,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT;CACF,CAAC"}

package/dist/src/shaders/RoundedWithBorder.d.ts

@@ -1,3 +0,0 @@
-import type { WebGlShaderType } from '@lightningjs/renderer/webgl';
-import { type RoundedWithBorderProps } from './templates/RoundedWithBorderTemplate.js';
-export declare const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps>;

package/dist/src/shaders/RoundedWithBorder.js

@@ -1,217 +0,0 @@
-import { calcFactoredRadiusArray } from './utils.js';
-import { RoundedWithBorderTemplate, } from './templates/RoundedWithBorderTemplate.js';
-export const RoundedWithBorder = {
-    props: RoundedWithBorderTemplate.props,
-    update(node) {
-        const props = this.props;
-        const borderWidth = props['border-w'];
-        const borderGap = props['border-gap'] || 0;
-        this.uniformRGBA('u_borderColor', props['border-color']);
-        this.uniform4fa('u_borderWidth', borderWidth);
-        this.uniform1f('u_borderGap', borderGap);
-        this.uniformRGBA('u_borderGapColor', props['border-gapColor']);
-        const origWidth = node.w;
-        const origHeight = node.h;
-        this.uniform2f('u_dimensions_orig', origWidth, origHeight);
-        const expandedWidth = origWidth + borderWidth[3] + borderWidth[1] + borderGap * 2; // original + left + right + 2*gap
-        const expandedHeight = origHeight + borderWidth[0] + borderWidth[2] + borderGap * 2; // original + top + bottom + 2*gap
-        // u_dimensions for the shader's SDF functions should be the expanded size
-        this.uniform2f('u_dimensions', expandedWidth, expandedHeight);
-        // The `radius` property is for the content rectangle.
-        // Factor it against the original dimensions to prevent self-intersection.
-        const contentRadius = calcFactoredRadiusArray(this.props.radius, origWidth, origHeight);
-        // From the content radius, calculate the outer radius of the border.
-        // For each corner, the total radius is content radius + gap + border thickness.
-        // Border thickness at a corner is approximated as the max of the two adjacent border sides.
-        const bTop = borderWidth[0], bRight = borderWidth[1], bBottom = borderWidth[2], bLeft = borderWidth[3];
-        const outerRadius = [
-            Math.max(0, contentRadius[0] + borderGap + Math.max(bTop, bLeft)), // top-left
-            Math.max(0, contentRadius[1] + borderGap + Math.max(bTop, bRight)), // top-right
-            Math.max(0, contentRadius[2] + borderGap + Math.max(bBottom, bRight)), // bottom-right
-            Math.max(0, contentRadius[3] + borderGap + Math.max(bBottom, bLeft)), // bottom-left
-        ];
-        // The final radius passed to the shader is the outer radius of the whole shape.
-        // It also needs to be factored against the expanded dimensions.
-        // The shader will then work inwards to calculate the radii for the gap and content.
-        this.uniform4fa('u_radius', calcFactoredRadiusArray(outerRadius, expandedWidth, expandedHeight));
-    },
-    vertex: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    attribute vec2 a_position;
-    attribute vec2 a_textureCoords;
-    attribute vec4 a_color;
-    attribute vec2 a_nodeCoords;
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform vec2 u_dimensions;
-    uniform vec2 u_dimensions_orig;
-
-    uniform vec4 u_radius;
-    uniform vec4 u_borderWidth;
-    uniform float u_borderGap;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-    varying vec2 v_halfDimensions;
-    varying float v_borderZero;
-
-    void main() {
-      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
-
-      v_color = a_color;
-      v_nodeCoords = a_nodeCoords;
-
-      float bTop = u_borderWidth.x;
-      float bRight = u_borderWidth.y;
-      float bBottom = u_borderWidth.z;
-      float bLeft = u_borderWidth.w;
-      float gap = u_borderGap;
-
-      // Calculate the offset to expand the quad for border and gap
-      vec2 expansionOffset = vec2(0.0);
-      if (a_nodeCoords.x == 0.0) { // Left edge vertex
-          expansionOffset.x = -(bLeft + gap);
-      } else { // Right edge vertex (a_nodeCoords.x == 1.0)
-          expansionOffset.x = (bRight + gap);
-      }
-      if (a_nodeCoords.y == 0.0) { // Top edge vertex
-          expansionOffset.y = -(bTop + gap);
-      } else { // Bottom edge vertex (a_nodeCoords.y == 1.0)
-          expansionOffset.y = (bBottom + gap);
-      }
-
-      vec2 expanded_a_position = a_position + expansionOffset;
-      vec2 normalized = expanded_a_position * u_pixelRatio;
-
-      // u_dimensions is expanded, u_dimensions_orig is original content size
-      v_textureCoords.x = (a_textureCoords.x * u_dimensions.x - (bLeft + gap)) / u_dimensions_orig.x;
-      v_textureCoords.y = (a_textureCoords.y * u_dimensions.y - (bTop + gap)) / u_dimensions_orig.y;
-
-      v_borderZero = (u_borderWidth.x == 0.0 && u_borderWidth.y == 0.0 && u_borderWidth.z == 0.0 && u_borderWidth.w == 0.0) ? 1.0 : 0.0;
-      // If there's no border, there's no gap from the border logic perspective
-      // The Rounded shader itself would handle radius if borderZero is true.
-      v_halfDimensions = u_dimensions * 0.5; // u_dimensions is now expanded_dimensions
-      if(v_borderZero == 0.0) {
-        // Calculate radius and size for the inner edge of the border (where the gap begins)
-        v_borderEndRadius = vec4(
-          max(0.0, u_radius.x - max(bTop, bLeft) - 0.5),
-          max(0.0, u_radius.y - max(bTop, bRight) - 0.5),
-          max(0.0, u_radius.z - max(bBottom, bRight) - 0.5),
-          max(0.0, u_radius.w - max(bBottom, bLeft) - 0.5)
-        );
-        v_borderEndSize = vec2(
-            (u_dimensions.x - (bLeft + bRight) - 1.0),
-            (u_dimensions.y - (bTop + bBottom) - 1.0)
-        ) * 0.5;
-
-        // Calculate radius and size for the content area (after the gap)
-        v_innerRadius = vec4(
-          max(0.0, u_radius.x - max(bTop, bLeft) - u_borderGap - 0.5),
-          max(0.0, u_radius.y - max(bTop, bRight) - u_borderGap - 0.5),
-          max(0.0, u_radius.z - max(bBottom, bRight) - u_borderGap - 0.5),
-          max(0.0, u_radius.w - max(bBottom, bLeft) - u_borderGap - 0.5)
-        );
-        v_innerSize = vec2(
-            (u_dimensions.x - (bLeft + bRight) - (u_borderGap * 2.0) - 1.0),
-            (u_dimensions.y - (bTop + bBottom) - (u_borderGap * 2.0) - 1.0)
-        ) * 0.5;
-      }
-
-      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
-      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
-    }
-  `,
-    fragment: `
-    # ifdef GL_FRAGMENT_PRECISION_HIGH
-    precision highp float;
-    # else
-    precision mediump float;
-    # endif
-
-    uniform vec2 u_resolution;
-    uniform float u_pixelRatio;
-    uniform float u_alpha;
-    uniform vec2 u_dimensions;
-    uniform sampler2D u_texture;
-
-    uniform vec4 u_radius;
-
-    uniform vec4 u_borderWidth;
-    uniform vec4 u_borderColor;
-    uniform vec4 u_borderGapColor;
-
-    varying vec4 v_borderEndRadius;
-    varying vec2 v_borderEndSize;
-
-    varying vec4 v_color;
-    varying vec2 v_textureCoords;
-    varying vec2 v_nodeCoords;
-
-    varying vec2 v_halfDimensions;
-    varying vec4 v_innerRadius;
-    varying vec2 v_innerSize;
-    varying float v_borderZero;
-
-    float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
-    }
-
-    void main() {
-      vec4 contentTexColor = texture2D(u_texture, v_textureCoords) * v_color;
-
-      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
-      float outerShapeDist = roundedBox(boxUv, v_halfDimensions, u_radius);
-
-      float edgeWidth = 1.0 / u_pixelRatio;
-      float outerShapeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerShapeDist);
-
-      if(v_borderZero == 1.0) { // No border, effectively no gap from border logic
-        gl_FragColor = mix(vec4(0.0), contentTexColor, outerShapeAlpha) * u_alpha;
-        return;
-      }
-
-      // Adjust boxUv for non-uniform borders
-      vec2 adjustedBoxUv = boxUv;
-      adjustedBoxUv.x += (u_borderWidth.y - u_borderWidth.w) * 0.5;
-      adjustedBoxUv.y += (u_borderWidth.z - u_borderWidth.x) * 0.5;
-
-      // Inner Border Edge (Gap starts here)
-      float borderEndDist = roundedBox(adjustedBoxUv, v_borderEndSize, v_borderEndRadius);
-      float borderEndAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderEndDist);
-
-      // Content Area (Gap ends here)
-      float contentDist = roundedBox(adjustedBoxUv, v_innerSize, v_innerRadius);
-      float contentAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, contentDist);
-
-      // Calculate Masks for mutually exclusive regions based on priority (Border Top, Gap Middle, Content Bottom)
-      float borderMask = clamp(outerShapeAlpha - borderEndAlpha, 0.0, 1.0);
-      float gapMask = clamp(borderEndAlpha - contentAlpha, 0.0, 1.0);
-
-      // Composite Layers
-      // 1. Content
-      vec4 composite = mix(vec4(0.0), contentTexColor, contentAlpha);
-      // 2. Gap
-      composite = mix(composite, u_borderGapColor, gapMask);
-      // 3. Border
-      composite = mix(composite, u_borderColor, borderMask);
-
-      gl_FragColor = composite * u_alpha;
-    }
-  `,
-};
-//# sourceMappingURL=RoundedWithBorder.js.map

package/dist/src/shaders/RoundedWithBorder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../src/shaders/RoundedWithBorder.ts"],"names":[],"mappings":"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"}