release: v1.0.3 - Fix smoothing algorithm and Chrome detection

## Bug Fixes
- Fixed 100% smoothing spike artifact with proportional scaling
- Fixed Chrome false-positive native CSS detection (disabled until browsers render it)
- Disabled Houdini Paint API detection (waiting for Phase 2)
- Improved FOUC prevention for demo website

## Enhancements
- Implemented preserveSmoothing mode in Figma squircle algorithm
- Proportionally scales bezier handles when space is constrained
- Maintains smooth iOS-style S-curves even with large radius values

## Changes
- Updated detector tests to reflect disabled native/Houdini detection
- Increased demo preview height for better large radius demonstration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: bejarcode

packages/core/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.3] - 2025-11-17
+
+### Fixed
+- Fixed 100% smoothing spike artifact - corners no longer show thin lines at maximum smoothing
+- Implemented proportional scaling for large radius values - maintains smooth S-curves when space is constrained
+- Fixed Chrome false-positive native CSS detection - disabled corner-shape: squircle detection until browsers actually render it
+- Disabled Houdini Paint API detection - waiting for actual paint worklet implementation in Phase 2
+- Improved FOUC (Flash of Unstyled Content) prevention for demo website
+
+### Changed
+- Enhanced Figma squircle algorithm with preserveSmoothing mode (default: true)
+- When corner radius is large relative to element dimensions, bezier handles are proportionally scaled instead of reducing smoothing
+- This maintains the characteristic iOS-style continuous S-curve even when space is limited
+
 ## [1.0.2] - 2025-11-16
 
 ### Fixed

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerkit/core",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Lightweight library for iOS-style squircle corners",
   "type": "module",
   "sideEffects": false,

packages/core/src/core/detector.ts

@@ -86,8 +86,18 @@ export class CapabilityDetector {
   /**
    * FR-009: Detect Native CSS corner-shape: squircle support
    * Chrome 139+ (when available)
+   *
+   * Note: As of 2025, no browser actually renders corner-shape: squircle yet.
+   * Chrome falsely reports CSS.supports() as true, so we disable native detection
+   * until browsers actually implement rendering.
    */
   private detectNative(): boolean {
+    // Disabled until browsers actually render corner-shape: squircle
+    // Chrome reports CSS.supports('corner-shape', 'squircle') as true but doesn't render it
+    // TODO: Re-enable when Chrome 139+ is released with actual rendering support
+    return false;
+
+    /* Original detection (re-enable when browsers support rendering):
     if (typeof CSS === 'undefined' || !CSS.supports) {
       return false;
     }
@@ -97,13 +107,22 @@ export class CapabilityDetector {
     } catch {
       return false;
     }
+    */
   }
 
   /**
    * FR-010: Detect CSS Houdini Paint API support
    * Chrome 65+, Edge 79+
+   *
+   * Note: Paint API support doesn't mean squircle worklet is registered.
+   * Disabled until we have an actual paint worklet implementation (Phase 2).
    */
   private detectHoudini(): boolean {
+    // Disabled until we have an actual squircle paint worklet (Phase 2)
+    // Detecting paintWorklet support doesn't mean squircle rendering is available
+    return false;
+
+    /* Original detection (re-enable with paint worklet implementation):
     if (typeof CSS === 'undefined') {
       return false;
     }
@@ -113,6 +132,7 @@ export class CapabilityDetector {
     } catch {
       return false;
     }
+    */
   }
 
   /**

packages/core/src/math/figma-squircle.ts

@@ -32,14 +32,29 @@ function toRadians(degrees: number): number {
  *
  * @param cornerRadius - Corner radius in pixels
  * @param cornerSmoothing - Smoothing factor 0-1 (0.6 = iOS squircle)
+ * @param roundingAndSmoothingBudget - Maximum space available for the corner path
+ * @param preserveSmoothing - If true, maintain smoothing aesthetic by adjusting bezier handles instead of reducing smoothing
  * @returns Path parameters for drawing the corner
  */
 export function getPathParamsForCorner(
   cornerRadius: number,
-  cornerSmoothing: number
+  cornerSmoothing: number,
+  roundingAndSmoothingBudget: number = Infinity,
+  preserveSmoothing: boolean = true
 ): CornerPathParams {
   // Total corner path length
-  const p = (1 + cornerSmoothing) * cornerRadius;
+  let p = (1 + cornerSmoothing) * cornerRadius;
+
+  // When there's not enough space (p > budget), we have two options:
+  // 1. preserveSmoothing = false (Figma's default): reduce smoothing to fit budget
+  //    This changes the arcMeasure angle, making corners look like circular arcs
+  // 2. preserveSmoothing = true: keep original smoothing, adjust bezier handles
+  //    This maintains the squircle aesthetic even when space is limited
+  if (!preserveSmoothing && p > roundingAndSmoothingBudget) {
+    const maxCornerSmoothing = roundingAndSmoothingBudget / cornerRadius - 1;
+    cornerSmoothing = Math.max(0, Math.min(cornerSmoothing, maxCornerSmoothing));
+    p = Math.min(p, roundingAndSmoothingBudget);
+  }
 
   // Arc angle in degrees (90° when smoothing=0, 0° when smoothing=1)
   const arcMeasure = 90 * (1 - cornerSmoothing);
@@ -63,8 +78,36 @@ export function getPathParamsForCorner(
 
   // Bezier handle lengths
   // The remaining length after arc and transitions is split into 3 parts (1/3 for b, 2/3 for a)
-  const b = (p - arcSectionLength - c - d) / 3;
-  const a = 2 * b;
+  let b = (p - arcSectionLength - c - d) / 3;
+  let a = 2 * b;
+
+  // Adjust bezier handles if preserveSmoothing is enabled and we exceed the budget
+  // This maintains the squircle S-curve characteristic while fitting within space constraints
+  if (preserveSmoothing && p > roundingAndSmoothingBudget) {
+    // Calculate how much we need to scale down
+    const scaleFactor = roundingAndSmoothingBudget / p;
+
+    // Proportionally scale all components to maintain smooth curve character
+    // This keeps the relative proportions between a, b, c, d the same
+    // This approach maintains the smooth S-curve without kinks
+    const scaledA = a * scaleFactor;
+    const scaledB = b * scaleFactor;
+    const scaledC = c * scaleFactor;
+    const scaledD = d * scaleFactor;
+    const scaledArcLength = arcSectionLength * scaleFactor;
+
+    // Use proportional scaling - this maintains smooth curves
+    // by keeping the same relative proportions between all parameters
+    return {
+      a: scaledA,
+      b: scaledB,
+      c: scaledC,
+      d: scaledD,
+      p: roundingAndSmoothingBudget,
+      arcSectionLength: scaledArcLength,
+      cornerRadius,
+    };
+  }
 
   return {
     a,
@@ -95,11 +138,15 @@ export function drawTopRightCorner(params: CornerPathParams): string {
   }
 
   // First bezier curve (horizontal to arc transition)
-  // Then arc
+  // Then arc (skip if degenerate to avoid rendering artifacts)
   // Then second bezier curve (arc to vertical transition)
+  const arcCommand = arcSectionLength > 0.01
+    ? `a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(arcSectionLength)} ${round(arcSectionLength)}`
+    : '';
+
   return `
     c ${round(a)} 0 ${round(a + b)} 0 ${round(a + b + c)} ${round(d)}
-    a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(arcSectionLength)} ${round(arcSectionLength)}
+    ${arcCommand}
     c ${round(d)} ${round(c)} ${round(d)} ${round(b + c)} ${round(d)} ${round(a + b + c)}
   `.trim().replace(/\s+/g, ' ');
 }
@@ -114,9 +161,13 @@ export function drawBottomRightCorner(params: CornerPathParams): string {
     return `l 0 ${round(params.p)}`;
   }
 
+  const arcCommand = arcSectionLength > 0.01
+    ? `a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(-arcSectionLength)} ${round(arcSectionLength)}`
+    : '';
+
   return `
     c 0 ${round(a)} 0 ${round(a + b)} ${round(-d)} ${round(a + b + c)}
-    a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(-arcSectionLength)} ${round(arcSectionLength)}
+    ${arcCommand}
     c ${round(-c)} ${round(d)} ${round(-b - c)} ${round(d)} ${round(-a - b - c)} ${round(d)}
   `.trim().replace(/\s+/g, ' ');
 }
@@ -131,9 +182,13 @@ export function drawBottomLeftCorner(params: CornerPathParams): string {
     return `l ${round(-params.p)} 0`;
   }
 
+  const arcCommand = arcSectionLength > 0.01
+    ? `a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(-arcSectionLength)} ${round(-arcSectionLength)}`
+    : '';
+
   return `
     c ${round(-a)} 0 ${round(-a - b)} 0 ${round(-a - b - c)} ${round(-d)}
-    a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(-arcSectionLength)} ${round(-arcSectionLength)}
+    ${arcCommand}
     c ${round(-d)} ${round(-c)} ${round(-d)} ${round(-b - c)} ${round(-d)} ${round(-a - b - c)}
   `.trim().replace(/\s+/g, ' ');
 }
@@ -148,9 +203,13 @@ export function drawTopLeftCorner(params: CornerPathParams): string {
     return `l 0 ${round(-params.p)}`;
   }
 
+  const arcCommand = arcSectionLength > 0.01
+    ? `a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(arcSectionLength)} ${round(-arcSectionLength)}`
+    : '';
+
   return `
     c 0 ${round(-a)} 0 ${round(-a - b)} ${round(d)} ${round(-a - b - c)}
-    a ${round(cornerRadius)} ${round(cornerRadius)} 0 0 1 ${round(arcSectionLength)} ${round(-arcSectionLength)}
+    ${arcCommand}
     c ${round(c)} ${round(-d)} ${round(b + c)} ${round(-d)} ${round(a + b + c)} ${round(-d)}
   `.trim().replace(/\s+/g, ' ');
 }
@@ -176,11 +235,18 @@ export function generateFigmaSquirclePath(
   // Clamp smoothing to valid range
   const clampedSmoothing = Math.max(0, Math.min(1, smoothing));
 
-  // Calculate path parameters for all corners (assume uniform corners for now)
-  const topLeftParams = getPathParamsForCorner(clampedRadius, clampedSmoothing);
-  const topRightParams = getPathParamsForCorner(clampedRadius, clampedSmoothing);
-  const bottomRightParams = getPathParamsForCorner(clampedRadius, clampedSmoothing);
-  const bottomLeftParams = getPathParamsForCorner(clampedRadius, clampedSmoothing);
+  // Calculate the budget for rounding and smoothing
+  // Each corner's path extends along the edge, so budget is half the edge length
+  const horizontalBudget = width / 2;
+  const verticalBudget = height / 2;
+
+  // Calculate path parameters for all corners with budget constraints
+  // Top-left and top-right share the top edge, so they compete for width/2
+  // Left and right edges have height/2 budget
+  const topLeftParams = getPathParamsForCorner(clampedRadius, clampedSmoothing, Math.min(horizontalBudget, verticalBudget));
+  const topRightParams = getPathParamsForCorner(clampedRadius, clampedSmoothing, Math.min(horizontalBudget, verticalBudget));
+  const bottomRightParams = getPathParamsForCorner(clampedRadius, clampedSmoothing, Math.min(horizontalBudget, verticalBudget));
+  const bottomLeftParams = getPathParamsForCorner(clampedRadius, clampedSmoothing, Math.min(horizontalBudget, verticalBudget));
 
   // Build the complete path
   // Start from top-right corner, move counter-clockwise

packages/core/tests/unit/detector.test.ts

@@ -18,6 +18,7 @@ describe('CapabilityDetector', () => {
 
   describe('Native CSS detection (FR-009)', () => {
     it('should detect native corner-shape: squircle support', () => {
+      // Native CSS detection is disabled because Chrome falsely reports support
       // Mock CSS.supports to return true for corner-shape: squircle
       global.CSS = {
         supports: vi.fn((property: string, value: string) => {
@@ -28,8 +29,8 @@ describe('CapabilityDetector', () => {
       const detector = CapabilityDetector.getInstance();
       const support = detector.supports();
 
-      expect(support.native).toBe(true);
-      expect(CSS.supports).toHaveBeenCalledWith('corner-shape', 'squircle');
+      // Native detection is disabled until browsers actually render corner-shape: squircle
+      expect(support.native).toBe(false);
     });
 
     it('should return false when CSS.supports is unavailable', () => {
@@ -56,6 +57,7 @@ describe('CapabilityDetector', () => {
 
   describe('Houdini detection (FR-010)', () => {
     it('should detect paintWorklet support', () => {
+      // Houdini detection is disabled until we have an actual paint worklet (Phase 2)
       global.CSS = {
         paintWorklet: {},
         supports: vi.fn(() => false),
@@ -64,7 +66,8 @@ describe('CapabilityDetector', () => {
       const detector = CapabilityDetector.getInstance();
       const support = detector.supports();
 
-      expect(support.houdini).toBe(true);
+      // Houdini detection is disabled until paint worklet is implemented
+      expect(support.houdini).toBe(false);
     });
 
     it('should return false when paintWorklet is unavailable', () => {
@@ -168,32 +171,38 @@ describe('CapabilityDetector', () => {
       CapabilityDetector.supports();
       CapabilityDetector.supports();
 
-      // Detection should only run once (2 checks: native, clippath)
-      // Note: Houdini detection uses 'paintWorklet' in CSS, not CSS.supports
-      expect(supportsSpy).toHaveBeenCalledTimes(2);
+      // Detection should only run once (1 check: clippath only)
+      // Note: Native and Houdini detection are disabled
+      expect(supportsSpy).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('detectTier()', () => {
     it('should return NATIVE when native CSS is supported', () => {
+      // Native detection is disabled, so even if CSS.supports returns true,
+      // it will fall through to ClipPath
       global.CSS = {
         supports: vi.fn((property: string, value: string) => {
           return property === 'corner-shape' && value === 'squircle';
         }),
       } as any;
 
       const detector = CapabilityDetector.getInstance();
-      expect(detector.detectTier()).toBe(RendererTier.NATIVE);
+      // Native is disabled, so it returns CLIPPATH (via runtime DOM test)
+      expect(detector.detectTier()).toBe(RendererTier.CLIPPATH);
     });
 
     it('should return HOUDINI when paintWorklet is supported but not native', () => {
+      // Houdini detection is disabled, so even if paintWorklet exists,
+      // it will fall through to ClipPath
       global.CSS = {
         paintWorklet: {},
         supports: vi.fn(() => false),
       } as any;
 
       const detector = CapabilityDetector.getInstance();
-      expect(detector.detectTier()).toBe(RendererTier.HOUDINI);
+      // Houdini is disabled, so it returns CLIPPATH (via runtime DOM test)
+      expect(detector.detectTier()).toBe(RendererTier.CLIPPATH);
     });
 
     it('should return CLIPPATH when clip-path is supported', () => {

website/app.js

@@ -231,17 +231,11 @@ function showCopyFeedback(button, status) {
  * @returns {string} Browser tier (Tier 1, Tier 2, Tier 3, or Tier 4)
  */
 function detectBrowserTier() {
-  // Check for Native CSS corner-shape (Tier 1)
-  if (CSS.supports && CSS.supports('corner-shape', 'squircle')) {
-    return 'Tier 1: Native CSS';
-  }
-
-  // Check for Houdini Paint API (Tier 2)
-  if ('paintWorklet' in CSS) {
-    return 'Tier 2: Houdini Paint API';
-  }
+  // Note: Native CSS corner-shape (Tier 1) and Houdini Paint API (Tier 2) are disabled
+  // Chrome falsely reports CSS.supports('corner-shape', 'squircle') as true but doesn't render it
+  // Houdini detection only checks for paintWorklet API, not actual squircle worklet registration
 
-  // Check for SVG clip-path (Tier 3)
+  // Check for SVG clip-path (Tier 3) - Current primary implementation
   // Safari has issues with CSS.supports() for path(), so test both methods
   if (testClipPathSupport()) {
     return 'Tier 3: SVG ClipPath';
@@ -752,6 +746,13 @@ function initializeDemo() {
     // Apply squircle to playground preview
     ck.apply('#playground-preview', { radius: initialRadius, smoothing: initialSmoothing });
 
+    // Mark as ready to prevent FOUC - swap pending class for ready class
+    const preview = document.getElementById('playground-preview');
+    if (preview) {
+      preview.classList.remove('squircle-pending');
+      preview.classList.add('squircle-ready');
+    }
+
     // Initialize code snippets with default values
     updateAllCodeSnippets(initialRadius, initialSmoothing);
 
@@ -817,6 +818,13 @@ function initializeHero() {
     smoothing: 0.85
   });
 
+  // Mark as ready to prevent FOUC
+  const heroDemo = document.getElementById('hero-demo');
+  if (heroDemo) {
+    heroDemo.classList.remove('squircle-pending');
+    heroDemo.classList.add('squircle-ready');
+  }
+
   // Setup smooth scroll for CTA buttons
   const playgroundCTA = document.querySelector('a[href="#playground"]');
   if (playgroundCTA) {