### Local Browser Smoke Test Setup Source: https://github.com/jacethings/lisse/blob/main/docs/testing.md Commands to set up and run local browser smoke tests, including installing necessary browser binaries and executing the tests. ```bash cd tests/browser-smoke pnpm exec playwright install chromium webkit firefox pnpm test ``` -------------------------------- ### Install @lisse/core Source: https://github.com/jacethings/lisse/blob/main/packages/core/README.md Install the core package using npm. ```sh npm install @lisse/core ``` -------------------------------- ### Install @lisse/svelte Source: https://github.com/jacethings/lisse/blob/main/packages/svelte/README.md Install the package using npm. Ensure you have Svelte version 3.0.0 or higher installed as a peer dependency. ```sh npm install @lisse/svelte ``` -------------------------------- ### Install @lisse/vue Source: https://github.com/jacethings/lisse/blob/main/packages/vue/README.md Install the package using npm. Ensure you have Vue version 3.3.0 or higher as a peer dependency. ```sh npm install @lisse/vue ``` -------------------------------- ### Install Lisse Core for Vanilla JS Source: https://github.com/jacethings/lisse/wiki/Getting-Started Install the core package for vanilla JavaScript or direct access to utilities. Use npm, pnpm, or yarn. ```sh npm install @lisse/core # or pnpm add @lisse/core # or yarn add @lisse/core ``` -------------------------------- ### Install Dependencies Source: https://github.com/jacethings/lisse/blob/main/CONTRIBUTING.md Installs project dependencies using pnpm. Ensure Node.js version 18 or higher and pnpm are installed before running. ```sh pnpm install ``` -------------------------------- ### Runtime Harness Example Source: https://github.com/jacethings/lisse/blob/main/docs/testing.md Example of using the runtime harness for deterministic testing of resize and requestAnimationFrame batching. Ensures proper timing without asynchronous waits. ```typescript import { installHarness, uninstallHarness } from "../../core/__tests__/harness/runtime-harness.ts"; beforeEach(() => { h_ = installHarness(); }); afterEach(() => { uninstallHarness(); }); it("batches resize entries", () => { // ...mount, stub layout dimensions... h_.deliverResize(el, 200, 100); h_.deliverResize(el, 250, 120); // dedupes into the same rAF expect(h_.pendingRafCount()).toBe(1); h_.flushRaf(); // synchronously runs the rAF callback expect(el.style.clipPath).not.toBe(""); }); ``` -------------------------------- ### Install Lisse for React Source: https://github.com/jacethings/lisse/wiki/Getting-Started Install the React package using npm, pnpm, or yarn. Requires React 18 or later. ```sh npm install @lisse/react # or pnpm add @lisse/react # or yarn add @lisse/react ``` -------------------------------- ### Install Lisse for Vue Source: https://github.com/jacethings/lisse/wiki/Getting-Started Install the Vue package using npm, pnpm, or yarn. Requires Vue 3.3 or later. ```sh npm install @lisse/vue # or pnpm add @lisse/vue # or yarn add @lisse/vue ``` -------------------------------- ### Install Lisse for Svelte Source: https://github.com/jacethings/lisse/wiki/Getting-Started Install the Svelte package using npm, pnpm, or yarn. Requires Svelte 3 or later. ```sh npm install @lisse/svelte # or pnpm add @lisse/svelte # or yarn add @lisse/svelte ``` -------------------------------- ### Install Lisse React Package Source: https://github.com/jacethings/lisse/blob/main/README.md Install the @lisse/react package using npm. This package provides React hooks and components for using Lisse primitives. ```sh npm install @lisse/react ``` -------------------------------- ### Vanilla JS Dialog with Smooth Corners Source: https://github.com/jacethings/lisse/wiki/Recipes This example shows how to create a dialog with smooth corners using the core Lisse library. It utilizes `generateClipPath` and `ResizeObserver` for dynamic adjustments. ```html ``` -------------------------------- ### CSS border-radius Examples Source: https://github.com/jacethings/lisse/wiki/Corner-Shapes-Comparison Demonstrates various ways to use the CSS border-radius property for different corner shapes, including circular, elliptical, and percentage-based radii. ```css /* Circular corner */ .a { border-radius: 16px; } ``` ```css /* Elliptical: X radius 32px, Y radius 16px */ .b { border-radius: 32px / 16px; } ``` ```css /* Four corners, clockwise from top-left */ .c { border-radius: 8px 16px 24px 32px; } ``` ```css /* Pill: long axis collapses to a stadium shape */ .d { border-radius: 9999px; } ``` ```css /* Percentage: scales with the box. 50%/50% = ellipse */ .e { border-radius: 50% / 50%; } ``` -------------------------------- ### Vanilla JS with Smooth Corners using Core Source: https://github.com/jacethings/lisse/wiki/Recipes Implement smooth corners directly in vanilla JavaScript using the '@lisse/core' package. This example applies smooth corners to a div and uses ResizeObserver to update them on element resize. ```html

Delete file?

This action cannot be undone.

``` -------------------------------- ### Per-Corner Radii (corner-smoothing) Source: https://github.com/jacethings/lisse/wiki/Migrating-from-Corner-Smoothing Example of applying different corner radii to specific corners using corner-smoothing. ```tsx // corner-smoothing
Asymmetric
 ``` -------------------------------- ### Basic Vue SmoothCorners Usage Source: https://github.com/jacethings/lisse/blob/main/packages/vue/README.md A simple example demonstrating the basic usage of the SmoothCorners component with rounded corners. ```vue ``` -------------------------------- ### Plain Card with Solid Border (corner-smoothing) Source: https://github.com/jacethings/lisse/wiki/Migrating-from-Corner-Smoothing Example of creating a plain card with a solid border using the corner-smoothing library. ```tsx // corner-smoothing import { Squircle } from "corner-smoothing";

Hello, squircle

 ``` -------------------------------- ### Vanilla JS Button with Smooth Corners Source: https://github.com/jacethings/lisse/wiki/Recipes This snippet demonstrates how to apply smooth, clipped corners to a native HTML button using @lisse/core. It requires manual setup for resizing. ```html ``` -------------------------------- ### CSS Corner Shape Syntax Examples Source: https://github.com/jacethings/lisse/wiki/Corner-Shapes-Comparison Demonstrates various ways to apply the `corner-shape` property in CSS, including named shapes and the `superellipse()` function. Ensure `border-radius` is set for `corner-shape` to have an effect. ```css .card { border-radius: 32px; corner-shape: squircle; } ``` ```css /* 1-4 value form, same corner order as border-radius */ .mixed { corner-shape: squircle bevel scoop round; } ``` ```css /* Longhands for one corner */ .one { corner-top-left-shape: squircle; } ``` ```css /* The underlying function */ .tune { corner-shape: superellipse(1.4); } ``` -------------------------------- ### Quintic Bézier Corner Setup Source: https://github.com/jacethings/lisse/blob/main/docs/curves.md Defines the control points for a single quintic Bézier curve to form a G2 continuous corner. Control points B0 and B5 are endpoints, B1 and B4 enforce G1 continuity, and B2 and B3 enforce G2 continuity (zero curvature at endpoints). ```mathematica B0 = (−p, 0) B1 = (−p + a, 0) B2 = (−p · s, 0) B3 = (0, p · s) B4 = (0, p − a) B5 = (0, p) ``` -------------------------------- ### Run Benchmarks Source: https://github.com/jacethings/lisse/wiki/Performance Execute the performance benchmark suite from the repository root using pnpm. ```bash pnpm bench ``` -------------------------------- ### Run Benchmarks Source: https://github.com/jacethings/lisse/blob/main/benchmarks/README.md Execute the benchmark suite from the repository root or the benchmarks directory. ```sh pnpm bench ``` ```sh pnpm --filter @lisse/benchmarks bench ``` -------------------------------- ### Run Benchmarks Source: https://github.com/jacethings/lisse/blob/main/docs/performance.md Execute the full performance benchmark suite or a CI-optimized core-only suite. ```sh pnpm bench ``` ```sh pnpm bench:ci ``` -------------------------------- ### Preview Package Contents Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Use `npm pack --dry-run` within each package directory to preview the exact contents that will be included in the tarball before publishing. Verify that only expected files like LICENSE, README.md, dist/*, and package.json are present. ```bash cd packages/core && npm pack --dry-run cd ../react && npm pack --dry-run # etc. ``` -------------------------------- ### Vanilla One-Off Render (Lisse) Source: https://github.com/jacethings/lisse/wiki/Migrating-from-Corner-Smoothing Shows how to achieve a one-off clip-path render with Lisse's generateClipPath function. ```ts // Lisse import { generateClipPath } from "@lisse/core"; const rect = element.getBoundingClientRect(); element.style.clipPath = generateClipPath(rect.width, rect.height, { radius: 24, smoothing: 0.6, }); ``` -------------------------------- ### Middle Border Example Source: https://github.com/jacethings/lisse/wiki/Border-Effects Use middleBorder for classic centered-on-path stroke behavior or for the most efficient rendering, as it requires no clip or mask overhead. ```tsx Content ``` -------------------------------- ### Outer Border Example Source: https://github.com/jacethings/lisse/wiki/Border-Effects Use outerBorder when you want a border that sits entirely outside the element, similar to an outline, leaving the content area unaffected. ```tsx Content ``` -------------------------------- ### React: Using SmoothCorners with autoEffects disabled Source: https://github.com/jacethings/lisse/wiki/FAQ Example of configuring SmoothCorners in React with `autoEffects` set to false, allowing for custom CSS border animations. ```tsx ``` -------------------------------- ### Per-Corner Configuration Options Source: https://github.com/jacethings/lisse/blob/main/docs/configuration.md Demonstrates how to configure individual corners with specific radius, smoothing, and preservation settings. This allows for fine-grained control over the shape of the corners. ```typescript const options = { topLeft: { radius: 40, smoothing: 0.8 }, topRight: 20, bottomRight: { radius: 30, smoothing: 0.4, preserveSmoothing: false }, bottomLeft: 0, }; ``` -------------------------------- ### Vue: useSmoothCorners Composable (with Effects) Source: https://github.com/jacethings/lisse/wiki/Which-API-Should-I-Use Configure effects with the `useSmoothCorners` composable in Vue by providing a wrapper ref and effects configuration. This setup is fully reactive. ```vue ``` -------------------------------- ### Linear Gradient Border Example Source: https://github.com/jacethings/lisse/blob/main/docs/effects.md Applies a linear gradient to the inner border of a SmoothCorners component. Requires specifying the gradient type, angle, and color stops. ```tsx Gradient border ``` -------------------------------- ### Pre-publish Sanity Checks Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Before merging the release PR, run these commands locally to ensure tests pass, type checking is clean, and all packages build successfully. This saves a round-trip with CI. ```bash pnpm test # must be all green pnpm typecheck # must be clean pnpm build # must succeed for all 4 packages ``` -------------------------------- ### Commit Changes and Push Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md After generating the changeset file, add all changes to Git, commit them with a descriptive message, and push to the remote repository. ```bash git add . git commit -m "feat: describe the change" git push ``` -------------------------------- ### Inner Border Example Source: https://github.com/jacethings/lisse/wiki/Border-Effects Use innerBorder when you want a border fully contained within the squircle shape, without increasing the element's visual footprint. ```tsx Content ``` -------------------------------- ### Run Snapshot Tests Source: https://github.com/jacethings/lisse/blob/main/docs/testing.md Use these commands to verify or regenerate snapshot tests. Snapshot tests ensure that the output has not changed unintentionally. ```bash pnpm test -- snapshots # verify ``` ```bash pnpm test -- snapshots -u # regenerate (intentional change) ``` -------------------------------- ### Reactive Radius with useSmoothCorners Source: https://github.com/jacethings/lisse/blob/main/packages/vue/README.md Update the smooth corner radius reactively using a `ref`. This example binds the radius to a range input, allowing dynamic adjustments to the element's shape. ```vue ``` -------------------------------- ### Basic Drop Shadow Configuration Source: https://github.com/jacethings/lisse/wiki/Shadow-Effects Use this configuration for a simple drop shadow with no spread, a moderate blur, and a semi-transparent black color. ```typescript effects: { shadow: { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "#000000", opacity: 0.25, }, } ``` -------------------------------- ### Record Code Changes with Changesets Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Use this command to record code changes for a new release. Select packages and choose the appropriate version bump (patch, minor, or major), then write a summary of the changes. ```bash pnpm changeset # select packages → pick patch / minor / major → write a 1-line summary ``` -------------------------------- ### Explicit Effects Override Auto Effects Source: https://github.com/jacethings/lisse/blob/main/packages/svelte/README.md Explicitly defined `effects` in the `smoothCorners` action configuration take precedence over auto-extracted values. For example, an explicit `innerBorder` will override a CSS border. ```svelte
Content
``` -------------------------------- ### Vanilla One-Off Render (corner-smoothing) Source: https://github.com/jacethings/lisse/wiki/Migrating-from-Corner-Smoothing Demonstrates a one-off render of a squircle shape using corner-smoothing's render function. ```ts // corner-smoothing import { renderSquircle } from "corner-smoothing"; renderSquircle(element, { cornerRadius: 24, cornerSmoothing: 0.6 }); ``` -------------------------------- ### Vanilla JS Card with Smooth Corners Source: https://github.com/jacethings/lisse/wiki/Recipes This snippet shows how to apply smooth, clipped corners to a native HTML article element using @lisse/core. Manual resize observation is included. ```html

Ada Lovelace

Mathematician

``` -------------------------------- ### Radial Gradient Border Example Source: https://github.com/jacethings/lisse/blob/main/docs/effects.md Applies a radial gradient to the outer border of a SmoothCorners component. Allows customization of gradient center, radius, and color stops. Supports dashed border styles. ```tsx Radial gradient dashed border ``` -------------------------------- ### Complex Tailwind Styling with SmoothCorners Source: https://github.com/jacethings/lisse/wiki/Tailwind-Integration An example of applying multiple Tailwind classes, including dark mode, padding, and shadow, to a SmoothCorners component in React. This snippet also demonstrates advanced corner smoothing. ```tsx

Settings

Manage your account preferences.

 ``` -------------------------------- ### React: Implementing Gradient Borders with SmoothCorners Source: https://github.com/jacethings/lisse/wiki/FAQ Demonstrates how to apply gradient borders to SmoothCorners in React by passing a `GradientConfig` object to the `color` property of `innerBorder`. This is necessary because CSS `border-image` cannot be reliably parsed. ```tsx ``` -------------------------------- ### Avoid Self-Upgrading npm on CI Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Manually upgrading npm on a CI runner (e.g., `npm install -g npm@latest`) can fail due to a self-modification race condition. Use a Node version with a sufficiently recent bundled npm instead. ```yaml - run: npm install -g npm@latest ``` ```bash npm error code MODULE_NOT_FOUND npm error Cannot find module 'promise-retry' npm error Require stack: npm error - .../node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/rebuild.js ``` ```bash --ignore-scripts ``` ```bash npm install -g npm@latest --force ``` -------------------------------- ### Running Lisse Tests Source: https://github.com/jacethings/lisse/blob/main/docs/testing.md Commands to execute various test suites for Lisse projects. Use specific project flags to target individual packages. ```bash pnpm test # all projects (core / react / vue / svelte) pnpm test --project=core # one project pnpm coverage # with coverage report (writes coverage/lcov.info) pnpm bench # benchmarks via vitest + CodSpeed plugin pnpm size # bundle-size check (rebuilds dist/ first) pnpm knip # dead-code check pnpm consumer-smoke # pack tarballs, lint, install in fixture, import ``` -------------------------------- ### useSmoothCorners(target, options, effects?) Source: https://github.com/jacethings/lisse/blob/main/docs/api.md Vue composable for applying smooth corners. ```APIDOC ## useSmoothCorners(target, options, effects?) ### Description Vue composable for applying smooth corners. ### Parameters #### Path Parameters - **target** (HTMLElement | Ref) - Required - The target element. - **options** (object) - Required - Configuration options. - **effects** (object) - Optional - Effects to apply. ``` -------------------------------- ### CSS for Pending and Ready States Source: https://github.com/jacethings/lisse/wiki/Styling-Hooks Use these CSS rules to control the visibility of Lisse-managed elements during their initialization and after they are ready. The `pending` state hides the element, preventing flicker, while the `ready` state makes it visible with a transition. ```css [data-slot="smooth-corners"][data-state="pending"] { opacity: 0; } [data-slot="smooth-corners"][data-state="ready"] { opacity: 1; transition: opacity 100ms; } ``` -------------------------------- ### Handle OTP Prompt in Non-Interactive Shells Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Avoid running `pnpm release` from non-interactive shells like CI agents. Use a regular terminal or trusted publishing via GitHub Actions to bypass OTP prompts. ```bash pnpm release ``` -------------------------------- ### Server-side path generation in SvelteKit Source: https://github.com/jacethings/lisse/wiki/SSR-Support Generate SVG clip-paths on the server within a SvelteKit load function. The data is then passed to the page template for rendering. ```ts // src/routes/+page.server.ts import { generateClipPath } from "@lisse/core/path"; export function load() { return { clipPath: generateClipPath(400, 250, { radius: 32, smoothing: 0.6 }), }; } ``` -------------------------------- ### Piecewise Bézier with Circular Arc Construction Source: https://github.com/jacethings/lisse/wiki/Corner-Shapes-Comparison Describes a corner construction using a circular arc at the apex, with two cubic Bézier 'shoulders' for G2 continuity. This is the method used by Apple's CALayer.cornerCurve, Figma, and Lisse. ```mathematics A second construction keeps a small circular arc at the apex of the corner and brackets it with two cubic Bézier "shoulders" that splice the arc onto the straight edges with `G2` (curvature) continuity. The control points sit so curvature is `0` at the join with the straight edge and matches `1/r` at the join with the arc. A single parameter (Figma calls it `smoothing`, denoted `ξ`) controls how far the shoulders extend along the edge before the arc begins. ``` -------------------------------- ### Combining Multiple Border Positions Source: https://github.com/jacethings/lisse/wiki/Border-Effects Demonstrates how to apply inner, middle, and outer borders simultaneously to create complex border effects. ```tsx Content ``` -------------------------------- ### useSmoothCorners(ref, options, effects?) Source: https://github.com/jacethings/lisse/blob/main/docs/api.md React hook for applying smooth corners. ```APIDOC ## useSmoothCorners(ref, options, effects?) ### Description React hook for applying smooth corners. ### Parameters #### Path Parameters - **ref** (React.RefObject) - Required - The ref to the element. - **options** (object) - Required - Configuration options. - **effects** (object) - Optional - Effects to apply. ``` -------------------------------- ### Import Path Generation for SSR Source: https://github.com/jacethings/lisse/blob/main/packages/vue/README.md When working with SSR frameworks like Nuxt, import `generatePath` from `@lisse/core/path` to safely generate paths on the server. ```typescript import { generatePath } from "@lisse/core/path"; ``` -------------------------------- ### createDropShadow(anchor) Source: https://github.com/jacethings/lisse/blob/main/docs/api.md Creates a path-based drop shadow. ```APIDOC ## createDropShadow(anchor) ### Description Create a path-based drop shadow. ### Parameters #### Path Parameters - **anchor** (object) - Required - The anchor element or configuration for the drop shadow. ``` -------------------------------- ### observeResize(element, callback) Source: https://github.com/jacethings/lisse/wiki/API-Reference Observes changes in an element's size using a shared `ResizeObserver`. Callbacks are batched and executed within `requestAnimationFrame` for efficiency. ```APIDOC ## observeResize(element, callback) ### Description Observe element size changes via a shared singleton `ResizeObserver`. Callbacks are batched with `requestAnimationFrame`. ### Parameters - **element** (HTMLElement) - The element to observe for size changes. - **callback** (function) - The function to call when the element's size changes. ### Returns - **function** - A function that can be called to unsubscribe from resize observations. ``` -------------------------------- ### generateClipPath(width, height, options) Source: https://github.com/jacethings/lisse/wiki/API-Reference Returns a CSS `path()` value suitable for use with the `clip-path` CSS property. It generates the path string for clipping elements. ```APIDOC ## generateClipPath(width, height, options) ### Description Returns a CSS `path()` value ready for `el.style.clipPath`. ### Parameters - **width** (number) - The width of the rectangle. - **height** (number) - The height of the rectangle. - **options** (SmoothCornerOptions) - Options for corner rounding and smoothing. ### Returns - **string** - CSS `path("...")` value ``` -------------------------------- ### BorderConfig Interface Source: https://github.com/jacethings/lisse/blob/main/packages/core/README.md Configuration for a border, including width, color (which can be a gradient), opacity, and style. ```typescript interface BorderConfig { width: number; color: string | GradientConfig; opacity: number; style?: BorderStyle; dash?: number; gap?: number; lineCap?: "butt" | "round" | "square"; } ``` -------------------------------- ### Import Core Constants Source: https://github.com/jacethings/lisse/blob/main/packages/core/README.md Imports default values for smoothing, preservation of smoothing, shadow properties, and the SVG namespace from the core library. ```typescript import { DEFAULT_SMOOTHING, DEFAULT_PRESERVE_SMOOTHING, DEFAULT_SHADOW, SVG_NS } from "@lisse/core"; ``` -------------------------------- ### Basic Inner Shadow Configuration Source: https://github.com/jacethings/lisse/wiki/Shadow-Effects Use this snippet to apply a standard inner shadow effect. Ensure the 'color' and 'opacity' properties are set appropriately for your design. ```typescript effects: { innerShadow: { offsetX: 0, offsetY: 2, blur: 4, spread: 0, color: "#000000", opacity: 0.2, }, } ``` -------------------------------- ### Migrating to View Transitions API for Route Changes Source: https://github.com/jacethings/lisse/wiki/Animation-Performance Replaces per-frame animations with browser-driven snapshots for smoother route transitions. Use as a fallback for older browsers. ```tsx // Before: per-frame transform on every clipped card ... // After: single snapshot, browser-driven transition function navigate(nextRoute: string): void { if (!document.startViewTransition) { setRoute(nextRoute); // graceful fallback for older browsers return; } document.startViewTransition(() => setRoute(nextRoute)); } ``` -------------------------------- ### Vanilla JS: `generateClipPath` Function Source: https://github.com/jacethings/lisse/wiki/Getting-Started Generate a CSS clip-path string for an element using `generateClipPath` from the core package. Requires element dimensions and corner options. ```typescript import { generateClipPath } from "@lisse/core"; const element = document.querySelector(".card") as HTMLElement; const { width, height } = element.getBoundingClientRect(); element.style.clipPath = generateClipPath(width, height, { radius: 24, smoothing: 0.6, }); ``` -------------------------------- ### Plain Card with Solid Border using Auto-Effects (Lisse) Source: https://github.com/jacethings/lisse/wiki/Migrating-from-Corner-Smoothing Demonstrates Lisse's auto-effects feature where a CSS border is lifted into SVG for rendering. ```tsx

Hello, squircle

 ``` -------------------------------- ### Svelte: smoothCorners Action Source: https://github.com/jacethings/lisse/wiki/Which-API-Should-I-Use In Svelte, use the `smoothCorners` action for an idiomatic way to attach DOM behavior. This approach introduces no wrapper div or extra component overhead. ```svelte
Content
``` -------------------------------- ### PerCornerConfig Interface Source: https://github.com/jacethings/lisse/blob/main/packages/core/README.md Allows configuration of corner smoothing individually for each corner. ```typescript interface PerCornerConfig { topLeft?: CornerConfig | number; topRight?: CornerConfig | number; bottomRight?: CornerConfig | number; bottomLeft?: CornerConfig | number; } ``` -------------------------------- ### Check Package Availability on npm Registry Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md After publishing a new scoped package, wait 5-15 minutes for registry propagation. The web frontend often shows the package before the API does. ```bash npm view @lisse/core ``` ```bash https://registry.npmjs.org/@lisse/core ``` ```bash https://www.npmjs.com/package/@lisse/core ``` -------------------------------- ### React with Mixed Corner Configurations Source: https://github.com/jacethings/lisse/wiki/Smooth-Corners Combine full corner configuration objects with number shorthands in React for precise control over individual corners, including custom smoothing and preserveSmoothing options. ```tsx // React: top-left is a full squircle, others use defaults Content ``` -------------------------------- ### React with Per-Corner Radii Shorthand Source: https://github.com/jacethings/lisse/wiki/Smooth-Corners Configure different radii for each corner in React using the number shorthand. Default smoothing is applied. ```tsx // React Content ``` -------------------------------- ### Using asChild with SmoothCorners and Tailwind Source: https://github.com/jacethings/lisse/wiki/Tailwind-Integration Shows how to use the `asChild` prop with SmoothCorners in React, allowing Tailwind classes applied to a child element (like a button) to take precedence and be merged onto the child. ```tsx ``` -------------------------------- ### Ensure LICENSE File in Package Tarballs Source: https://github.com/jacethings/lisse/blob/main/docs/publishing.md Copy a LICENSE file into each package's directory to ensure it's included in the tarball. This is a standard monorepo practice and legally required for redistribution. ```bash npm pack ```