@leftium/logo 0.3.0 → 0.4.0

package/dist/LeftiumLogo.svelte

@@ -33,6 +33,7 @@
 	import { onDestroy } from 'svelte';
 	import type { Attachment } from 'svelte/attachments';
 	import { Ripples, type RipplesOptions } from './webgl-ripples/webgl-ripples.js';
+	import { generateCornerPolygon } from './app-logo/squircle.js';
 
 	import logoGlow from './assets/logo-parts/glow.svg';
 	import logoGlowSquircle from './assets/logo-parts/glow-squircle.svg';
@@ -46,14 +47,14 @@
 		ripplesOptions?: RipplesOptions;
 		boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
 		squircle?: boolean;
+		encircledSquircleScale?: number;
 		class?: string;
 		onClick?: (event: MouseEvent | KeyboardEvent) => void;
 		[key: string]: unknown; // Allow any additional props
 	}
 
-	// Squircle clip-path (50% radius, K=2 superellipse, CSS polygon with percentages)
-	const SQUIRCLE_CLIP =
-		'polygon(50% 0%, 53.05% 0%, 55.96% 0%, 58.74% 0%, 61.38% 0%, 63.89% 0%, 66.27% 0%, 68.54% 0.01%, 70.69% 0.01%, 72.73% 0.02%, 74.66% 0.03%, 76.48% 0.04%, 78.21% 0.06%, 79.84% 0.09%, 81.37% 0.11%, 82.82% 0.15%, 84.18% 0.2%, 85.46% 0.25%, 86.66% 0.31%, 87.78% 0.39%, 88.83% 0.48%, 89.81% 0.58%, 90.73% 0.7%, 91.58% 0.83%, 92.37% 0.99%, 93.11% 1.16%, 93.79% 1.36%, 94.41% 1.58%, 94.99% 1.83%, 95.53% 2.11%, 96.02% 2.41%, 96.47% 2.75%, 96.88% 3.13%, 97.25% 3.53%, 97.59% 3.98%, 97.89% 4.47%, 98.17% 5.01%, 98.42% 5.59%, 98.64% 6.21%, 98.84% 6.89%, 99.01% 7.63%, 99.17% 8.42%, 99.3% 9.27%, 99.42% 10.19%, 99.52% 11.17%, 99.61% 12.22%, 99.69% 13.34%, 99.75% 14.54%, 99.8% 15.82%, 99.85% 17.18%, 99.89% 18.63%, 99.91% 20.16%, 99.94% 21.79%, 99.96% 23.52%, 99.97% 25.34%, 99.98% 27.27%, 99.99% 29.31%, 99.99% 31.46%, 100% 33.73%, 100% 36.11%, 100% 38.62%, 100% 41.26%, 100% 44.04%, 100% 46.95%, 100% 50%, 100% 50%, 100% 53.05%, 100% 55.96%, 100% 58.74%, 100% 61.38%, 100% 63.89%, 100% 66.27%, 99.99% 68.54%, 99.99% 70.69%, 99.98% 72.73%, 99.97% 74.66%, 99.96% 76.48%, 99.94% 78.21%, 99.91% 79.84%, 99.89% 81.37%, 99.85% 82.82%, 99.8% 84.18%, 99.75% 85.46%, 99.69% 86.66%, 99.61% 87.78%, 99.52% 88.83%, 99.42% 89.81%, 99.3% 90.73%, 99.17% 91.58%, 99.01% 92.37%, 98.84% 93.11%, 98.64% 93.79%, 98.42% 94.41%, 98.17% 94.99%, 97.89% 95.53%, 97.59% 96.02%, 97.25% 96.47%, 96.88% 96.88%, 96.47% 97.25%, 96.02% 97.59%, 95.53% 97.89%, 94.99% 98.17%, 94.41% 98.42%, 93.79% 98.64%, 93.11% 98.84%, 92.37% 99.01%, 91.58% 99.17%, 90.73% 99.3%, 89.81% 99.42%, 88.83% 99.52%, 87.78% 99.61%, 86.66% 99.69%, 85.46% 99.75%, 84.18% 99.8%, 82.82% 99.85%, 81.37% 99.89%, 79.84% 99.91%, 78.21% 99.94%, 76.48% 99.96%, 74.66% 99.97%, 72.73% 99.98%, 70.69% 99.99%, 68.54% 99.99%, 66.27% 100%, 63.89% 100%, 61.38% 100%, 58.74% 100%, 55.96% 100%, 53.05% 100%, 50% 100%, 50% 100%, 46.95% 100%, 44.04% 100%, 41.26% 100%, 38.62% 100%, 36.11% 100%, 33.73% 100%, 31.46% 99.99%, 29.31% 99.99%, 27.27% 99.98%, 25.34% 99.97%, 23.52% 99.96%, 21.79% 99.94%, 20.16% 99.91%, 18.63% 99.89%, 17.18% 99.85%, 15.82% 99.8%, 14.54% 99.75%, 13.34% 99.69%, 12.22% 99.61%, 11.17% 99.52%, 10.19% 99.42%, 9.27% 99.3%, 8.42% 99.17%, 7.63% 99.01%, 6.89% 98.84%, 6.21% 98.64%, 5.59% 98.42%, 5.01% 98.17%, 4.47% 97.89%, 3.98% 97.59%, 3.53% 97.25%, 3.13% 96.88%, 2.75% 96.47%, 2.41% 96.02%, 2.11% 95.53%, 1.83% 94.99%, 1.58% 94.41%, 1.36% 93.79%, 1.16% 93.11%, 0.99% 92.37%, 0.83% 91.58%, 0.7% 90.73%, 0.58% 89.81%, 0.48% 88.83%, 0.39% 87.78%, 0.31% 86.66%, 0.25% 85.46%, 0.2% 84.18%, 0.15% 82.82%, 0.11% 81.37%, 0.09% 79.84%, 0.06% 78.21%, 0.04% 76.48%, 0.03% 74.66%, 0.02% 72.73%, 0.01% 70.69%, 0.01% 68.54%, 0% 66.27%, 0% 63.89%, 0% 61.38%, 0% 58.74%, 0% 55.96%, 0% 53.05%, 0% 50%, 0% 50%, 0% 46.95%, 0% 44.04%, 0% 41.26%, 0% 38.62%, 0% 36.11%, 0% 33.73%, 0.01% 31.46%, 0.01% 29.31%, 0.02% 27.27%, 0.03% 25.34%, 0.04% 23.52%, 0.06% 21.79%, 0.09% 20.16%, 0.11% 18.63%, 0.15% 17.18%, 0.2% 15.82%, 0.25% 14.54%, 0.31% 13.34%, 0.39% 12.22%, 0.48% 11.17%, 0.58% 10.19%, 0.7% 9.27%, 0.83% 8.42%, 0.99% 7.63%, 1.16% 6.89%, 1.36% 6.21%, 1.58% 5.59%, 1.83% 5.01%, 2.11% 4.47%, 2.41% 3.98%, 2.75% 3.53%, 3.13% 3.13%, 3.53% 2.75%, 3.98% 2.41%, 4.47% 2.11%, 5.01% 1.83%, 5.59% 1.58%, 6.21% 1.36%, 6.89% 1.16%, 7.63% 0.99%, 8.42% 0.83%, 9.27% 0.7%, 10.19% 0.58%, 11.17% 0.48%, 12.22% 0.39%, 13.34% 0.31%, 14.54% 0.25%, 15.82% 0.2%, 17.18% 0.15%, 18.63% 0.11%, 20.16% 0.09%, 21.79% 0.06%, 23.52% 0.04%, 25.34% 0.03%, 27.27% 0.02%, 29.31% 0.01%, 31.46% 0.01%, 33.73% 0%, 36.11% 0%, 38.62% 0%, 41.26% 0%, 44.04% 0%, 46.95% 0%, 50% 0%)';
+	// Squircle clip-path (50% radius, K=2 superellipse) — generated from true Lamé curve
+	const SQUIRCLE_CLIP = generateCornerPolygon(50, 'squircle');
 
 	let {
 		size = '100%',
@@ -61,6 +62,7 @@
 		ripplesOptions: ripplesOptionsProp = {},
 		boundingBox = 'default',
 		squircle = false,
+		encircledSquircleScale = 1.08,
 		class: className = '',
 		onClick = undefined,
 		...restProps
@@ -74,13 +76,13 @@
 	const LIG_ORIG_T = -65.75;
 	const BLUR_PAD_ORIG = 50; // shadow extends 50px beyond ligature on each side
 
-	// Squircle: scaled to align inner corners with squircle boundary
-	// (base 94.46% * 1.023 scale, offset x=-6.5, y=7)
-	const LIG_SQRC_W = 425.2;
-	const LIG_SQRC_H = 643.6;
-	const LIG_SQRC_L = 129.5;
-	const LIG_SQRC_T = -47.6;
-	const BLUR_PAD_SQRC = 48.3;
+	// Squircle: scaled to align inner corners with true Lamé squircle boundary
+	// (scale 0.953 from previous squircle base, offset x=-18.1, y=+12.8 in 532-grid)
+	const LIG_SQRC_W = 405.2;
+	const LIG_SQRC_H = 613.6;
+	const LIG_SQRC_L = 121.4;
+	const LIG_SQRC_T = -19.8;
+	const BLUR_PAD_SQRC = 46.0;
 
 	// Select positioning values depending on squircle mode
 	let ligW = $derived(squircle ? LIG_SQRC_W : LIG_ORIG_W);
@@ -408,6 +410,7 @@
 
 <logo-container
 	style:--size={size}
+	style:--encircled-squircle-scale={encircledSquircleScale}
 	class="{boundingBox} {className}"
 	class:squircle
 	role="none"
@@ -484,11 +487,11 @@
 			top: calc((100% - 100% / 1.5037) / 2);
 		}
 
-		/* Squircle + encircled: scale up 1.04x to compensate for smaller ligature */
+		/* Squircle + encircled: scale up to compensate for smaller ligature */
 		&.encircled.squircle grid-logo {
-			width: calc(100% / 1.5037 * 1.04);
-			left: calc((100% - 100% / 1.5037 * 1.04) / 2);
-			top: calc((100% - 100% / 1.5037 * 1.04) / 2);
+			width: calc(100% / 1.5037 * var(--encircled-squircle-scale, 1.04));
+			left: calc((100% - 100% / 1.5037 * var(--encircled-squircle-scale, 1.04)) / 2);
+			top: calc((100% - 100% / 1.5037 * var(--encircled-squircle-scale, 1.04)) / 2);
 		}
 
 		/* Cropped bounding box mode - grid scaled and positioned to match reference SVG */

package/dist/LeftiumLogo.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     ripplesOptions?: RipplesOptions;
     boundingBox?: 'square' | 'default' | 'cropped' | 'encircled';
     squircle?: boolean;
+    encircledSquircleScale?: number;
     class?: string;
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     [key: string]: unknown;

package/dist/app-logo/generate-favicon-set.d.ts

@@ -38,7 +38,7 @@ export declare function generateFaviconHtml(appInfo: AppInfo): string;
  *   static/logo.webp
  *   static/logo.svg
  *   static/manifest.webmanifest
- *   static/_app-logo/config.json
- *   _snippets/favicon-html.html
+ *   .logo/config.json
+ *   .logo/favicon.htm
  */
 export declare function generateZipKit(config: AppLogoConfig, appInfo: AppInfo): Promise<Blob>;

package/dist/app-logo/generate-favicon-set.js

@@ -63,8 +63,8 @@ export function generateFaviconHtml(appInfo) {
  *   static/logo.webp
  *   static/logo.svg
  *   static/manifest.webmanifest
- *   static/_app-logo/config.json
- *   _snippets/favicon-html.html
+ *   .logo/config.json
+ *   .logo/favicon.htm
  */
 export async function generateZipKit(config, appInfo) {
     const [faviconSet, logoPng, logoWebp, logoSvg] = await Promise.all([
@@ -75,8 +75,7 @@ export async function generateZipKit(config, appInfo) {
     ]);
     const zip = new JSZip();
     const staticDir = zip.folder('static');
-    const appLogoDir = staticDir.folder('_app-logo');
-    const snippetsDir = zip.folder('_snippets');
+    const logoDir = zip.folder('.logo');
     // Favicon files
     staticDir.file('favicon.ico', faviconSet.ico);
     staticDir.file('icon.svg', faviconSet.svg);
@@ -90,8 +89,8 @@ export async function generateZipKit(config, appInfo) {
     // Manifest
     staticDir.file('manifest.webmanifest', generateManifest(appInfo));
     // Config for regeneration
-    appLogoDir.file('config.json', JSON.stringify(config, null, '\t'));
+    logoDir.file('config.json', JSON.stringify(config, null, '\t'));
     // HTML snippet
-    snippetsDir.file('favicon-html.html', generateFaviconHtml(appInfo));
+    logoDir.file('favicon.htm', generateFaviconHtml(appInfo));
     return zip.generateAsync({ type: 'blob' });
 }

package/dist/app-logo/squircle.d.ts

@@ -1,43 +1,63 @@
 /**
  * Superellipse / corner-shape path generation.
  *
- * Follows the CSS Borders Level 4 specification for corner-shape rendering.
- * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ * Uses the trigonometric Lamé parametrisation for SVG outline paths.
+ * This is the only approach that is both edge-tangent (no cusps at shared
+ * tangent points) and exactly traces the correct Lamé curve shape.
  *
- * The CSS spec defines the curve parametrically:
- *   K = 2^abs(curvature)
- *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ * The Lamé curve for a superellipse of parameter `p`:
+ *   |a|^(2·|p|) + |b|^(2·|p|) = 1
+ *
+ * Sampled as:  θ ∈ [π/2 → 0],  e = 1/|p|
+ *   a(θ) = cos(θ)^e   (0 → 1, toward end tangent)
+ *   b(θ) = sin(θ)^e   (1 → 0, toward start tangent)
+ *   point = centre + a·(end−centre) + b·(start−centre)
+ *
+ * The arc departs start tangent to the start edge and arrives at end tangent
+ * to the end edge — so no cusps even when adjacent arcs meet at 50% radius.
+ *
+ * Exponent mapping — two-sided, continuous at param=0:
+ *
+ *   param ≥ 0:  e = 2^(1−param)      (exponential shrink, matches CSS K=2^param)
+ *   param < 0:  e = 2 − 2·param = 2·(1+|param|)  (linear grow)
+ *
+ *   Both branches give e=2 at param=0 (bevel). The negative side grows more slowly
+ *   than the mirrored positive side, matching Chrome's usable range of -16 to +16.
+ *
+ *   param = −10 → e=22    → near-notch  (a+b≈0.001)
+ *   param = −3  → e=8     → deep scoop  (a+b=0.125)
+ *   param = −1  → e=4     → scoop       (a+b=0.5)
+ *   param =  0  → e=2     → bevel       (a+b=1.0)
+ *   param = +1  → e=1     → round       (a+b=1.414, exact arc)
+ *   param = +2  → e=0.5   → squircle    (a+b=1.682)
+ *   param = +10 → e≈0.002 → near-square (a+b=1.999)
+ *
+ * Positive param: arc bows toward outer corner → convex rounding.
+ * Negative param: arc bows toward inner centre → concave scoop shapes.
  *
  * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
  */
 import type { CornerShape } from './types.js';
-/**
- * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
- *
- * CSS spec keyword -> superellipse parameter:
- *   round       -> 1    (standard elliptical arc)
- *   squircle    -> 2    (iOS-style continuous curvature)
- *   square      -> Infinity  (sharp 90 deg corner)
- *   bevel       -> 0    (straight diagonal cut)
- *   scoop       -> -1   (inward concave curve)
- *   notch       -> -Infinity (inward right-angle cut)
- */
 export declare function cornerShapeToK(shape: CornerShape): number;
+export declare function generateCornerPath(size: number, cornerRadius: number, cornerShape: CornerShape): string;
 /**
- * Generate an SVG path `d` attribute for a rounded rectangle with a
- * superellipse corner shape.
+ * Generate a CSS `polygon()` string for a superellipse corner shape.
  *
- * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
- *   K = 2^abs(curvature)
- *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
+ * Runs `generateCornerPath` on a 100×100 grid and converts the resulting
+ * SVG path points to percentage coordinates, producing a CSS polygon that
+ * scales with the element.
  *
- * For convex shapes (curvature > 0), the curve bulges outward.
- * For concave shapes (curvature < 0), the center reference flips to the
- * outer corner, creating inward "scoop" curves.
+ * @param cornerRadius  Corner radius as percentage (0-50). Default: 50
+ * @param cornerShape   CornerShape keyword or superellipse(n). Default: 'squircle'
+ */
+export declare function generateCornerPolygon(cornerRadius?: number, cornerShape?: CornerShape): string;
+/**
+ * Generate percentage-based polygon points for a superellipse corner shape.
+ *
+ * Returns an array of [x%, y%] pairs (0-100 range), suitable for conversion
+ * to SVG `<polygon>` points at any absolute size.
  *
- * @param size - Square side length in pixels
- * @param cornerRadius - Corner radius as percentage (0-50)
- * @param cornerShape - CornerShape keyword or superellipse(n)
- * @returns SVG path `d` string
+ * @param cornerRadius  Corner radius as percentage (0-50). Default: 50
+ * @param cornerShape   CornerShape keyword or superellipse(n). Default: 'squircle'
  */
-export declare function generateCornerPath(size: number, cornerRadius: number, cornerShape: CornerShape): string;
+export declare function generateCornerPolygonPoints(cornerRadius?: number, cornerShape?: CornerShape): [number, number][];

package/dist/app-logo/squircle.js

@@ -1,28 +1,44 @@
 /**
  * Superellipse / corner-shape path generation.
  *
- * Follows the CSS Borders Level 4 specification for corner-shape rendering.
- * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ * Uses the trigonometric Lamé parametrisation for SVG outline paths.
+ * This is the only approach that is both edge-tangent (no cusps at shared
+ * tangent points) and exactly traces the correct Lamé curve shape.
  *
- * The CSS spec defines the curve parametrically:
- *   K = 2^abs(curvature)
- *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ * The Lamé curve for a superellipse of parameter `p`:
+ *   |a|^(2·|p|) + |b|^(2·|p|) = 1
+ *
+ * Sampled as:  θ ∈ [π/2 → 0],  e = 1/|p|
+ *   a(θ) = cos(θ)^e   (0 → 1, toward end tangent)
+ *   b(θ) = sin(θ)^e   (1 → 0, toward start tangent)
+ *   point = centre + a·(end−centre) + b·(start−centre)
+ *
+ * The arc departs start tangent to the start edge and arrives at end tangent
+ * to the end edge — so no cusps even when adjacent arcs meet at 50% radius.
+ *
+ * Exponent mapping — two-sided, continuous at param=0:
+ *
+ *   param ≥ 0:  e = 2^(1−param)      (exponential shrink, matches CSS K=2^param)
+ *   param < 0:  e = 2 − 2·param = 2·(1+|param|)  (linear grow)
+ *
+ *   Both branches give e=2 at param=0 (bevel). The negative side grows more slowly
+ *   than the mirrored positive side, matching Chrome's usable range of -16 to +16.
+ *
+ *   param = −10 → e=22    → near-notch  (a+b≈0.001)
+ *   param = −3  → e=8     → deep scoop  (a+b=0.125)
+ *   param = −1  → e=4     → scoop       (a+b=0.5)
+ *   param =  0  → e=2     → bevel       (a+b=1.0)
+ *   param = +1  → e=1     → round       (a+b=1.414, exact arc)
+ *   param = +2  → e=0.5   → squircle    (a+b=1.682)
+ *   param = +10 → e≈0.002 → near-square (a+b=1.999)
+ *
+ * Positive param: arc bows toward outer corner → convex rounding.
+ * Negative param: arc bows toward inner centre → concave scoop shapes.
  *
  * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
  */
-/** Number of line segments to sample per corner arc. */
+/** Segments per corner arc. */
 const SEGMENTS = 64;
-/**
- * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
- *
- * CSS spec keyword -> superellipse parameter:
- *   round       -> 1    (standard elliptical arc)
- *   squircle    -> 2    (iOS-style continuous curvature)
- *   square      -> Infinity  (sharp 90 deg corner)
- *   bevel       -> 0    (straight diagonal cut)
- *   scoop       -> -1   (inward concave curve)
- *   notch       -> -Infinity (inward right-angle cut)
- */
 export function cornerShapeToK(shape) {
     switch (shape) {
         case 'round':
@@ -38,7 +54,6 @@ export function cornerShapeToK(shape) {
         case 'notch':
             return -Infinity;
         default: {
-            // superellipse(n) -- parse the numeric value
             const match = shape.match(/^superellipse\((.+)\)$/);
             if (match) {
                 const val = match[1].trim();
@@ -50,164 +65,145 @@ export function cornerShapeToK(shape) {
                 if (!isNaN(n))
                     return n;
             }
-            return 1; // fallback to round
+            return 1;
         }
     }
 }
-/**
- * Generate an SVG path `d` attribute for a rounded rectangle with a
- * superellipse corner shape.
- *
- * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
- *   K = 2^abs(curvature)
- *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
- *
- * For convex shapes (curvature > 0), the curve bulges outward.
- * For concave shapes (curvature < 0), the center reference flips to the
- * outer corner, creating inward "scoop" curves.
- *
- * @param size - Square side length in pixels
- * @param cornerRadius - Corner radius as percentage (0-50)
- * @param cornerShape - CornerShape keyword or superellipse(n)
- * @returns SVG path `d` string
- */
 export function generateCornerPath(size, cornerRadius, cornerShape) {
-    // No rounding needed
-    if (cornerRadius <= 0) {
-        return `M0,0 H${size} V${size} H0 Z`;
-    }
-    const curvature = cornerShapeToK(cornerShape);
-    // square (Infinity): sharp corners, radius is ignored
-    if (curvature === Infinity) {
-        return `M0,0 H${size} V${size} H0 Z`;
-    }
-    // Convert percentage to pixels, clamped to half the side
+    if (cornerRadius <= 0)
+        return squarePath(size);
+    const param = cornerShapeToK(cornerShape);
     const r = Math.min((cornerRadius / 100) * size, size / 2);
-    // notch (-Infinity): inward right-angle cut at each corner.
-    // Goes from tangent point on one edge INWARD to the corner-region center,
-    // then back out to the tangent point on the other edge (concave square corner).
-    if (curvature === -Infinity) {
-        return [
-            `M${rd(r)},0`,
-            `H${rd(size - r)}`,
-            // top-right: inward to center of corner region, then out
-            `L${rd(size - r)},${rd(r)}`,
-            `L${rd(size)},${rd(r)}`,
-            `V${rd(size - r)}`,
-            // bottom-right: inward to center, then out
-            `L${rd(size - r)},${rd(size - r)}`,
-            `L${rd(size - r)},${rd(size)}`,
-            `H${rd(r)}`,
-            // bottom-left: inward to center, then out
-            `L${rd(r)},${rd(size - r)}`,
-            `L0,${rd(size - r)}`,
-            `V${rd(r)}`,
-            // top-left: inward to center, then out
-            `L${rd(r)},${rd(r)}`,
-            `L${rd(r)},0`,
-            `Z`
-        ].join(' ');
-    }
-    // bevel (0): straight diagonal cut from tangent to tangent
-    if (curvature === 0) {
-        return [
-            `M${rd(r)},0`,
-            `H${rd(size - r)}`,
-            `L${rd(size)},${rd(r)}`,
-            `V${rd(size - r)}`,
-            `L${rd(size - r)},${rd(size)}`,
-            `H${rd(r)}`,
-            `L0,${rd(size - r)}`,
-            `V${rd(r)}`,
-            `Z`
-        ].join(' ');
-    }
-    // round (1): use SVG arc commands for a perfect quarter-ellipse.
-    // This matches what browsers render for border-radius and is exact,
-    // unlike the parametric approximation.
-    if (curvature === 1) {
-        return [
-            `M${rd(r)},0`,
-            `H${rd(size - r)}`,
-            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size)},${rd(r)}`,
-            `V${rd(size - r)}`,
-            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size - r)},${rd(size)}`,
-            `H${rd(r)}`,
-            `A${rd(r)},${rd(r)} 0 0 1 0,${rd(size - r)}`,
-            `V${rd(r)}`,
-            `A${rd(r)},${rd(r)} 0 0 1 ${rd(r)},0`,
-            `Z`
-        ].join(' ');
-    }
-    // Parametric superellipse curve.
-    // K = 2^abs(curvature) per the CSS spec: "Let K be 0.5^(-abs(curvature))"
-    const K = Math.pow(2, Math.abs(curvature));
-    // Invert: for the outline path (not clip-out), convex shapes use outer corner as ref
-    const useOuterAsRef = curvature > 0;
-    // Sample the corner arc and return SVG line-to commands.
-    //
-    // The CSS spec generates a "clip-out" path (what to REMOVE from the rect).
-    // Since we generate the OUTLINE path (what to KEEP), we invert the reference:
-    // - Convex (squircle, round): curveCenter = outerCorner (curve bows outward)
-    // - Concave (scoop): curveCenter = cornerCenter (curve bows inward)
-    //
-    // The parametric curve maps (T^K, (1-T)^K) through mapPointToCorner,
-    // which scales by vectors from curveCenter to the two tangent points.
+    // ── Degenerate / exact cases ───────────────────────────────────────────────
+    if (!isFinite(param))
+        return param > 0 ? squarePath(size) : notchPath(size, r);
+    // param=0: e=2 → bevel (|a|+|b|=1, straight diagonal)
+    if (param === 0)
+        return bevelPath(size, r);
+    // param=1: exact SVG quarter-ellipse arc (round)
+    if (param === 1)
+        return roundPath(size, r);
+    // ── Trig Lamé ──────────────────────────────────────────────────────────────
+    // e = 2^(1-p)  for p ≥ 0   → e shrinks exponentially: bevel→circle→squircle→square
+    // e = 2-2p     for p < 0   → e grows linearly:         bevel→scoop→notch
+    // Both give e=2 at p=0 (bevel). Continuous, no special case needed at p=-1.
+    const e = param >= 0 ? Math.pow(2, 1 - param) : 2 - 2 * param;
     const parts = [`M${rd(size - r)},0`];
-    // Top-right corner: start=(size-r, 0), end=(size, r), outer=(size, 0), center=(size-r, r)
-    parts.push(sampleCorner(size - r, 0, size, r, size, 0, size - r, r, K, useOuterAsRef));
-    // Right edge
+    // Top-right:    centre=(size−r, r)
+    parts.push(sampleArc(size - r, 0, size, r, size - r, r, r, e));
     parts.push(`L${rd(size)},${rd(size - r)}`);
-    // Bottom-right corner: start=(size, size-r), end=(size-r, size), outer=(size, size), center=(size-r, size-r)
-    parts.push(sampleCorner(size, size - r, size - r, size, size, size, size - r, size - r, K, useOuterAsRef));
-    // Bottom edge
+    // Bottom-right: centre=(size−r, size−r)
+    parts.push(sampleArc(size, size - r, size - r, size, size - r, size - r, r, e));
     parts.push(`L${rd(r)},${rd(size)}`);
-    // Bottom-left corner: start=(r, size), end=(0, size-r), outer=(0, size), center=(r, size-r)
-    parts.push(sampleCorner(r, size, 0, size - r, 0, size, r, size - r, K, useOuterAsRef));
-    // Left edge
+    // Bottom-left:  centre=(r, size−r)
+    parts.push(sampleArc(r, size, 0, size - r, r, size - r, r, e));
     parts.push(`L0,${rd(r)}`);
-    // Top-left corner: start=(0, r), end=(r, 0), outer=(0, 0), center=(r, r)
-    parts.push(sampleCorner(0, r, r, 0, 0, 0, r, r, K, useOuterAsRef));
+    // Top-left:     centre=(r, r)
+    parts.push(sampleArc(0, r, r, 0, r, r, r, e));
     parts.push('Z');
     return parts.join(' ');
 }
 /**
- * Sample a superellipse corner arc as SVG line-to commands.
- *
- * @param sx, sy - Start point (tangent point on the "start" edge)
- * @param ex, ey - End point (tangent point on the "end" edge)
- * @param ox, oy - Outer corner point (the actual rectangle corner)
- * @param cx, cy - Center point (diagonally opposite the outer corner within the corner region)
- * @param K - Exponent: 2^abs(curvature)
- * @param useOuterAsRef - Whether to use outer corner as the curve reference point
+ * Sample one corner arc via the trigonometric Lamé parametrisation.
+ *
+ * θ: π/2 → 0,  a = cos(θ)^e,  b = sin(θ)^e
+ * point = centre + a·(end−centre) + b·(start−centre)
+ *
+ * Traces |a|^(2/e) + |b|^(2/e) = 1 exactly.
+ * Departs start tangent to the start edge; arrives at end tangent to end edge.
  */
-function sampleCorner(sx, sy, ex, ey, ox, oy, cx, cy, K, useOuterAsRef) {
-    // For convex shapes (outline path), use outer corner so curve bows outward.
-    // For concave shapes (outline path), use inner center so curve bows inward.
-    const refX = useOuterAsRef ? ox : cx;
-    const refY = useOuterAsRef ? oy : cy;
-    // Vectors from curveCenter to the tangent points
-    const toEndX = ex - refX;
-    const toEndY = ey - refY;
-    const toStartX = sx - refX;
-    const toStartY = sy - refY;
+function sampleArc(sx, sy, ex, ey, cx, cy, r, e) {
+    const ux = (ex - cx) / r, uy = (ey - cy) / r;
+    const vx = (sx - cx) / r, vy = (sy - cy) / r;
     const cmds = [];
-    // Sample T from 0 to 1 (exclusive of 0 since we're already at start)
     for (let i = 1; i <= SEGMENTS; i++) {
-        const t = i / SEGMENTS;
-        const xParam = Math.pow(t, K);
-        const yParam = Math.pow(1 - t, K);
-        // mapPointToCorner(xParam, yParam):
-        //   refPoint + toEnd * xParam + toStart * yParam
-        const px = refX + toEndX * xParam + toStartX * yParam;
-        const py = refY + toEndY * xParam + toStartY * yParam;
-        cmds.push(`L${rd(px)},${rd(py)}`);
+        const theta = (1 - i / SEGMENTS) * (Math.PI / 2);
+        const a = Math.pow(Math.cos(theta), e);
+        const b = Math.pow(Math.sin(theta), e);
+        cmds.push(`L${rd(cx + r * (ux * a + vx * b))},${rd(cy + r * (uy * a + vy * b))}`);
     }
     return cmds.join(' ');
 }
-/**
- * Round a number to 2 decimal places for clean SVG output.
- */
+// ── Exact path helpers ────────────────────────────────────────────────────────
+function squarePath(size) {
+    return `M0,0 H${size} V${size} H0 Z`;
+}
+function roundPath(size, r) {
+    return [
+        `M${rd(r)},0 H${rd(size - r)}`,
+        `A${rd(r)},${rd(r)} 0 0 1 ${rd(size)},${rd(r)}`,
+        `V${rd(size - r)}`,
+        `A${rd(r)},${rd(r)} 0 0 1 ${rd(size - r)},${rd(size)}`,
+        `H${rd(r)}`,
+        `A${rd(r)},${rd(r)} 0 0 1 0,${rd(size - r)}`,
+        `V${rd(r)}`,
+        `A${rd(r)},${rd(r)} 0 0 1 ${rd(r)},0 Z`
+    ].join(' ');
+}
+function bevelPath(size, r) {
+    return [
+        `M${rd(r)},0 H${rd(size - r)}`,
+        `L${rd(size)},${rd(r)} V${rd(size - r)}`,
+        `L${rd(size - r)},${rd(size)} H${rd(r)}`,
+        `L0,${rd(size - r)} V${rd(r)} Z`
+    ].join(' ');
+}
+function notchPath(size, r) {
+    return [
+        `M${rd(r)},0 H${rd(size - r)}`,
+        `L${rd(size - r)},${rd(r)} L${rd(size)},${rd(r)}`,
+        `V${rd(size - r)} L${rd(size - r)},${rd(size - r)}`,
+        `L${rd(size - r)},${rd(size)} H${rd(r)}`,
+        `L${rd(r)},${rd(size - r)} L0,${rd(size - r)}`,
+        `V${rd(r)} L${rd(r)},${rd(r)} L${rd(r)},0 Z`
+    ].join(' ');
+}
 function rd(n) {
     return Math.round(n * 100) / 100;
 }
+// ── Polygon helpers ───────────────────────────────────────────────────────────
+/**
+ * Extract (x, y) coordinate pairs from an SVG path `d` string.
+ *
+ * Parses M and L commands (the only ones `generateCornerPath` emits for
+ * non-degenerate Lamé curves). Ignores H/V/A/Z.
+ */
+function pathToPoints(d) {
+    const pts = [];
+    // Match M or L followed by x,y
+    for (const m of d.matchAll(/[ML]\s*([\d.e+-]+)\s*,\s*([\d.e+-]+)/gi)) {
+        pts.push([parseFloat(m[1]), parseFloat(m[2])]);
+    }
+    // Also pick up H (horizontal-line-to) and V (vertical-line-to) for degenerate paths
+    // Not needed for squircle, but included for completeness with round paths
+    return pts;
+}
+/**
+ * Generate a CSS `polygon()` string for a superellipse corner shape.
+ *
+ * Runs `generateCornerPath` on a 100×100 grid and converts the resulting
+ * SVG path points to percentage coordinates, producing a CSS polygon that
+ * scales with the element.
+ *
+ * @param cornerRadius  Corner radius as percentage (0-50). Default: 50
+ * @param cornerShape   CornerShape keyword or superellipse(n). Default: 'squircle'
+ */
+export function generateCornerPolygon(cornerRadius = 50, cornerShape = 'squircle') {
+    const path = generateCornerPath(100, cornerRadius, cornerShape);
+    const pts = pathToPoints(path);
+    const coords = pts.map(([x, y]) => `${rd(x)}% ${rd(y)}%`).join(', ');
+    return `polygon(${coords})`;
+}
+/**
+ * Generate percentage-based polygon points for a superellipse corner shape.
+ *
+ * Returns an array of [x%, y%] pairs (0-100 range), suitable for conversion
+ * to SVG `<polygon>` points at any absolute size.
+ *
+ * @param cornerRadius  Corner radius as percentage (0-50). Default: 50
+ * @param cornerShape   CornerShape keyword or superellipse(n). Default: 'squircle'
+ */
+export function generateCornerPolygonPoints(cornerRadius = 50, cornerShape = 'squircle') {
+    const path = generateCornerPath(100, cornerRadius, cornerShape);
+    return pathToPoints(path);
+}