@pieai/swimmer-ui-kit 2.13.0 → 2.14.0

package/CHANGELOG.md

@@ -5,7 +5,26 @@ Format: [Keep a Changelog](https://keepachangelog.com); versioning: semver.
 
 ## Unreleased
 
-### 2.13.0 candidate — WO-UI-1
+## 2.14.0 — 2026-10-01
+
+- Fix the stair-stepped top edge on every glossy liquid body: the gloss pass
+  added its light's alpha to the body's, so a half-covered edge pixel turned
+  opaque wherever the highlight was bright. The light is now clipped to the
+  body eroded by a pixel and feathered; the highlight itself is unchanged.
+- Add `LiquidFill`: `LiquidGroup` and `LiquidSurface` take `fill={{ top,
+  bottom?, sheen? }}` for the coloured-liquid light (a narrow brighter band at
+  the top, a deeper foot). Colours may be tokens; bands are CSS `color-mix`.
+- `LiquidSurface` takes `gloss` and `outline={{ amplitude, lobes? }}` to
+  override its form's light and rest lobing.
+- 涟 (`LiquidPresence`, `LiquidReveal` material surface): the face carries its
+  light in the fill (top to foot) and casts a soft contact shadow along its
+  own outline through the new `--game-ui-liquid-presence-shadow` token; the
+  material panel drops its raised rim and stroke. The dark surface is unchanged.
+- Compatibility: additive API; visual change to glossy edges and to 涟's
+  material face. Owner approved publication on 2026-10-01 (University
+  session, "品牌UI包要发布成新版"), with the repository kept to one main line.
+
+## 2.13.0 — 2026-09-29
 
 - Add opt-in `surface="plaque"` to `GameButton`, `GameIconButton` and
   `GameAvatar`, with opaque light/night copper token pairs derived from
@@ -20,8 +39,8 @@ Format: [Keep a Changelog](https://keepachangelog.com); versioning: semver.
   modal-test screenshots to `.devspace-visual/`, preserving retained scratch
   evidence and all existing assertions.
 - Compatibility: additive only; no new dependency or React peer change.
-  This candidate is not published: Owner's private-publication instruction
-  needs clarification before using this repository's public npm workflow.
+  Published through the existing npm Trusted Publishing workflow after
+  Owner clarified public publication (AuthKit remains private).
 
 ## 2.12.0 — 2026-09-29
 

package/README.md

@@ -57,7 +57,7 @@ import '@pieai/swimmer-ui-kit/tailwind.css';
 
 ## What's inside
 
-- **Account primitives (2.13.0 local candidate, not published)**:
+- **Account primitives (2.13.0)**:
   opt-in copper `surface="plaque"`, `GameOtpInput`, vertical `GameTabs`,
   and `GameListRow` with independent actions. See the
   [account-controls contract](docs/reference/design-system-guide.md#账号界面原件)

package/dist/index.d.ts

@@ -2556,6 +2556,45 @@ export declare const LIQUID_FORMS: Readonly<Record<LiquidForm, LiquidFormSpec>>;
  */
 export declare const LIQUID_GOOEY_WAVINESS_MAX_FRACTION = 0.3;
 
+/**
+ * A shared liquid silhouette behind crisp item content.
+ *
+ * Put the visual treatment on the group: `fill`, `stroke`, and `shadow` are
+ * rebuilt on the merged silhouette. Do NOT add border, outline, or box-shadow
+ * to children directly; those styles live on the content layer and cannot
+ * merge with the liquid shape.
+ *
+ * Its motion vocabulary is intentionally small and semantic:
+ *
+ * | gesture | meaning |
+ * | --- | --- |
+ * | **merge** (Morph) | two things become one: reward settling, collecting, confirming |
+ * | **follow** (Move) | selection, progress, dragging |
+ * | **shape** (Morph shape) | the liquid changes size and corners like jelly |
+ * | **bend** | speed bows the surface while content stays glued to it |
+ * | **dissolve** | replacement, transition |
+ * | **still** | THE DEFAULT |
+ *
+ * Liquid appears only on a state change the user caused. There is no ambient,
+ * idle, or decorative liquid; keep the filter-area budget visible when more
+ * than one group is on a screen.
+ */
+/**
+ * A liquid body's paint.
+ *
+ * A colour paints the body flat. `{ top, bottom }` is the light the coloured
+ * liquid theme settled on (University, 2026-09-30): a narrow brighter band at
+ * the top, the colour falling from `top` to `bottom`, and the foot a touch
+ * deeper, so a body reads as having thickness without a white rim. `sheen` is
+ * how far the top band leans to white (0–1, default 0.3). Colours may be tokens:
+ * the bands are mixed with CSS `color-mix`, not computed here.
+ */
+export declare type LiquidFill = string | {
+    readonly top: string;
+    readonly bottom?: string;
+    readonly sheen?: number;
+};
+
 /** Material is independent of a widget's meaning and a form's motion. */
 export declare type LiquidFinish = 'matte' | 'glossy';
 
@@ -2703,29 +2742,6 @@ export declare const LiquidGroup: ForwardRefExoticComponent<LiquidGroupProps & R
     Item: ForwardRefExoticComponent<LiquidItemProps & RefAttributes<HTMLDivElement>>;
 };
 
-/**
- * A shared liquid silhouette behind crisp item content.
- *
- * Put the visual treatment on the group: `fill`, `stroke`, and `shadow` are
- * rebuilt on the merged silhouette. Do NOT add border, outline, or box-shadow
- * to children directly; those styles live on the content layer and cannot
- * merge with the liquid shape.
- *
- * Its motion vocabulary is intentionally small and semantic:
- *
- * | gesture | meaning |
- * | --- | --- |
- * | **merge** (Morph) | two things become one: reward settling, collecting, confirming |
- * | **follow** (Move) | selection, progress, dragging |
- * | **shape** (Morph shape) | the liquid changes size and corners like jelly |
- * | **bend** | speed bows the surface while content stays glued to it |
- * | **dissolve** | replacement, transition |
- * | **still** | THE DEFAULT |
- *
- * Liquid appears only on a state change the user caused. There is no ambient,
- * idle, or decorative liquid; keep the filter-area budget visible when more
- * than one group is on a screen.
- */
 export declare interface LiquidGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     children: ReactNode;
     /** Goo blur sigma in px. Larger values bridge larger gaps. */
@@ -2739,8 +2755,11 @@ export declare interface LiquidGroupProps extends Omit<HTMLAttributes<HTMLDivEle
     gloss?: number;
     /** Optional named finish. An explicit raw gloss wins; omitted preserves the old rendering. */
     liquidFinish?: LiquidFinish;
-    /** Surface fill. Defaults to the kit's theme surface token. */
-    fill?: string;
+    /**
+     * Surface fill. Defaults to the kit's theme surface token. A colour paints
+     * the body flat; `{ top, bottom }` gives it light (see `LiquidFill`).
+     */
+    fill?: LiquidFill;
     /** Extra filter-region slack in px for the silhouette's painted edges. */
     filterPadding?: number;
     /** Optional token-based box-shadow syntax rebuilt on the merged silhouette. */
@@ -2831,7 +2850,7 @@ export declare interface LiquidMetalButtonProps extends ButtonHTMLAttributes<HTM
 
 export declare type LiquidMetalRendererMode = 'auto' | 'css' | 'webgl';
 
-export declare function LiquidSurface({ children, liquidFinish, form, active, fill, stroke, shadow: shadowOverride, radius, className, style, }: LiquidSurfaceProps): ReactNode;
+export declare function LiquidSurface({ children, liquidFinish, form, active, fill, stroke, shadow: shadowOverride, gloss: glossOverride, outline, radius, className, style, }: LiquidSurfaceProps): ReactNode;
 
 export declare interface LiquidSurfaceProps {
     children: ReactNode;
@@ -2845,7 +2864,20 @@ export declare interface LiquidSurfaceProps {
      */
     active?: boolean;
     /** Silhouette paint. Defaults to the kit's raised surface token. */
-    fill?: string;
+    fill?: LiquidFill;
+    /**
+     * The body's light, overriding the form's own. The coloured liquid theme
+     * uses a low value; with `liquidFinish="matte"` omitted, 0 means flat.
+     */
+    gloss?: number;
+    /**
+     * The rest outline's lobing, overriding the form's own: `amplitude` in px
+     * swells outward, `lobes` is how many go round (2 lazy, 5 busy).
+     */
+    outline?: {
+        readonly amplitude: number;
+        readonly lobes?: number;
+    };
     stroke?: string;
     /** Overrides the form's own cast shadow. `none` removes it. */
     shadow?: string;