@usespaceui/squircle 0.1.1 → 0.1.2

package/README.md

@@ -1,9 +1,9 @@
 <p align="center">
-  <a href="https://squircle.spaceui.one" target="_blank">
+  <a href="https://www.spaceui.one/components/squircle" target="_blank">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://squircle.spaceui.one/logo.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://squircle.spaceui.one/logo.svg">
-      <img alt="Space UI logo" src="https://squircle.spaceui.one/logo.svg" width="100" />
+      <source media="(prefers-color-scheme: dark)" srcset="https://www.spaceui.one/logo.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://www.spaceui.one/logo.svg">
+      <img alt="Space UI logo" src="https://www.spaceui.one/logo.svg" width="100" />
     </picture>
   </a>
 </p>
@@ -17,7 +17,7 @@
 </p>
 
 <p align="center">
-  <a href="https://squircle.spaceui.one">Preview</a> • 
+  <a href="https://www.spaceui.one/components/squircle">Preview</a> • 
   <a href="https://github.com/usespaceui/squircle">Source Code</a> • 
   <a href="https://www.spaceui.one">SpaceUI.one</a>
 </p>
@@ -58,7 +58,7 @@
 ## ✨ Overview
 
 `@usespaceui/squircle` brings iOS-style squircles (mathematically perfect superellipses) to your Tailwind CSS projects. It mimics the continuous curvature corners found in Figma and Apple devices.
-By utilizing the CSS Houdini Paint Worklet API, it provides a native-like performance and seamlessly integrates with Tailwind CSS.
+By combining native CSS `corner-shape: squircle` with progressive CSS Houdini Paint Worklet fallbacks, it provides instantaneous zero-lag rendering and seamlessly integrates with Tailwind CSS.
 
 ---
 
@@ -72,7 +72,7 @@ npm install @usespaceui/squircle
 yarn add @usespaceui/squircle
 ```
 
-Zero dependencies. Add the plugin to your Tailwind configuration or import it directly (Tailwind).
+Zero dependencies. Add the plugin to your Tailwind configuration (v3) or your CSS entry file (v4).
 
 ---
 
@@ -90,11 +90,12 @@ Since the worklet interacts with the browser DOM, initialize it inside a Client
 import * as React from 'react'
 import { initSquircle } from '@usespaceui/squircle'
 
-export function SquircleProvider({ children }: { children: React.ReactNode }) {
-  React.useEffect(() => {
-    initSquircle()
-  }, [])
+// Initialize immediately as client bundle loads before paint
+if (typeof window !== 'undefined') {
+  initSquircle()
+}
 
+export function SquircleProvider({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }
 ```
@@ -127,29 +128,47 @@ if (typeof window !== 'undefined') {
 }
 ```
 
-## Configure Tailwind CSS 4
+### Configure Tailwind CSS 4
 
-Add the squircle plugin to your `tailwind.config.ts`.
+In Tailwind CSS v4, add the plugin directly to your CSS entry point (e.g. `globals.css` or `styles.css`):
 
 ```css
-@import '@usespaceui/squircle';
+@import 'tailwindcss';
+@plugin "@usespaceui/squircle";
 ```
 
 ### Configure Tailwind CSS 3
 
-Add the squircle plugin to your `tailwind.config.js` or `tailwind.config.ts`.
+Add the squircle plugin to your `tailwind.config.js` or `tailwind.config.ts`:
 
-```ts
-import squirclePlugin from '@usespaceui/squircle'
+#### CommonJS (`tailwind.config.js`)
 
+```js
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@usespaceui/squircle')],
+}
+```
+
+#### ESM / TypeScript (`tailwind.config.ts` or `tailwind.config.mjs`)
+
+```ts
+import type { Config } from 'tailwindcss'
+import squircle from '@usespaceui/squircle'
+
+const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
-  plugins: [squirclePlugin],
+  plugins: [squircle],
 }
+
+export default config
 ```
 
 ---
@@ -158,76 +177,63 @@ export default {
 
 ### 1. Sizing
 
-The plugin generates squircle utilities based on your existing Tailwind `borderRadius` theme. If your Tailwind config has `rounded-2xl`, you automatically have `squircle-2xl`.
+Apply the `squircle` utility alongside your Tailwind `rounded-*` classes:
 
 ```html
-<div class="squircle-md p-4 bg-black text-white">Space UI Squircle!</div>
-<div class="squircle-2xl">...</div>
-<div class="squircle-full">...</div>
-<!-- Automatically clamped to pill/circle -->
+<!-- Standard Tailwind sizes -->
+<button class="squircle rounded-2xl bg-black text-white px-6 py-3">
+  Space UI Squircle
+</button>
 
-<!-- Arbitrary values are fully supported -->
-<div class="squircle-[40px]">...</div>
+<!-- Smooth hover transitions between radii -->
+<button class="squircle rounded-7xl hover:rounded-3xl transition-all duration-300">
+  Interactive Squircle
+</button>
+
+<!-- Pill / Circle -->
+<div class="squircle rounded-full">...</div>
+
+<!-- Arbitrary values -->
+<div class="squircle rounded-[40px]">...</div>
 ```
 
+---
+
 ### 2. Smoothing Intensity
 
-By default, the plugin applies a **60% smooth transition** between the straight edge and the corner arc, perfectly matching Apple and Figma's native smoothing.
+By default, `squircle` applies a **60% smooth transition**, perfectly matching Apple (iOS) and Figma's native continuous curvature.
 
-You can adjust this intensity using modifiers (`/0`, `/20`, `/40`, `/60`, `/80`, `/100`).
+You can adjust this intensity using modifiers (`/0`, `/20`, `/40`, `/60`, `/80`, `/100`):
 
 ```html
-<!-- Maximum smoothing -->
-<div class="squircle-2xl/100">...</div>
+<!-- Maximum smoothing (pronounced superellipse) -->
+<button class="squircle/100 rounded-3xl">...</button>
 
 <!-- Minimal smoothing (closer to a plain rounded rectangle) -->
-<div class="squircle-2xl/20">...</div>
+<button class="squircle/20 rounded-3xl">...</button>
 
-<!-- Arbitrary smoothing -->
-<div class="squircle-2xl/[25]">...</div>
+<!-- Default is 60% (matches Apple iOS & Figma perfectly) -->
+<button class="squircle rounded-3xl">...</button>
 ```
 
-### 3. Native Borders (The Magic)
-
-Use standard Tailwind border utilities. The Houdini worklet reads your native CSS border classes and draws the squircle border perfectly. No workarounds needed.
-
-```html
-<!-- 8px red border -->
-<div class="squircle-2xl border-8 border-red-500 bg-black">...</div>
-
-<!-- 1px semi-transparent blue border -->
-<div class="squircle-[30px] border border-blue-500/50 bg-white">...</div>
-```
-
-> **Note on border placement:**
-> By default, the plugin draws the border **outside** the element (like an outline or a ring) to preserve the interior space for your content. If you want the border drawn inward (standard CSS border-box behavior), you can override the custom CSS variable:
-> `<div class="squircle-2xl border-4 border-red-500 [--tw-squircle-outset:0]">...</div>`
+> **Note on custom smoothing:** Custom smoothing modifiers are processed dynamically by the CSS Houdini engine. In browsers with native `corner-shape: squircle`, the native CSS superellipse curve is used by default.
 
 ---
 
-## 🛠 Advanced: Using with `tailwind-merge`
-
-If you use `tailwind-merge` (standard in UI libraries like `shadcn/ui` for their `cn()` utility), you should configure it so that `squircle-*` classes properly override standard `rounded-*` classes when both are applied.
+### 3. Borders & Outlines
 
-Extend your merge configuration to group `squircle` into the `rounded` class group:
-
-```ts
-import { clsx, type ClassValue } from 'clsx'
-import { extendTailwindMerge } from 'tailwind-merge'
-
-const customTwMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      rounded: [
-        { squircle: [() => true] }, // Merges any squircle-* class into the rounded group
-      ],
-    },
-  },
-})
+Use standard Tailwind border utilities (`border`, `border-2`, `border-8`, etc.). The squircle contour shapes both the background and the border:
 
-export function cn(...inputs: ClassValue[]) {
-  return customTwMerge(clsx(inputs))
-}
+```html
+<!-- 8px border following squircle curvature -->
+<button class="squircle rounded-7xl border-8 border-red-500 bg-black text-white">
+  Bordered Squircle
+</button>
+
+<!-- 1px subtle border -->
+<div class="squircle rounded-3xl border border-border bg-card">
+  Card with Squircle Border
+</div>
 ```
 
 ---
@@ -238,13 +244,13 @@ export function cn(...inputs: ClassValue[]) {
   Registers the CSS Houdini Paint Worklet and sets up the custom CSS properties (`--tw-squircle-w` and `--tw-squircle-smooth`). It is safe to call multiple times and fails gracefully in environments where Houdini is not supported.
 
 - `plugin(tailwindcss)`
-  The default export is a Tailwind CSS plugin that provides the `squircle-*` utility classes. It automatically provides fallback `border-radius` styles for browsers that don't support the Paint API.
+  The default export is a Tailwind CSS plugin that provides the `squircle` utility class. It automatically provides fallback `border-radius` styles for browsers that don't support the Paint API.
 
 ---
 
 ### Features
 
-- 💃 **Native Tailwind Integration:** Use utility classes like `squircle-2xl` just like you would `rounded-2xl`. No framework-specific wrappers required and if the navigator don"'t support squricle the rounded value is applies.
+- 💃 **Native Tailwind Integration:** Use the `squircle` utility alongside standard `rounded-*` classes. No framework-specific wrappers required, and if the browser doesn't support the Paint API, standard rounded fallback values apply automatically.
 - ⚡ **Zero-JS Layout Thrashing:** Driven by the native CSS Paint API (Houdini). No `ResizeObserver`, no DOM manipulation, no SVG paths. Repaints happen instantly on the compositor thread.
 - 👌 **Framework Agnostic:** Works in React, Vue, Svelte, Solid, or plain HTML.
 
@@ -267,7 +273,7 @@ MIT — Free for commercial and personal use.
 
 ## 📚 Resources
 
-- 🔍 [Explore the squircles & Playground](https://squircle.spaceui.one)
+- 🔍 [Explore the squircles & Playground](https://www.spaceui.one/components/squircle)
 - 🌍 [Space UI Official Site](https://www.spaceui.one)
 
 ---

package/dist/index.d.mts

@@ -1,6 +1,9 @@
 import * as tailwindcss_plugin from 'tailwindcss/plugin';
 
+declare const workletCode = "\nclass SquirclePainter {\n  static get inputProperties() {\n    return [\n      '--tw-squircle-w',\n      '--tw-squircle-smooth',\n      'border-top-left-radius',\n      'border-radius'\n    ];\n  }\n  \n  paint(ctx, size, properties) {\n    const getProp = (name) => {\n      const p = properties.get(name);\n      if (!p) return '';\n      if (typeof p.value === 'number') return p.value + (p.unit || 'px');\n      return p.toString().trim();\n    };\n    \n    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');\n    let radius = 0;\n    if (radiusStr) {\n      const firstVal = radiusStr.trim().split(/s+/)[0];\n      if (firstVal.endsWith('%')) {\n        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;\n      } else {\n        const parsed = parseFloat(firstVal);\n        if (firstVal.endsWith('rem')) {\n          radius = parsed * 16;\n        } else {\n          radius = parsed || 0;\n        }\n      }\n    }\n    const smoothStr = getProp('--tw-squircle-smooth');\n    let smooth = parseFloat(smoothStr);\n    if (isNaN(smooth)) smooth = 0.6;\n    \n    radius = Math.min(radius, size.width / 2, size.height / 2);\n    \n    this.drawSquircle(ctx, size.width, size.height, radius, smooth);\n    ctx.fillStyle = 'black';\n    ctx.fill();\n  }\n  \n  drawSquircle(ctx, width, height, radius, smooth) {\n    const n = 2 + smooth * 2;\n    const steps = 30;\n    const step = Math.PI / 2 / steps;\n    ctx.beginPath();\n    for (let i = 0; i <= steps; i++) {\n      const t = Math.PI / 2 - i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      const x = width - radius + X;\n      const y = radius - Y;\n      if (i === 0) ctx.moveTo(x, y);\n      else ctx.lineTo(x, y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(width - radius + X, height - radius + Y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = Math.PI / 2 - i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(radius - X, height - radius + Y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(radius - X, radius - Y);\n    }\n    ctx.closePath();\n  }\n}\n\nclass SquircleBorderPainter extends SquirclePainter {\n  static get inputProperties() {\n    return [\n      '--tw-squircle-w', \n      '--tw-squircle-smooth',\n      'border-top-left-radius',\n      'border-radius',\n      'border-top-width',\n      'border-top-color'\n    ];\n  }\n  \n  paint(ctx, size, properties) {\n    const getProp = (name) => {\n      const p = properties.get(name);\n      if (!p) return '';\n      if (typeof p.value === 'number') return p.value + (p.unit || 'px');\n      return p.toString().trim();\n    };\n\n    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');\n    let radius = 0;\n    if (radiusStr) {\n      const firstVal = radiusStr.trim().split(/s+/)[0];\n      if (firstVal.endsWith('%')) {\n        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;\n      } else {\n        const parsed = parseFloat(firstVal);\n        if (firstVal.endsWith('rem')) {\n          radius = parsed * 16;\n        } else {\n          radius = parsed || 0;\n        }\n      }\n    }\n    const smoothStr = getProp('--tw-squircle-smooth');\n    let smooth = parseFloat(smoothStr);\n    if (isNaN(smooth)) smooth = 0.6;\n    \n    radius = Math.min(radius, size.width / 2, size.height / 2);\n    \n    const bwStr = getProp('border-top-width');\n    const bw = parseFloat(bwStr) || 0;\n    \n    if (bw <= 0) return;\n    \n    let color = getProp('border-top-color');\n    if (!color) color = 'black';\n    \n    // Inset stroke by half border-width so it stays 100% within the element bounds\n    const halfBw = bw / 2;\n    const innerW = Math.max(0, size.width - bw);\n    const innerH = Math.max(0, size.height - bw);\n    const innerR = Math.max(0, radius - halfBw);\n    \n    ctx.save();\n    ctx.translate(halfBw, halfBw);\n    this.drawSquircle(ctx, innerW, innerH, innerR, smooth);\n    ctx.lineWidth = bw;\n    ctx.strokeStyle = color;\n    ctx.stroke();\n    ctx.restore();\n  }\n}\n\nregisterPaint('squircle', SquirclePainter);\nregisterPaint('squircle-border', SquircleBorderPainter);\n";
+
 declare function initSquircle(): void;
+
 declare const _default: tailwindcss_plugin.PluginWithConfig;
 
-export { _default as default, initSquircle };
+export { _default as default, initSquircle, workletCode };

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 import * as tailwindcss_plugin from 'tailwindcss/plugin';
 
+declare const workletCode = "\nclass SquirclePainter {\n  static get inputProperties() {\n    return [\n      '--tw-squircle-w',\n      '--tw-squircle-smooth',\n      'border-top-left-radius',\n      'border-radius'\n    ];\n  }\n  \n  paint(ctx, size, properties) {\n    const getProp = (name) => {\n      const p = properties.get(name);\n      if (!p) return '';\n      if (typeof p.value === 'number') return p.value + (p.unit || 'px');\n      return p.toString().trim();\n    };\n    \n    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');\n    let radius = 0;\n    if (radiusStr) {\n      const firstVal = radiusStr.trim().split(/s+/)[0];\n      if (firstVal.endsWith('%')) {\n        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;\n      } else {\n        const parsed = parseFloat(firstVal);\n        if (firstVal.endsWith('rem')) {\n          radius = parsed * 16;\n        } else {\n          radius = parsed || 0;\n        }\n      }\n    }\n    const smoothStr = getProp('--tw-squircle-smooth');\n    let smooth = parseFloat(smoothStr);\n    if (isNaN(smooth)) smooth = 0.6;\n    \n    radius = Math.min(radius, size.width / 2, size.height / 2);\n    \n    this.drawSquircle(ctx, size.width, size.height, radius, smooth);\n    ctx.fillStyle = 'black';\n    ctx.fill();\n  }\n  \n  drawSquircle(ctx, width, height, radius, smooth) {\n    const n = 2 + smooth * 2;\n    const steps = 30;\n    const step = Math.PI / 2 / steps;\n    ctx.beginPath();\n    for (let i = 0; i <= steps; i++) {\n      const t = Math.PI / 2 - i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      const x = width - radius + X;\n      const y = radius - Y;\n      if (i === 0) ctx.moveTo(x, y);\n      else ctx.lineTo(x, y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(width - radius + X, height - radius + Y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = Math.PI / 2 - i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(radius - X, height - radius + Y);\n    }\n    for (let i = 0; i <= steps; i++) {\n      const t = i * step;\n      const X = radius * Math.pow(Math.cos(t), 2 / n);\n      const Y = radius * Math.pow(Math.sin(t), 2 / n);\n      ctx.lineTo(radius - X, radius - Y);\n    }\n    ctx.closePath();\n  }\n}\n\nclass SquircleBorderPainter extends SquirclePainter {\n  static get inputProperties() {\n    return [\n      '--tw-squircle-w', \n      '--tw-squircle-smooth',\n      'border-top-left-radius',\n      'border-radius',\n      'border-top-width',\n      'border-top-color'\n    ];\n  }\n  \n  paint(ctx, size, properties) {\n    const getProp = (name) => {\n      const p = properties.get(name);\n      if (!p) return '';\n      if (typeof p.value === 'number') return p.value + (p.unit || 'px');\n      return p.toString().trim();\n    };\n\n    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');\n    let radius = 0;\n    if (radiusStr) {\n      const firstVal = radiusStr.trim().split(/s+/)[0];\n      if (firstVal.endsWith('%')) {\n        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;\n      } else {\n        const parsed = parseFloat(firstVal);\n        if (firstVal.endsWith('rem')) {\n          radius = parsed * 16;\n        } else {\n          radius = parsed || 0;\n        }\n      }\n    }\n    const smoothStr = getProp('--tw-squircle-smooth');\n    let smooth = parseFloat(smoothStr);\n    if (isNaN(smooth)) smooth = 0.6;\n    \n    radius = Math.min(radius, size.width / 2, size.height / 2);\n    \n    const bwStr = getProp('border-top-width');\n    const bw = parseFloat(bwStr) || 0;\n    \n    if (bw <= 0) return;\n    \n    let color = getProp('border-top-color');\n    if (!color) color = 'black';\n    \n    // Inset stroke by half border-width so it stays 100% within the element bounds\n    const halfBw = bw / 2;\n    const innerW = Math.max(0, size.width - bw);\n    const innerH = Math.max(0, size.height - bw);\n    const innerR = Math.max(0, radius - halfBw);\n    \n    ctx.save();\n    ctx.translate(halfBw, halfBw);\n    this.drawSquircle(ctx, innerW, innerH, innerR, smooth);\n    ctx.lineWidth = bw;\n    ctx.strokeStyle = color;\n    ctx.stroke();\n    ctx.restore();\n  }\n}\n\nregisterPaint('squircle', SquirclePainter);\nregisterPaint('squircle-border', SquircleBorderPainter);\n";
+
 declare function initSquircle(): void;
+
 declare const _default: tailwindcss_plugin.PluginWithConfig;
 
-export { _default as default, initSquircle };
+export { _default as default, initSquircle, workletCode };

package/dist/index.js

@@ -1,21 +1,36 @@
-"use strict";var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var h=(r,t)=>{for(var i in t)o(r,i,{get:t[i],enumerable:!0})},m=(r,t,i,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of d(t))!p.call(r,s)&&s!==i&&o(r,s,{get:()=>t[s],enumerable:!(e=l(t,s))||e.enumerable});return r};var w=r=>m(o({},"__esModule",{value:!0}),r);var f={};h(f,{default:()=>S,initSquircle:()=>g});module.exports=w(f);function n(r,t){return{handler:r,config:t}}n.withOptions=function(r,t=()=>({})){function i(e){return{handler:r(e),config:t(e)}}return i.__isOptionsFunction=!0,i};var c=n;var u=`
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var s in t)n(e,s,{get:t[s],enumerable:!0})},w=(e,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of h(t))!m.call(e,r)&&r!==s&&n(e,r,{get:()=>t[r],enumerable:!(i=p(t,r))||i.enumerable});return e};var g=e=>w(n({},"__esModule",{value:!0}),e);var S={};f(S,{default:()=>q,initSquircle:()=>b,workletCode:()=>c});module.exports=g(S);function u(e,t){return{handler:e,config:t}}u.withOptions=function(e,t=()=>({})){function s(i){return{handler:e(i),config:t(i)}}return s.__isOptionsFunction=!0,s};var l=u;var c=`
 class SquirclePainter {
   static get inputProperties() {
-    return ['--tw-squircle-w', '--tw-squircle-smooth'];
+    return [
+      '--tw-squircle-w',
+      '--tw-squircle-smooth',
+      'border-top-left-radius',
+      'border-radius'
+    ];
   }
   
   paint(ctx, size, properties) {
     const getProp = (name) => {
       const p = properties.get(name);
-      return p ? p.toString().trim() : '';
+      if (!p) return '';
+      if (typeof p.value === 'number') return p.value + (p.unit || 'px');
+      return p.toString().trim();
     };
     
-    const radiusStr = getProp('--tw-squircle-w');
+    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');
     let radius = 0;
-    if (radiusStr.endsWith('%')) {
-      radius = (Math.min(size.width, size.height) * parseFloat(radiusStr)) / 100;
-    } else {
-      radius = parseFloat(radiusStr) || 0;
+    if (radiusStr) {
+      const firstVal = radiusStr.trim().split(/s+/)[0];
+      if (firstVal.endsWith('%')) {
+        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;
+      } else {
+        const parsed = parseFloat(firstVal);
+        if (firstVal.endsWith('rem')) {
+          radius = parsed * 16;
+        } else {
+          radius = parsed || 0;
+        }
+      }
     }
     const smoothStr = getProp('--tw-squircle-smooth');
     let smooth = parseFloat(smoothStr);
@@ -69,6 +84,8 @@ class SquircleBorderPainter extends SquirclePainter {
     return [
       '--tw-squircle-w', 
       '--tw-squircle-smooth',
+      'border-top-left-radius',
+      'border-radius',
       'border-top-width',
       'border-top-color'
     ];
@@ -77,15 +94,25 @@ class SquircleBorderPainter extends SquirclePainter {
   paint(ctx, size, properties) {
     const getProp = (name) => {
       const p = properties.get(name);
-      return p ? p.toString().trim() : '';
+      if (!p) return '';
+      if (typeof p.value === 'number') return p.value + (p.unit || 'px');
+      return p.toString().trim();
     };
 
-    const radiusStr = getProp('--tw-squircle-w');
+    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');
     let radius = 0;
-    if (radiusStr.endsWith('%')) {
-      radius = (Math.min(size.width, size.height) * parseFloat(radiusStr)) / 100;
-    } else {
-      radius = parseFloat(radiusStr) || 0;
+    if (radiusStr) {
+      const firstVal = radiusStr.trim().split(/s+/)[0];
+      if (firstVal.endsWith('%')) {
+        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;
+      } else {
+        const parsed = parseFloat(firstVal);
+        if (firstVal.endsWith('rem')) {
+          radius = parsed * 16;
+        } else {
+          radius = parsed || 0;
+        }
+      }
     }
     const smoothStr = getProp('--tw-squircle-smooth');
     let smooth = parseFloat(smoothStr);
@@ -101,14 +128,22 @@ class SquircleBorderPainter extends SquirclePainter {
     let color = getProp('border-top-color');
     if (!color) color = 'black';
     
-    this.drawSquircle(ctx, size.width, size.height, radius, smooth);
+    // Inset stroke by half border-width so it stays 100% within the element bounds
+    const halfBw = bw / 2;
+    const innerW = Math.max(0, size.width - bw);
+    const innerH = Math.max(0, size.height - bw);
+    const innerR = Math.max(0, radius - halfBw);
     
-    ctx.lineWidth = bw * 2;
+    ctx.save();
+    ctx.translate(halfBw, halfBw);
+    this.drawSquircle(ctx, innerW, innerH, innerR, smooth);
+    ctx.lineWidth = bw;
     ctx.strokeStyle = color;
     ctx.stroke();
+    ctx.restore();
   }
 }
 
 registerPaint('squircle', SquirclePainter);
 registerPaint('squircle-border', SquircleBorderPainter);
-`;function g(){if(typeof window<"u"){if("registerProperty"in CSS)try{CSS.registerProperty({name:"--tw-squircle-w",syntax:"<length> | <percentage>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:"--tw-squircle-smooth",syntax:"<number>",inherits:!0,initialValue:"0.6"})}catch{}if("paintWorklet"in CSS){let r=`data:application/javascript;charset=utf8,${encodeURIComponent(u)}`;CSS.paintWorklet.addModule(r).catch(t=>console.error("Squircle worklet failed",t))}}}var S=c(function({matchUtilities:r,theme:t}){r({squircle:(i,{modifier:e})=>{let s=.6;if(e){let a=parseFloat(e);isNaN(a)||(s=a/100)}return{"border-radius":i,"--tw-squircle-w":i,"--tw-squircle-smooth":s.toString(),"@supports (mask-image: paint(squircle))":{"border-radius":"0","mask-image":"paint(squircle)"},'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"@supports (mask-image: paint(squircle))":{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 1)"}},"a&, input&, a &, input &":{"@supports (mask-image: paint(squircle))":{"border-radius":i,"mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}},{values:t("borderRadius"),modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}})});0&&(module.exports={initSquircle});
+`;var d=!1;function b(){if(typeof window<"u"&&"CSS"in window){if(d)return;if(d=!0,typeof CSS.supports=="function"&&CSS.supports("corner-shape","squircle")){document&&document.documentElement&&document.documentElement.classList.add("squircle-native");return}if("registerProperty"in CSS)try{CSS.registerProperty({name:"--tw-squircle-w",syntax:"<length> | <percentage>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:"--tw-squircle-smooth",syntax:"<number>",inherits:!0,initialValue:"0.6"})}catch{}if("paintWorklet"in CSS){let e=`data:application/javascript;charset=utf8,${encodeURIComponent(c)}`;CSS.paintWorklet.addModule(e).then(()=>{document&&document.documentElement&&document.documentElement.classList.add("squircle-ready")}).catch(t=>console.error("Squircle worklet failed",t))}}}var q=l(function({addUtilities:e,matchUtilities:t,theme:s}){t({squircle:(i,{modifier:r})=>{let a=.6;if(r){let o=parseFloat(r);isNaN(o)||(a=o>1?o/100:o)}return{"--tw-squircle-smooth":a.toString(),"@supports (corner-shape: squircle)":{"corner-shape":"squircle"},"@supports (not (corner-shape: squircle)) and (mask-image: paint(squircle))":{":where(html.squircle-ready) &":{"mask-image":"paint(squircle)","-webkit-mask-image":"paint(squircle)",'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 0)"},"a&, input&, a &, input &":{"mask-image":"none","-webkit-mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}}},{values:{DEFAULT:"DEFAULT"},modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}}),t({squircle:(i,{modifier:r})=>{let a=.6;if(r){let o=parseFloat(r);isNaN(o)||(a=o/100)}return{"border-radius":i,"--tw-squircle-w":i,"--tw-squircle-smooth":a.toString(),"@supports (corner-shape: squircle)":{"corner-shape":"squircle"},"@supports (not (corner-shape: squircle)) and (mask-image: paint(squircle))":{":where(html.squircle-ready) &":{"border-radius":"0","mask-image":"paint(squircle)","-webkit-mask-image":"paint(squircle)",'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 0)"},"a&, input&, a &, input &":{"border-radius":i,"mask-image":"none","-webkit-mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}}},{values:s("borderRadius"),modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}})});0&&(module.exports={initSquircle,workletCode});

package/dist/index.mjs

@@ -1,21 +1,36 @@
-function a(t,r){return{handler:t,config:r}}a.withOptions=function(t,r=()=>({})){function i(e){return{handler:t(e),config:r(e)}}return i.__isOptionsFunction=!0,i};var n=a;var c=`
+function n(e,t){return{handler:e,config:t}}n.withOptions=function(e,t=()=>({})){function a(r){return{handler:e(r),config:t(r)}}return a.__isOptionsFunction=!0,a};var c=n;var u=`
 class SquirclePainter {
   static get inputProperties() {
-    return ['--tw-squircle-w', '--tw-squircle-smooth'];
+    return [
+      '--tw-squircle-w',
+      '--tw-squircle-smooth',
+      'border-top-left-radius',
+      'border-radius'
+    ];
   }
   
   paint(ctx, size, properties) {
     const getProp = (name) => {
       const p = properties.get(name);
-      return p ? p.toString().trim() : '';
+      if (!p) return '';
+      if (typeof p.value === 'number') return p.value + (p.unit || 'px');
+      return p.toString().trim();
     };
     
-    const radiusStr = getProp('--tw-squircle-w');
+    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');
     let radius = 0;
-    if (radiusStr.endsWith('%')) {
-      radius = (Math.min(size.width, size.height) * parseFloat(radiusStr)) / 100;
-    } else {
-      radius = parseFloat(radiusStr) || 0;
+    if (radiusStr) {
+      const firstVal = radiusStr.trim().split(/s+/)[0];
+      if (firstVal.endsWith('%')) {
+        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;
+      } else {
+        const parsed = parseFloat(firstVal);
+        if (firstVal.endsWith('rem')) {
+          radius = parsed * 16;
+        } else {
+          radius = parsed || 0;
+        }
+      }
     }
     const smoothStr = getProp('--tw-squircle-smooth');
     let smooth = parseFloat(smoothStr);
@@ -69,6 +84,8 @@ class SquircleBorderPainter extends SquirclePainter {
     return [
       '--tw-squircle-w', 
       '--tw-squircle-smooth',
+      'border-top-left-radius',
+      'border-radius',
       'border-top-width',
       'border-top-color'
     ];
@@ -77,15 +94,25 @@ class SquircleBorderPainter extends SquirclePainter {
   paint(ctx, size, properties) {
     const getProp = (name) => {
       const p = properties.get(name);
-      return p ? p.toString().trim() : '';
+      if (!p) return '';
+      if (typeof p.value === 'number') return p.value + (p.unit || 'px');
+      return p.toString().trim();
     };
 
-    const radiusStr = getProp('--tw-squircle-w');
+    const radiusStr = getProp('--tw-squircle-w') || getProp('border-top-left-radius') || getProp('border-radius');
     let radius = 0;
-    if (radiusStr.endsWith('%')) {
-      radius = (Math.min(size.width, size.height) * parseFloat(radiusStr)) / 100;
-    } else {
-      radius = parseFloat(radiusStr) || 0;
+    if (radiusStr) {
+      const firstVal = radiusStr.trim().split(/s+/)[0];
+      if (firstVal.endsWith('%')) {
+        radius = (Math.min(size.width, size.height) * parseFloat(firstVal)) / 100;
+      } else {
+        const parsed = parseFloat(firstVal);
+        if (firstVal.endsWith('rem')) {
+          radius = parsed * 16;
+        } else {
+          radius = parsed || 0;
+        }
+      }
     }
     const smoothStr = getProp('--tw-squircle-smooth');
     let smooth = parseFloat(smoothStr);
@@ -101,14 +128,22 @@ class SquircleBorderPainter extends SquirclePainter {
     let color = getProp('border-top-color');
     if (!color) color = 'black';
     
-    this.drawSquircle(ctx, size.width, size.height, radius, smooth);
+    // Inset stroke by half border-width so it stays 100% within the element bounds
+    const halfBw = bw / 2;
+    const innerW = Math.max(0, size.width - bw);
+    const innerH = Math.max(0, size.height - bw);
+    const innerR = Math.max(0, radius - halfBw);
     
-    ctx.lineWidth = bw * 2;
+    ctx.save();
+    ctx.translate(halfBw, halfBw);
+    this.drawSquircle(ctx, innerW, innerH, innerR, smooth);
+    ctx.lineWidth = bw;
     ctx.strokeStyle = color;
     ctx.stroke();
+    ctx.restore();
   }
 }
 
 registerPaint('squircle', SquirclePainter);
 registerPaint('squircle-border', SquircleBorderPainter);
-`;function h(){if(typeof window<"u"){if("registerProperty"in CSS)try{CSS.registerProperty({name:"--tw-squircle-w",syntax:"<length> | <percentage>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:"--tw-squircle-smooth",syntax:"<number>",inherits:!0,initialValue:"0.6"})}catch{}if("paintWorklet"in CSS){let t=`data:application/javascript;charset=utf8,${encodeURIComponent(c)}`;CSS.paintWorklet.addModule(t).catch(r=>console.error("Squircle worklet failed",r))}}}var m=n(function({matchUtilities:t,theme:r}){t({squircle:(i,{modifier:e})=>{let s=.6;if(e){let o=parseFloat(e);isNaN(o)||(s=o/100)}return{"border-radius":i,"--tw-squircle-w":i,"--tw-squircle-smooth":s.toString(),"@supports (mask-image: paint(squircle))":{"border-radius":"0","mask-image":"paint(squircle)"},'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"@supports (mask-image: paint(squircle))":{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 1)"}},"a&, input&, a &, input &":{"@supports (mask-image: paint(squircle))":{"border-radius":i,"mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}},{values:r("borderRadius"),modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}})});export{m as default,h as initSquircle};
+`;var l=!1;function f(){if(typeof window<"u"&&"CSS"in window){if(l)return;if(l=!0,typeof CSS.supports=="function"&&CSS.supports("corner-shape","squircle")){document&&document.documentElement&&document.documentElement.classList.add("squircle-native");return}if("registerProperty"in CSS)try{CSS.registerProperty({name:"--tw-squircle-w",syntax:"<length> | <percentage>",inherits:!0,initialValue:"0px"}),CSS.registerProperty({name:"--tw-squircle-smooth",syntax:"<number>",inherits:!0,initialValue:"0.6"})}catch{}if("paintWorklet"in CSS){let e=`data:application/javascript;charset=utf8,${encodeURIComponent(u)}`;CSS.paintWorklet.addModule(e).then(()=>{document&&document.documentElement&&document.documentElement.classList.add("squircle-ready")}).catch(t=>console.error("Squircle worklet failed",t))}}}var w=c(function({addUtilities:e,matchUtilities:t,theme:a}){t({squircle:(r,{modifier:s})=>{let o=.6;if(s){let i=parseFloat(s);isNaN(i)||(o=i>1?i/100:i)}return{"--tw-squircle-smooth":o.toString(),"@supports (corner-shape: squircle)":{"corner-shape":"squircle"},"@supports (not (corner-shape: squircle)) and (mask-image: paint(squircle))":{":where(html.squircle-ready) &":{"mask-image":"paint(squircle)","-webkit-mask-image":"paint(squircle)",'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 0)"},"a&, input&, a &, input &":{"mask-image":"none","-webkit-mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}}},{values:{DEFAULT:"DEFAULT"},modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}}),t({squircle:(r,{modifier:s})=>{let o=.6;if(s){let i=parseFloat(s);isNaN(i)||(o=i/100)}return{"border-radius":r,"--tw-squircle-w":r,"--tw-squircle-smooth":o.toString(),"@supports (corner-shape: squircle)":{"corner-shape":"squircle"},"@supports (not (corner-shape: squircle)) and (mask-image: paint(squircle))":{":where(html.squircle-ready) &":{"border-radius":"0","mask-image":"paint(squircle)","-webkit-mask-image":"paint(squircle)",'&[class~="border"], &[class*=" border-"], &[class^="border-"]':{"border-image-source":"paint(squircle-border)","border-image-slice":"0 fill","border-image-outset":"var(--tw-squircle-outset, 0)"},"a&, input&, a &, input &":{"border-radius":r,"mask-image":"none","-webkit-mask-image":"none","background-image":"paint(squircle)","border-image-source":"none"}}}}}},{values:a("borderRadius"),modifiers:{0:"0",20:"20",40:"40",60:"60",80:"80",100:"100"}})});export{w as default,f as initSquircle,u as workletCode};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usespaceui/squircle",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Flawless math-driven squircle masking and geometry rendering for modern UIs.",
   "author": {
     "name": "SpaceUI",
@@ -19,7 +19,7 @@
     "url": "https://github.com/sponsors/usespaceui"
   },
   "license": "MIT",
-  "homepage": "https://squircle.spaceui.one",
+  "homepage": "https://www.spaceui.one/components/squircle",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/usespaceui/squircle.git"