@pieai/swimmer-ui-kit 2.14.0 → 3.0.0-rc.1

package/dist/liquid-presence.css

@@ -1 +1 @@
-@layer swimmer-ui{.game-ui-button[data-game-ui-control=liquid-presence]{box-shadow:none;color:inherit;background:0 0;border:0;border-radius:50%;padding:0}.game-ui-button[data-game-ui-control=liquid-presence]:is(:hover,:active){transform:translate(0,0)scale(1)}:root{--game-ui-assistance-z:96;--game-ui-liquid-reveal-bg:#050c0df0;--game-ui-liquid-reveal-solid:#101718;--game-ui-liquid-reveal-text:#f2f7f4;--game-ui-liquid-reveal-muted:#b6c7c0;--game-ui-liquid-reveal-shadow:0 22px 70px #00000038;--game-ui-liquid-reveal-backdrop:#0000003d;--game-ui-liquid-presence-shadow:drop-shadow(0 6px 14px #143c3c2e);--game-ui-liquid-action-face:#fff8ec;--game-ui-liquid-action-ink:#403127;--game-ui-liquid-action-lip:#ae9e87;--game-ui-liquid-action-border:#dccdb9;--game-ui-liquid-field-face:#0000003d;--game-ui-liquid-material-ink:#020a08;--game-ui-liquid-material-muted:#020a08;--game-ui-liquid-material-field:#104a41;--game-ui-liquid-field-ink:#f2f7f4}.game-ui-liquid-reveal .game-ui-button--secondary{background:var(--game-ui-liquid-action-face);color:var(--game-ui-liquid-action-ink);border:1px solid var(--game-ui-liquid-action-border);--game-ui-button-lip-ink:var(--game-ui-liquid-action-lip);--game-ui-shadow-button:inset 0 1px 0 color-mix(in srgb, var(--game-ui-liquid-action-face) 90%, transparent)}.game-ui-liquid-reveal .game-ui-button:disabled{opacity:.55}.game-ui-liquid-reveal .game-ui-button--ghost{color:var(--game-ui-liquid-reveal-muted)}.game-ui-liquid-reveal{isolation:isolate;min-width:0;color:var(--game-ui-liquid-reveal-text);font-family:var(--game-ui-font-body);border-radius:32px;position:relative}.game-ui-liquid-reveal:before{content:"";z-index:-1;background:var(--game-ui-liquid-reveal-bg);backdrop-filter:blur(8px);box-shadow:var(--game-ui-liquid-reveal-shadow);pointer-events:none;border-radius:27px;position:absolute;inset:6px}.game-ui-liquid-reveal-content{z-index:1;min-width:0;padding:12px;position:relative}.game-ui-liquid-reveal[data-reveal-surface=material]{--game-ui-liquid-reveal-text:var(--game-ui-liquid-material-ink);--game-ui-liquid-reveal-muted:var(--game-ui-liquid-material-muted);--game-ui-liquid-field-face:var(--game-ui-liquid-material-field)}.game-ui-liquid-reveal[data-reveal-surface=material]:before{backdrop-filter:none;box-shadow:none;background:0 0}.game-ui-liquid-reveal[data-reveal-surface=material] .game-ui-liquid-reveal-ink{filter:var(--game-ui-liquid-presence-shadow)}.game-ui-liquid-reveal[data-reveal-surface=material][data-reveal-motion=preparing] .game-ui-liquid-reveal-content,.game-ui-liquid-reveal[data-reveal-surface=material][data-reveal-motion=preparing] .game-ui-liquid-reveal-ink{opacity:0}.game-ui-liquid-reveal[data-reveal-surface=material]:is([data-reveal-motion=preparing],[data-reveal-motion=drawing]):before{box-shadow:none}.game-ui-liquid-reveal[data-reveal-filter=flat]:before{backdrop-filter:none;background:var(--game-ui-liquid-reveal-solid)}.game-ui-liquid-reveal-ink{pointer-events:none;position:absolute;inset:0;overflow:visible}.game-ui-liquid-reveal[data-reveal-variant=input]{border-radius:36px}.game-ui-liquid-reveal[data-reveal-variant=input]:before{border-radius:30px}@media (forced-colors:active){.game-ui-liquid-reveal{color:canvastext;border:2px solid canvastext}.game-ui-liquid-reveal:before{box-shadow:none;backdrop-filter:none;background:canvas}.game-ui-liquid-reveal[data-reveal-surface=material]{--game-ui-liquid-reveal-text:CanvasText;--game-ui-liquid-reveal-muted:CanvasText;--game-ui-liquid-field-ink:CanvasText;--game-ui-liquid-field-face:Canvas}.game-ui-liquid-reveal[data-reveal-surface=material]:before{background:canvas}.game-ui-liquid-reveal-ink{display:none}}.game-ui-liquid-presence{--liquid-presence-from:var(--game-ui-secondary);--liquid-presence-to:var(--game-ui-secondary);vertical-align:middle;pointer-events:none;color:var(--game-ui-secondary);flex:none;line-height:0;display:inline-block;position:relative}.game-ui-liquid-presence>svg{width:100%;height:100%;filter:var(--game-ui-liquid-presence-shadow);display:block;overflow:visible}.game-ui-liquid-presence[data-activity=disabled]{opacity:.5}.game-ui-liquid-presence[data-activity=error],.game-ui-liquid-presence[data-activity=unknown]{--liquid-presence-from:var(--game-ui-warning);--liquid-presence-to:var(--game-ui-warning)}.game-ui-liquid-presence-overlay{z-index:95;pointer-events:none;color:var(--game-ui-secondary);position:fixed;inset:0;overflow:visible}.game-ui-liquid-presence-overlay>[hidden]{display:none!important}.game-ui-liquid-presence-flight,.game-ui-liquid-presence-seat{transform-origin:50%;position:absolute;top:0;left:0;overflow:visible}.game-ui-liquid-presence-flight{width:96px;height:72px}.game-ui-liquid-presence-seat{width:112px;height:56px}.game-ui-liquid-presence-label{box-sizing:border-box;border-radius:var(--game-ui-radius-control,12px);background:var(--game-ui-panel-strong);width:max-content;max-width:min(260px,100vw - 32px);color:var(--game-ui-text);box-shadow:var(--game-ui-shadow-button);font:500 13px/1.5 var(--game-ui-font-body);overflow-wrap:anywhere;text-wrap:pretty;padding:9px 14px;position:absolute;top:0;left:0}.game-ui-liquid-presence-label--guide{overscroll-behavior:contain;pointer-events:auto;text-wrap:wrap;border-radius:16px;width:300px;max-width:calc(100vw - 32px);max-height:min(300px,42dvh);padding:16px;overflow:auto}.game-ui-liquid-presence-label--expanded{flex-direction:column;width:420px;max-height:min(560px,65dvh);display:flex}@media (prefers-reduced-motion:reduce){.game-ui-liquid-presence-flight{display:none}}@media (forced-colors:active){.game-ui-liquid-presence svg g,.game-ui-liquid-presence-overlay svg g,.game-ui-liquid-presence-overlay svg path{filter:none;fill:highlight}.game-ui-liquid-presence-label{color:canvastext;box-shadow:none;background:canvas;border:1px solid canvastext}}.game-ui-liquid-anchor{z-index:var(--game-ui-assistance-z,95);width:max-content}}
+@layer swimmer-ui{.game-ui-liquid-popover{width:min(var(--game-ui-popover-width,440px), calc(100vw - 24px));min-width:0;max-width:100%}.game-ui-liquid-popover-content{box-sizing:border-box;max-height:min(calc(100dvh - 48px), calc(var(--liquid-outlet-height,100dvh) - 24px));overscroll-behavior:contain;padding:8px;overflow:auto}.game-ui-liquid-popover-content>h2{font:700 20px/1.4 var(--game-ui-font-display);outline-offset:2px;margin:0 0 12px}@media (width<=767px){.game-ui-liquid-popover{width:calc(100vw - 24px)}}.game-ui-button[data-game-ui-control=liquid-presence]{border-radius:50%;padding:0}.game-ui-liquid-reveal{isolation:isolate;min-width:0;color:var(--game-ui-cta-text);font-family:var(--game-ui-font-body);--game-ui-liquid-reveal-text:var(--game-ui-cta-text);--game-ui-liquid-reveal-muted:var(--game-ui-cta-text);border-radius:32px;position:relative}.game-ui-liquid-reveal-content{z-index:1;min-width:0;padding:12px;position:relative}.game-ui-liquid-reveal[data-reveal-motion=preparing] .game-ui-liquid-reveal-content,.game-ui-liquid-reveal[data-reveal-motion=preparing] .game-ui-liquid-reveal-ink{opacity:0}.game-ui-liquid-reveal-ink{pointer-events:none;filter:var(--game-ui-liquid-presence-shadow);position:absolute;inset:0;overflow:visible}.game-ui-liquid-reveal[data-reveal-variant=input]{border-radius:36px}@media (forced-colors:active){.game-ui-liquid-reveal{color:var(--game-ui-cta-text);--game-ui-liquid-reveal-text:var(--game-ui-cta-text);--game-ui-liquid-reveal-muted:var(--game-ui-cta-text);border:2px solid canvastext}.game-ui-liquid-reveal-ink{filter:var(--game-ui-liquid-presence-shadow);display:none}}.game-ui-liquid-presence{--liquid-presence-from:var(--game-ui-cta-from);--liquid-presence-to:var(--game-ui-cta-to);vertical-align:middle;pointer-events:none;color:var(--game-ui-secondary);flex:none;line-height:0;display:inline-block;position:relative}.game-ui-liquid-presence>svg{width:100%;height:100%;filter:var(--game-ui-liquid-presence-shadow);display:block;overflow:visible}.game-ui-liquid-presence[data-activity=disabled]{opacity:.5}.game-ui-liquid-presence[data-activity=error],.game-ui-liquid-presence[data-activity=unknown]{--liquid-presence-from:var(--game-ui-warning);--liquid-presence-to:var(--game-ui-warning)}.game-ui-liquid-presence-overlay{z-index:95;pointer-events:none;color:var(--game-ui-secondary);position:fixed;inset:0;overflow:visible}.game-ui-liquid-presence-overlay>[hidden]{display:none!important}.game-ui-liquid-presence-flight,.game-ui-liquid-presence-seat{transform-origin:50%;position:absolute;top:0;left:0;overflow:visible}.game-ui-liquid-presence-flight{width:96px;height:72px}.game-ui-liquid-presence-seat{width:112px;height:56px}.game-ui-liquid-presence-label{box-sizing:border-box;border-radius:var(--game-ui-radius-control,12px);background:var(--game-ui-surface);width:max-content;max-width:min(260px,100vw - 32px);color:var(--game-ui-text);box-shadow:none;font:500 13px/1.5 var(--game-ui-font-body);overflow-wrap:anywhere;text-wrap:pretty;padding:9px 14px;position:absolute;top:0;left:0}.game-ui-liquid-presence-label--guide{overscroll-behavior:contain;pointer-events:auto;text-wrap:wrap;width:300px;max-width:calc(100vw - 32px);max-height:min(300px,42dvh);box-shadow:none;color:var(--game-ui-cta-text);background:0 0;border-radius:16px;padding:0;overflow:auto}.game-ui-liquid-presence-label--expanded{flex-direction:column;width:420px;max-height:min(560px,65dvh);display:flex}@media (prefers-reduced-motion:reduce){.game-ui-liquid-presence-flight{display:none}}@media (forced-colors:active){.game-ui-liquid-presence svg g,.game-ui-liquid-presence-overlay svg g,.game-ui-liquid-presence-overlay svg path{filter:none;fill:highlight}.game-ui-liquid-presence-label{color:canvastext;box-shadow:none;background:canvas;border:1px solid canvastext}}.game-ui-liquid-anchor{z-index:var(--game-ui-assistance-z,95);width:max-content}.game-ui-liquid-presence-label--guide>.game-ui-liquid-reveal{min-height:100%}.game-ui-liquid-presence-label--guide .game-ui-liquid-reveal-content{padding:18px}@media (forced-colors:active){.game-ui-liquid-reveal{color:canvastext;background:canvas}}}

package/dist/liquid-presence.d.ts

@@ -15,6 +15,20 @@ export declare interface LiquidAnchorProps {
     onBoundsChange?(rect: LiquidPresenceRect | null): void;
 }
 
+/** A controlled, non-modal liquid panel. The host still owns every action and
+ * open state; this composition owns placement, dismissal and focus only. */
+export declare function LiquidPopover({ open, ...props }: LiquidPopoverProps): JSX.Element | null;
+
+export declare interface LiquidPopoverProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    source: RefObject<HTMLElement | null>;
+    placement?: LiquidAnchorProps['placement'];
+    title: ReactNode;
+    width?: number;
+    children: ReactNode;
+}
+
 /** A liquid body and its visual gesture. It never creates a model, acquires
  * media, clicks an app control, or interprets animation as a task receipt. */
 export declare function LiquidPresence(props: LiquidPresenceProps): JSX.Element;
@@ -76,7 +90,7 @@ export declare interface LiquidPresenceTarget {
 /** One finite material gesture, not a window, microphone, state machine or
  * another orb. The real HTML stays still and usable while the perimeter draws.
  * Uses the SAME opaque fill, goo/gloss and budget as LiquidPresence. */
-export declare function LiquidReveal({ children, source, revealKey, variant, surface, reducedMotion, idleMotion, colorFrom, colorTo, motionIntensity, motionSpeed, className, }: LiquidRevealProps): JSX.Element;
+export declare function LiquidReveal({ children, source, revealKey, variant, reducedMotion, idleMotion, colorFrom, colorTo, motionIntensity, motionSpeed, className, }: LiquidRevealProps): JSX.Element;
 
 export declare interface LiquidRevealProps {
     children: ReactNode;
@@ -85,8 +99,6 @@ export declare interface LiquidRevealProps {
     /** A new explicitly requested presentation, never a token/stream revision. */
     revealKey?: string;
     variant?: 'content' | 'input';
-    /** Same liquid colour through the whole face. Dark retains the earlier style. */
-    surface?: 'material' | 'dark';
     reducedMotion?: boolean;
     /** Optional slow perimeter flow. Caller must offer a persistent pause control. */
     idleMotion?: 'still' | 'breathe';