@duskmoon-dev/art-components 0.5.2 → 0.5.3

package/README.md

@@ -68,6 +68,59 @@ and `ArtSun` also accept `size="xl"`. Components forward refs to their root
 element, accept `className`, `style`, and DuskMoon CSS custom properties through
 `style`.
 
+## CSS and browser contracts
+
+The wrappers supply the HTML required by CSS Art 1.20.7. They do not add
+JavaScript animation engines or browser polyfills. CSS art uses modern CSS;
+check feature support in your supported browsers, especially the following:
+
+- `ArtCircularGallery` uses CSS Motion Path, `:has()`, `@property`, and CSS
+  Anchor Positioning. The upstream design has 20 items indexed 1–20; smaller
+  arrays remain supported but occupy only part of that arc. An item opens its
+  native hash-target preview when its `href` is omitted or points to its own
+  ID. A custom `href` performs ordinary link navigation. The published CSS sets
+  card width to `0.09 * --art-circular-gallery-size` (the upstream docs token
+  table's `0.07` differs from the shipped stylesheet). CSS Art 1.20.7 fixes
+  native preview centering ([duskmoonui#77](https://github.com/duskmoon-dev/duskmoonui/issues/77));
+  upgrade the CSS dependency to receive that fix. The wrapper uses upstream
+  positioning without a local override.
+- `ArtCsswitch` changes its layout at viewport widths 1010, 670, 460, and 360px.
+  These are viewport breakpoints, independent of the `size` prop. Its native
+  buttons provide press feedback; app actions are consumer-owned.
+- `ArtSnowballPreloader` requires `--art-snowball-preloader-bg` to match the
+  surrounding background so its track mask blends in. Upstream documents
+  relative-color support as Chrome 119+, Firefox 128+, or Safari 16.4+; verify
+  the features in your actual browser. Its snow texture loads from the URL in
+  upstream CSS. It is decorative by default; add a separate status message
+  when announcing loading.
+- `ArtGeminiInput` uses `field-sizing: content` for multiline growth and
+  `@property`, gradients, and masks for its border. It defaults to `rows={1}`;
+  callers can set `rows` explicitly. Give the textarea an accessible name with
+  `textareaProps={{ "aria-label": "Message" }}` or an associated `<label>`.
+  The Add and Send buttons have no default application action. Set
+  `afterButtonProps={{ type: "submit" }}` to submit a surrounding form, or
+  provide button callbacks. `disabled` disables the textarea and both actions.
+
+```tsx
+<ArtSnowballPreloader
+  style={{ "--art-snowball-preloader-bg": "#101827" }}
+/>
+<ArtGeminiInput
+  placeholder="Write a message"
+  textareaProps={{ "aria-label": "Message" }}
+  afterButtonProps={{ type: "submit" }}
+/>
+```
+
+Animation customization stays in CSS. Moon glow, Sun rays/pulse, Atom orbits,
+Eclipse layers, Mountain aurora, falling Snowflake, Cat blinking, Flower garden
+growth, ColorSpin rings, and Snowball orbit have no additional React activation
+API. `ArtSynthwaveStarfield paused` freezes the upstream scene animations.
+`ArtPlasmaBall` provides native checkbox state through `checked`,
+`defaultChecked`, `onCheckedChange`, and `inputProps`; use
+`inputProps={{ disabled: true }}` to prevent activation. Its checkbox precedes
+the glass ball so upstream checked/hover selectors remain effective.
+
 ## Development
 
 ```bash

package/dist/index.js

@@ -115,7 +115,7 @@ function PlasmaRay({ bigwave = false }) {
     children: [
       /* @__PURE__ */ jsx("span", {}),
       /* @__PURE__ */ jsx("span", {}),
-      /* @__PURE__ */ jsx("span", {})
+      !bigwave && /* @__PURE__ */ jsx("span", {})
     ]
   });
 }
@@ -124,7 +124,7 @@ function PlasmaRays({ group }) {
   return /* @__PURE__ */ jsx("div", {
     className: "rays",
     children: Array.from({ length: rayCount }, (_, index) => /* @__PURE__ */ jsx(PlasmaRay, {
-      bigwave: group >= 4 || index % 2 === 1
+      bigwave: group < 4 && index % 2 === 1
     }, index))
   });
 }
@@ -249,17 +249,17 @@ var ArtCatStargazer = forwardRef(({ size = "default", decorative, className, ...
       className: "cat",
       children: [
         /* @__PURE__ */ jsx("div", {
-          className: "bubble"
+          className: "tail"
         }),
         /* @__PURE__ */ jsx("div", {
           className: "backpack"
         }),
-        /* @__PURE__ */ jsx("div", {
-          className: "tail"
-        }),
         /* @__PURE__ */ jsxs("div", {
           className: "body",
           children: [
+            /* @__PURE__ */ jsx("div", {
+              className: "leg"
+            }),
             /* @__PURE__ */ jsx("div", {
               className: "leg"
             }),
@@ -284,15 +284,18 @@ var ArtCatStargazer = forwardRef(({ size = "default", decorative, className, ...
               className: "whisker"
             }, index)),
             /* @__PURE__ */ jsx("div", {
-              className: "nose"
+              className: "eye"
             }),
             /* @__PURE__ */ jsx("div", {
               className: "eye"
             }),
             /* @__PURE__ */ jsx("div", {
-              className: "eye"
+              className: "nose"
             })
           ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "bubble"
         })
       ]
     })
@@ -346,26 +349,51 @@ function FlowerGrass({ index }) {
     ]
   });
 }
+var grassGrowthDelays = [
+  [3, 2.2, 3.4, 3.6],
+  [3.6, 3.8, 4, 4.2],
+  [4, 4.2, 4.4, 4.6],
+  [4, 4.2, 3, 3.6],
+  [4, 4.2, 3, 3.6],
+  [4, 4.2, 3, 3.6],
+  [4.2, 4.4, 4.6, 4.8],
+  [3, 3.2, 3.5, 3.6]
+];
+function GrowingArt({
+  delay,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: "grow-ans",
+    style: { "--d": `${delay}s` },
+    children
+  });
+}
 function LongGrass({ index }) {
   return /* @__PURE__ */ jsx("div", {
     className: cn("long-g", `long-g--${index}`),
-    children: Array.from({ length: 4 }, (_, leafIndex) => /* @__PURE__ */ jsx("div", {
-      className: cn("leaf", `leaf--${leafIndex}`)
+    children: grassGrowthDelays[index].map((delay, leafIndex) => /* @__PURE__ */ jsx(GrowingArt, {
+      delay,
+      children: /* @__PURE__ */ jsx("div", {
+        className: cn("leaf", `leaf--${leafIndex}`)
+      })
     }, leafIndex))
   });
 }
 function FrontGrass() {
-  return /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: "flower__g-front",
-    children: /* @__PURE__ */ jsx("div", {
-      className: "flower__g-front__line",
-      children: Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
+    children: [
+      Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
         className: cn("flower__g-front__leaf-wrapper", `flower__g-front__leaf-wrapper--${index + 1}`),
         children: /* @__PURE__ */ jsx("div", {
           className: "flower__g-front__leaf"
         })
-      }, index))
-    })
+      }, index)),
+      /* @__PURE__ */ jsx("div", {
+        className: "flower__g-front__line"
+      })
+    ]
   });
 }
 function FrontRightGrass() {
@@ -418,50 +446,66 @@ var ArtFlowerAnimation = forwardRef(({ size = "default", decorative, className,
         /* @__PURE__ */ jsx(Flower, {
           index: 4
         }),
-        /* @__PURE__ */ jsxs("div", {
-          className: "growing-grass",
-          children: [
-            /* @__PURE__ */ jsx(FlowerGrass, {
-              index: 1
-            }),
-            /* @__PURE__ */ jsx(FlowerGrass, {
-              index: 2
-            })
-          ]
+        /* @__PURE__ */ jsx(GrowingArt, {
+          delay: 1.2,
+          children: /* @__PURE__ */ jsxs("div", {
+            className: "flower__g-long",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                className: "flower__g-long__top"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: "flower__g-long__bottom"
+              })
+            ]
+          })
         }),
-        /* @__PURE__ */ jsxs("div", {
-          className: "flower__g-long",
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: "flower__g-long__top"
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "flower__g-long__bottom"
-            })
-          ]
+        /* @__PURE__ */ jsx("div", {
+          className: "growing-grass",
+          children: /* @__PURE__ */ jsx(FlowerGrass, {
+            index: 1
+          })
         }),
         /* @__PURE__ */ jsx("div", {
-          className: "flower__g-right flower__g-right--1",
+          className: "growing-grass",
+          children: /* @__PURE__ */ jsx(FlowerGrass, {
+            index: 2
+          })
+        }),
+        /* @__PURE__ */ jsx(GrowingArt, {
+          delay: 2.4,
           children: /* @__PURE__ */ jsx("div", {
-            className: "leaf"
+            className: "flower__g-right flower__g-right--1",
+            children: /* @__PURE__ */ jsx("div", {
+              className: "leaf"
+            })
           })
         }),
-        /* @__PURE__ */ jsx("div", {
-          className: "flower__g-right flower__g-right--2",
+        /* @__PURE__ */ jsx(GrowingArt, {
+          delay: 2.8,
           children: /* @__PURE__ */ jsx("div", {
-            className: "leaf"
+            className: "flower__g-right flower__g-right--2",
+            children: /* @__PURE__ */ jsx("div", {
+              className: "leaf"
+            })
           })
         }),
-        /* @__PURE__ */ jsx(FrontGrass, {}),
-        /* @__PURE__ */ jsx(FrontRightGrass, {}),
-        Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx(LongGrass, {
-          index: index + 1
-        }, index)),
-        /* @__PURE__ */ jsx("div", {
-          className: "bubbles",
-          children: Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ jsx(Bubble, {}, index))
-        })
+        /* @__PURE__ */ jsx(GrowingArt, {
+          delay: 2.8,
+          children: /* @__PURE__ */ jsx(FrontGrass, {})
+        }),
+        /* @__PURE__ */ jsx(GrowingArt, {
+          delay: 3.2,
+          children: /* @__PURE__ */ jsx(FrontRightGrass, {})
+        }),
+        grassGrowthDelays.map((_, index) => /* @__PURE__ */ jsx(LongGrass, {
+          index
+        }, index))
       ]
+    }),
+    /* @__PURE__ */ jsx("div", {
+      className: "bubbles",
+      children: Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ jsx(Bubble, {}, index))
     })
   ]
 }));
@@ -485,10 +529,10 @@ var ArtSynthwaveStarfield = forwardRef(({ size = "default", paused = false, deco
   ...props,
   children: [
     /* @__PURE__ */ jsx("div", {
-      className: "art-synthwave-starfield-sides art-synthwave-starfield-lefrig"
+      className: "art-synthwave-starfield-sides art-synthwave-starfield-topbot"
     }),
     /* @__PURE__ */ jsx("div", {
-      className: "art-synthwave-starfield-sides art-synthwave-starfield-topbot"
+      className: "art-synthwave-starfield-sides art-synthwave-starfield-lefrig"
     }),
     /* @__PURE__ */ jsx("div", {
       className: "art-synthwave-starfield-stars"
@@ -519,6 +563,9 @@ function SwitchBar({
   return /* @__PURE__ */ jsxs("div", {
     className: "bar",
     children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "cord"
+      }),
       /* @__PURE__ */ jsx(SwitchButton, {
         className: "sub-lr",
         label: `${side} SL`,
@@ -529,46 +576,55 @@ function SwitchBar({
         label: `${side} SR`,
         hidden
       }),
-      /* @__PURE__ */ jsx("span", {
-        className: "minus-sign"
-      }),
-      /* @__PURE__ */ jsx("span", {
+      /* @__PURE__ */ jsx("div", {
         className: "peripheral"
       }),
-      /* @__PURE__ */ jsx("span", {
-        className: "cord"
+      /* @__PURE__ */ jsx("div", {
+        className: "minus-sign"
       })
     ]
   });
 }
-function SwitchConnector() {
+function SwitchConnector({
+  side,
+  hidden
+}) {
   return /* @__PURE__ */ jsxs("div", {
     className: "connector",
     children: [
-      /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ jsx(SwitchButton, {
         className: "con-lr",
-        children: /* @__PURE__ */ jsx("div", {
-          className: "con-part"
-        })
+        label: `${side} connector L`,
+        hidden
       }),
-      /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ jsx(SwitchButton, {
         className: "con-rr",
-        children: /* @__PURE__ */ jsx("div", {
-          className: "con-part"
-        })
+        label: `${side} connector R`,
+        hidden
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "con-part"
       })
     ]
   });
 }
 function LeftJoycon({ hidden }) {
   return /* @__PURE__ */ jsxs("div", {
-    className: "controller",
+    className: "controller left",
     children: [
       /* @__PURE__ */ jsx(SwitchBar, {
         side: "Left",
         hidden
       }),
-      /* @__PURE__ */ jsx(SwitchConnector, {}),
+      /* @__PURE__ */ jsx(SwitchConnector, {
+        side: "Left",
+        hidden
+      }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "lr",
+        label: "L",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchButton, {
         className: "minus",
         label: "Minus",
@@ -584,11 +640,6 @@ function LeftJoycon({ hidden }) {
         label: "Up",
         hidden
       }),
-      /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction arrow down round",
-        label: "Down",
-        hidden
-      }),
       /* @__PURE__ */ jsx(SwitchButton, {
         className: "direction arrow left round",
         label: "Left",
@@ -599,6 +650,11 @@ function LeftJoycon({ hidden }) {
         label: "Right",
         hidden
       }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "direction arrow down round",
+        label: "Down",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchButton, {
         className: "menu",
         label: "Capture",
@@ -615,37 +671,45 @@ function RightJoycon({ hidden }) {
         side: "Right",
         hidden
       }),
-      /* @__PURE__ */ jsx(SwitchConnector, {}),
+      /* @__PURE__ */ jsx(SwitchConnector, {
+        side: "Right",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "minus plus",
-        label: "Plus",
+        className: "lr rr",
+        label: "R",
         hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "mushroom round",
-        label: "Right stick",
+        className: "minus plus",
+        label: "Plus",
         hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction x round",
+        className: "direction up x round",
         label: "X",
         hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction y round",
+        className: "direction left y round",
         label: "Y",
         hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction a round",
+        className: "direction right a round",
         label: "A",
         hidden
       }),
       /* @__PURE__ */ jsx(SwitchButton, {
-        className: "direction b round",
+        className: "direction down b round",
         label: "B",
         hidden
       }),
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "mushroom round",
+        label: "Right stick",
+        hidden
+      }),
       /* @__PURE__ */ jsx(SwitchButton, {
         className: "home round",
         label: "Home",
@@ -654,24 +718,20 @@ function RightJoycon({ hidden }) {
     ]
   });
 }
-function SwitchBody() {
+function SwitchBody({ hidden }) {
   return /* @__PURE__ */ jsxs("div", {
     className: "body",
     children: [
-      /* @__PURE__ */ jsx("div", {
-        className: "frame",
-        children: /* @__PURE__ */ jsx("div", {
-          className: "screen"
-        })
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "lr"
+      /* @__PURE__ */ jsx(SwitchButton, {
+        className: "volume",
+        label: "Volume",
+        hidden
       }),
       /* @__PURE__ */ jsx("div", {
-        className: "lr rr"
+        className: "frame"
       }),
       /* @__PURE__ */ jsx("div", {
-        className: "volume"
+        className: "screen"
       })
     ]
   });
@@ -687,33 +747,38 @@ function ComfortGrip() {
         className: "grip right"
       }),
       /* @__PURE__ */ jsx("div", {
-        className: "holder",
-        children: /* @__PURE__ */ jsxs("div", {
-          className: "main-frame",
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: "logo"
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "logo right"
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "nintendo",
-              children: "NINTENDO"
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: "switch",
-              children: "SWITCH"
-            }),
-            Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
-              className: "light"
-            }, index))
-          ]
-        })
+        className: "holder"
       })
     ]
   });
 }
+function ComfortGripBack() {
+  return /* @__PURE__ */ jsx("div", {
+    className: "comfort-grip",
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "main-frame",
+      children: [
+        Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx("div", {
+          className: "light"
+        }, index)),
+        /* @__PURE__ */ jsx("div", {
+          className: "logo"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "logo right"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "nintendo",
+          children: "NINTENDO"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "switch",
+          children: "SWITCH"
+        })
+      ]
+    })
+  });
+}
 var ArtCsswitch = forwardRef(({ size = "default", decorative = false, className, ...props }, ref) => {
   const decorativeProps = getDecorativeProps(decorative, props);
   const rootAriaHidden = props["aria-hidden"] ?? ("aria-hidden" in decorativeProps ? decorativeProps["aria-hidden"] : undefined);
@@ -724,14 +789,17 @@ var ArtCsswitch = forwardRef(({ size = "default", decorative = false, className,
     ...decorativeProps,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SwitchBody, {}),
       /* @__PURE__ */ jsx(ComfortGrip, {}),
       /* @__PURE__ */ jsx(LeftJoycon, {
         hidden: controlsAreHidden
       }),
       /* @__PURE__ */ jsx(RightJoycon, {
         hidden: controlsAreHidden
-      })
+      }),
+      /* @__PURE__ */ jsx(SwitchBody, {
+        hidden: controlsAreHidden
+      }),
+      /* @__PURE__ */ jsx(ComfortGripBack, {})
     ]
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/art-components",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "React components for @duskmoon-dev/css-art pure CSS illustrations",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@duskmoon-dev/css-art": "1.20.5",
+    "@duskmoon-dev/css-art": "1.20.7",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",