feat: export pill shape defaults, and shape controls on the pill demos

README.md

@@ -474,7 +474,7 @@ import { registerPillWorklet } from "@klinking/squircle/pill-worklet";
 registerPillWorklet();
 ```
 
-The helper loads the worklet shipped next to it and, once it is in, marks `<html>` with `data-squircle-pill-worklet`. That mark is what switches pills from their `rounded-full` fallback to the drawn shape — `@supports (mask-image: paint(pill-shape))` is true whether or not a worklet by that name ever loaded, so gating on it alone would erase every pill the moment the file failed to load. Where paint worklets are unsupported it resolves to `false` and nothing changes; a load that fails rejects, so the error shows up in the console rather than as blank buttons.
+The helper loads the worklet shipped next to it and, once it is in, marks `<html>` with `data-squircle-pill-worklet`. That mark is what switches pills from their `rounded-full` fallback to the drawn shape — `@supports (mask-image: paint(pill-shape))` is true whether or not a worklet by that name ever loaded, so gating on it alone would erase every pill the moment the file failed to load. Where paint worklets are unsupported it resolves to `false` and nothing changes; a load that fails rejects, so the error shows up in the console rather than as blank buttons. The same module exports `PILL_SHAPE_PROPERTIES`, each shape setting's custom property name and default, for scripts that set or show them.
 
 The default locates the worklet with `new URL("./pill-shape.worklet.mjs", import.meta.url)`, which Vite, webpack 5 and Parcel all turn into an emitted asset. If your bundler doesn't, or you serve the file yourself, pass its URL:
 

package/src/pill-worklet.ts

@@ -3,10 +3,31 @@
  * https://squircle.klink.ing/ · https://github.com/klink-ing/squircle
  */
 
-import { PILL_WORKLET_ATTRIBUTE } from "./variants";
+import {
+  DEFAULT_PILL_AMT,
+  DEFAULT_PILL_CONTINUITY,
+  DEFAULT_PILL_EASE,
+  PILL_AMT_VAR_NAME,
+  PILL_CONTINUITY_VAR_NAME,
+  PILL_EASE_VAR_NAME,
+  PILL_WORKLET_ATTRIBUTE,
+} from "./variants";
 
 export { PILL_WORKLET_ATTRIBUTE };
 
+/**
+ * The pill's shape settings — the custom properties `squircle-pill-amt-*`,
+ * `squircle-pill-ease-*` and `squircle-pill-g2`/`-g3` set — and the values
+ * they start at, for scripts that set or show them: a settings panel, a
+ * preview. The same constants the stylesheet's registrations and the
+ * worklet's own fallbacks come from, so they never disagree.
+ */
+export const PILL_SHAPE_PROPERTIES = {
+  amt: { name: PILL_AMT_VAR_NAME, default: DEFAULT_PILL_AMT },
+  ease: { name: PILL_EASE_VAR_NAME, default: DEFAULT_PILL_EASE },
+  continuity: { name: PILL_CONTINUITY_VAR_NAME, default: DEFAULT_PILL_CONTINUITY },
+} as const;
+
 /**
  * Loads the pill-shape paint worklet and, once it is in, marks the document so
  * the pill styles switch from their stadium fallback to the drawn shape.

website/src/components/Layout.astro

@@ -14,12 +14,8 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <script>
-      import { registerPillWorklet } from "@klinking/squircle/pill-worklet";
-      // Vite serves the worklet as a hashed asset, so hand its URL over
-      // rather than relying on the helper's default sibling lookup.
-      import workletUrl from "@klinking/squircle/pill-shape.worklet.js?url";
-
-      registerPillWorklet(workletUrl);
+      // The worklet where the browser has one, the polyfill where it doesn't.
+      import "../lib/pills";
     </script>
   </head>
   <body class="min-h-screen bg-zinc-950 text-zinc-100">