@joydle/ui 0.1.0 → 0.1.1

package/dist/screens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,sCAAsC;AACtC,8EAA8E;AAE9E,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,WAAW,EAA6C,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,cAAc,EAAmD,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,WAAW,EAA2C,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/screens/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,sCAAsC;AACtC,8EAA8E;AAE9E,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,WAAW,EAA6C,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,cAAc,EAAmD,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,WAAW,EAA2C,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,WAAW,EAAyB,WAAW,EAAyB,YAAY,EAA0B,UAAU,EAAwB,aAAa,EAA2B,aAAa,EAA2B,MAAM,iBAAiB,CAAC"}

package/dist/screens/primitives.d.ts

@@ -0,0 +1,101 @@
+import type { ComponentChildren, JSX } from 'preact';
+export interface ScreenFrameProps {
+    /** Background color/value. Default: `var(--joydle-bg, #06060f)`. */
+    bg?: string;
+    /** Keys that trigger onStart (e.g. `['Space', 'Enter']`). */
+    onKeyStart?: string[];
+    /** Called when a key from onKeyStart is pressed. */
+    onStart?: () => void;
+    /** Screen identifier for ScreenManager routing. */
+    screen?: string;
+    /** Additional class names. */
+    class?: string;
+    children?: ComponentChildren;
+}
+/**
+ * Composable screen frame — handles positioning, background, and keyboard shortcuts.
+ *
+ * Owns: container structure, keyboard handling, z-stacking.
+ * Does NOT own: layout of children, colors, fonts, animations.
+ *
+ * ```tsx
+ * <ScreenFrame onKeyStart={['Space']} onStart={startGame} bg="#0a0012">
+ *   <ScreenTitle>MY GAME</ScreenTitle>
+ *   <ScreenButton onClick={startGame}>PLAY</ScreenButton>
+ * </ScreenFrame>
+ * ```
+ */
+export declare function ScreenFrame({ bg, onKeyStart, onStart, screen: _screen, class: className, children, }: ScreenFrameProps): JSX.Element;
+export interface ScreenTitleProps {
+    /** Title color. Default: `var(--joydle-primary)`. */
+    color?: string;
+    /** Add a glow text-shadow. Default: true. */
+    glow?: boolean;
+    children?: ComponentChildren;
+}
+/**
+ * Screen title element — styled h1 matching the joydle title aesthetic.
+ * Supports `<accent>` children for secondary color highlights.
+ *
+ * ```tsx
+ * <ScreenTitle>DEAD FOREST</ScreenTitle>
+ * <ScreenTitle color="#8b0000">BLOOD <accent>RUNS</accent></ScreenTitle>
+ * ```
+ */
+export declare function ScreenTitle({ color, glow, children, }: ScreenTitleProps): JSX.Element;
+export interface ScreenButtonProps {
+    onClick: () => void;
+    /** Button background color. Default: `var(--joydle-accent)`. */
+    color?: string;
+    /** Button text color. Default: `var(--joydle-bg)`. */
+    textColor?: string;
+    type?: 'button' | 'submit';
+    children?: ComponentChildren;
+}
+/**
+ * Themed action button for screens.
+ *
+ * ```tsx
+ * <ScreenButton onClick={start}>PLAY</ScreenButton>
+ * <ScreenButton onClick={start} color="var(--joydle-danger)">RETRY</ScreenButton>
+ * ```
+ */
+export declare function ScreenButton({ onClick, color, textColor, type, children, }: ScreenButtonProps): JSX.Element;
+export interface ScreenHintProps {
+    /** Hint text color. Default: `var(--joydle-text-dim)`. */
+    color?: string;
+    children?: ComponentChildren;
+}
+/**
+ * Small hint/caption below the play button.
+ *
+ * ```tsx
+ * <ScreenHint>WASD move · CLICK fire</ScreenHint>
+ * ```
+ */
+export declare function ScreenHint({ color, children }: ScreenHintProps): JSX.Element;
+export interface ScreenDividerProps {
+    /** Line color. Default: `var(--joydle-primary)`. */
+    color?: string;
+    /** Line width (CSS value). Default: `'160px'`. */
+    width?: string;
+}
+/**
+ * Decorative horizontal divider with a gradient fade.
+ */
+export declare function ScreenDivider({ color, width }: ScreenDividerProps): JSX.Element;
+export interface ScreenMetricsProps {
+    /** Array of metric strings to display. */
+    items: string[];
+    /** Text color. Default: `var(--joydle-text-dim)`. */
+    color?: string;
+}
+/**
+ * Simple metric list for game-over or results screens.
+ *
+ * ```tsx
+ * <ScreenMetrics items={['Time: 1:23', 'Combo: 5x', 'Accuracy: 84%']} />
+ * ```
+ */
+export declare function ScreenMetrics({ items, color }: ScreenMetricsProps): JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/screens/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/screens/primitives.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAyHrD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAgC,EAChC,UAAU,EACV,OAAO,EACP,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,SAAS,EAChB,QAAQ,GACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuBhC;AAID,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAW,EACX,QAAQ,GACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAchC;AAID,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,SAAS,EACT,IAAe,EACf,QAAQ,GACT,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAejC;AAID,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAQ5E;AAID,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAQ/E;AAID,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAc/E"}

package/dist/screens/primitives.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui/screens — Composable screen primitives
+//
+//  Use these to build fully custom screens while getting keyboard shortcuts,
+//  entrance animation timing, and consistent joydle styling for free.
+//
+//  Example (a horror game title screen):
+//  ```tsx
+//  <ScreenFrame onKeyStart={['Space','Enter']} onStart={startGame}>
+//    <img src="blood-logo.png" />
+//    <ScreenTitle color="#8b0000">DEAD FOREST</ScreenTitle>
+//    <ScreenHint>Find the key. Don't get caught.</ScreenHint>
+//    <ScreenButton onClick={startGame} color="var(--joydle-danger)">
+//      ENTER
+//    </ScreenButton>
+//  </ScreenFrame>
+//  ```
+// ---------------------------------------------------------------------------
+import { useEffect } from 'preact/hooks';
+// ---- CSS injection ---------------------------------------------------------
+const PRIMITIVES_CSS = `
+.joydle-screen-frame {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--joydle-font, sans-serif);
+  color: var(--joydle-text, #fff);
+}
+
+.joydle-screen-title {
+  font-size: clamp(2rem, 6vw, 4rem);
+  font-weight: 900;
+  letter-spacing: 0.04em;
+  color: var(--joydle-primary, #00f5ff);
+  text-transform: uppercase;
+  margin: 0;
+  line-height: 1.1;
+  text-align: center;
+  text-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-primary, #00f5ff);
+}
+
+.joydle-screen-title accent {
+  color: var(--joydle-accent, #ff2d7b);
+  text-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-accent, #ff2d7b);
+}
+
+.joydle-screen-hint {
+  font-size: 0.75rem;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.06em;
+  text-align: center;
+  margin: 0;
+}
+
+.joydle-screen-btn {
+  position: relative;
+  padding: 14px 48px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-family: var(--joydle-font, sans-serif);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--joydle-bg, #06060f);
+  background: var(--joydle-accent, #ff2d7b);
+  border: none;
+  border-radius: var(--joydle-border-radius, 4px);
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) var(--joydle-accent, #ff2d7b);
+}
+
+.joydle-screen-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 16px 4px var(--joydle-accent, #ff2d7b);
+}
+
+.joydle-screen-btn:active {
+  transform: scale(0.97);
+}
+
+.joydle-screen-btn::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -75%;
+  width: 50%;
+  height: 200%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
+  transform: skewX(-20deg);
+  animation: joydle-btn-shine 3s ease-in-out infinite;
+}
+
+@keyframes joydle-btn-shine {
+  0%, 100% { left: -75%; }
+  50% { left: 125%; }
+}
+
+.joydle-screen-divider {
+  border: none;
+  height: 1px;
+  width: 160px;
+  background: linear-gradient(90deg, transparent, var(--joydle-primary, #00f5ff), transparent);
+  margin: 0;
+  opacity: 0.4;
+}
+
+.joydle-screen-metrics {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.joydle-screen-metric {
+  font-size: 0.85rem;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.04em;
+}
+`;
+let primitivesStyleInjected = false;
+function injectPrimitivesStyle() {
+    if (primitivesStyleInjected)
+        return;
+    primitivesStyleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = PRIMITIVES_CSS;
+    document.head.appendChild(el);
+}
+/**
+ * Composable screen frame — handles positioning, background, and keyboard shortcuts.
+ *
+ * Owns: container structure, keyboard handling, z-stacking.
+ * Does NOT own: layout of children, colors, fonts, animations.
+ *
+ * ```tsx
+ * <ScreenFrame onKeyStart={['Space']} onStart={startGame} bg="#0a0012">
+ *   <ScreenTitle>MY GAME</ScreenTitle>
+ *   <ScreenButton onClick={startGame}>PLAY</ScreenButton>
+ * </ScreenFrame>
+ * ```
+ */
+export function ScreenFrame({ bg = 'var(--joydle-bg, #06060f)', onKeyStart, onStart, screen: _screen, class: className, children, }) {
+    injectPrimitivesStyle();
+    useEffect(() => {
+        if (!onKeyStart?.length || !onStart)
+            return;
+        const handler = (e) => {
+            if (onKeyStart.includes(e.code)) {
+                e.preventDefault();
+                onStart();
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [onKeyStart, onStart]);
+    return (_jsx("div", { class: `joydle-screen-frame${className ? ' ' + className : ''}`, style: { background: bg }, children: children }));
+}
+/**
+ * Screen title element — styled h1 matching the joydle title aesthetic.
+ * Supports `<accent>` children for secondary color highlights.
+ *
+ * ```tsx
+ * <ScreenTitle>DEAD FOREST</ScreenTitle>
+ * <ScreenTitle color="#8b0000">BLOOD <accent>RUNS</accent></ScreenTitle>
+ * ```
+ */
+export function ScreenTitle({ color, glow = true, children, }) {
+    injectPrimitivesStyle();
+    const style = {};
+    if (color) {
+        style.color = color;
+        if (glow)
+            style.textShadow = `0 0 var(--joydle-glow-blur, 0) ${color}`;
+    }
+    return (_jsx("h1", { class: "joydle-screen-title", style: style, children: children }));
+}
+/**
+ * Themed action button for screens.
+ *
+ * ```tsx
+ * <ScreenButton onClick={start}>PLAY</ScreenButton>
+ * <ScreenButton onClick={start} color="var(--joydle-danger)">RETRY</ScreenButton>
+ * ```
+ */
+export function ScreenButton({ onClick, color, textColor, type = 'button', children, }) {
+    injectPrimitivesStyle();
+    const style = {};
+    if (color) {
+        style.background = color;
+        style.boxShadow = `0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) ${color}`;
+    }
+    if (textColor)
+        style.color = textColor;
+    return (_jsx("button", { class: "joydle-screen-btn", style: style, onClick: onClick, type: type, children: children }));
+}
+/**
+ * Small hint/caption below the play button.
+ *
+ * ```tsx
+ * <ScreenHint>WASD move · CLICK fire</ScreenHint>
+ * ```
+ */
+export function ScreenHint({ color, children }) {
+    injectPrimitivesStyle();
+    return (_jsx("p", { class: "joydle-screen-hint", style: color ? { color } : {}, children: children }));
+}
+/**
+ * Decorative horizontal divider with a gradient fade.
+ */
+export function ScreenDivider({ color, width }) {
+    injectPrimitivesStyle();
+    const style = {};
+    if (color)
+        style.background = `linear-gradient(90deg, transparent, ${color}, transparent)`;
+    if (width)
+        style.width = width;
+    return _jsx("hr", { class: "joydle-screen-divider", style: style });
+}
+/**
+ * Simple metric list for game-over or results screens.
+ *
+ * ```tsx
+ * <ScreenMetrics items={['Time: 1:23', 'Combo: 5x', 'Accuracy: 84%']} />
+ * ```
+ */
+export function ScreenMetrics({ items, color }) {
+    injectPrimitivesStyle();
+    if (!items.length)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { class: "joydle-screen-metrics", children: items.map((m, i) => (_jsx("span", { class: "joydle-screen-metric", style: color ? { color } : {}, children: m }, i))) }));
+}
+//# sourceMappingURL=primitives.js.map

package/dist/screens/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/screens/primitives.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,qDAAqD;AACrD,EAAE;AACF,6EAA6E;AAC7E,sEAAsE;AACtE,EAAE;AACF,yCAAyC;AACzC,UAAU;AACV,oEAAoE;AACpE,kCAAkC;AAClC,4DAA4D;AAC5D,8DAA8D;AAC9D,qEAAqE;AACrE,aAAa;AACb,qBAAqB;AACrB,kBAAkB;AAClB,OAAO;AACP,8EAA8E;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,+EAA+E;AAE/E,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGtB,CAAC;AAEF,IAAI,uBAAuB,GAAG,KAAK,CAAC;AACpC,SAAS,qBAAqB;IAC5B,IAAI,uBAAuB;QAAE,OAAO;IACpC,uBAAuB,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,EAAE,CAAC,WAAW,GAAG,cAAc,CAAC;IAChC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC;AAkBD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,EAAE,GAAG,2BAA2B,EAChC,UAAU,EACV,OAAO,EACP,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,SAAS,EAChB,QAAQ,GACS;IACjB,qBAAqB,EAAE,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,OAAO;YAAE,OAAO;QAC5C,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAQ,EAAE;YACzC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,cACE,KAAK,EAAE,sBAAsB,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/D,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,YAExB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAYD;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,GAAG,IAAI,EACX,QAAQ,GACS;IACjB,qBAAqB,EAAE,CAAC;IAExB,MAAM,KAAK,GAAoC,EAAE,CAAC;IAClD,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,IAAI,IAAI;YAAE,KAAK,CAAC,UAAU,GAAG,kCAAkC,KAAK,EAAE,CAAC;IACzE,CAAC;IAED,OAAO,CACL,aAAI,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,KAAK,YACzC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAcD;;;;;;;GAOG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,GACU;IAClB,qBAAqB,EAAE,CAAC;IAExB,MAAM,KAAK,GAAoC,EAAE,CAAC;IAClD,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC;QACzB,KAAK,CAAC,SAAS,GAAG,+DAA+D,KAAK,EAAE,CAAC;IAC3F,CAAC;IACD,IAAI,SAAS;QAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;IAEvC,OAAO,CACL,iBAAQ,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,YACzE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC;AAUD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB;IAC7D,qBAAqB,EAAE,CAAC;IAExB,OAAO,CACL,YAAG,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,YACxD,QAAQ,GACP,CACL,CAAC;AACJ,CAAC;AAWD;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAsB;IAChE,qBAAqB,EAAE,CAAC;IAExB,MAAM,KAAK,GAAoC,EAAE,CAAC;IAClD,IAAI,KAAK;QAAE,KAAK,CAAC,UAAU,GAAG,uCAAuC,KAAK,gBAAgB,CAAC;IAC3F,IAAI,KAAK;QAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IAE/B,OAAO,aAAI,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;AAC5D,CAAC;AAWD;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAsB;IAChE,qBAAqB,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,mBAAK,CAAC;IAEhC,OAAO,CACL,cAAK,KAAK,EAAC,uBAAuB,YAC/B,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnB,eAAc,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,YACrE,CAAC,IADO,CAAC,CAEL,CACR,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/transitions/ScreenTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenTransition.d.ts","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAehD,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAsBD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAmB,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,gCAsFvB"}
+{"version":3,"file":"ScreenTransition.d.ts","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMhD,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAsBD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAmB,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,gCAiFvB"}

package/dist/transitions/ScreenTransition.js

@@ -4,15 +4,7 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 // ---------------------------------------------------------------------------
 import { useRef, useEffect } from 'preact/hooks';
 import { transitionPresets } from './presets';
-// ---- GSAP helper ----------------------------------------------------------
-function getGsap() {
-    try {
-        return globalThis.gsap ?? require('gsap').default;
-    }
-    catch {
-        return null;
-    }
-}
+import { getGsap } from '../deps.js';
 // ---- Helpers --------------------------------------------------------------
 /**
  * Converts a `TransitionPreset` phase (enter or exit) into `gsap.fromTo`
@@ -49,30 +41,12 @@ export function ScreenTransition({ transition = 'fade', duration, activeKey, chi
             tlRef.current = null;
         }
     };
-    // Enter animation on mount / key change.
+    // Animate on mount and on key change.
+    // When activeKey changes the children have already been swapped by the
+    // re-render, so we sequence: quick exit of the wrapper → enter with new
+    // content, all on the same element.
     useEffect(() => {
         const el = wrapperRef.current;
-        if (!el || !preset)
-            return;
-        const gsap = getGsap();
-        if (!gsap)
-            return;
-        killTimeline();
-        const { from, to } = buildFromTo(preset.enter);
-        const tl = gsap.timeline();
-        tl.fromTo(el, from, { ...to, duration: dur, ease: 'power2.out' });
-        tlRef.current = tl;
-        return () => {
-            killTimeline();
-        };
-        // Re-run when activeKey changes.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeKey]);
-    // Handle key transitions: exit old, enter new.
-    useEffect(() => {
-        if (prevKeyRef.current === activeKey)
-            return;
-        const el = wrapperRef.current;
         if (!el || !preset) {
             prevKeyRef.current = activeKey;
             return;
@@ -83,15 +57,32 @@ export function ScreenTransition({ transition = 'fade', duration, activeKey, chi
             return;
         }
         killTimeline();
-        // Quick exit of previous content.
-        const { from: exitFrom, to: exitTo } = buildFromTo(preset.exit);
-        const tl = gsap.timeline({
-            onComplete: () => {
-                prevKeyRef.current = activeKey;
-            },
-        });
-        tl.fromTo(el, exitFrom, { ...exitTo, duration: dur * 0.4, ease: 'power2.in' });
-        tlRef.current = tl;
+        const isInitial = prevKeyRef.current === activeKey;
+        const { from: enterFrom, to: enterTo } = buildFromTo(preset.enter);
+        if (isInitial) {
+            // First mount — just enter.
+            const tl = gsap.timeline();
+            tl.fromTo(el, enterFrom, { ...enterTo, duration: dur, ease: 'power2.out' });
+            tlRef.current = tl;
+        }
+        else {
+            // Key changed — exit then enter.
+            const { from: exitFrom, to: exitTo } = buildFromTo(preset.exit);
+            const tl = gsap.timeline({
+                onComplete: () => {
+                    prevKeyRef.current = activeKey;
+                },
+            });
+            // Quick exit of previous visual state
+            tl.fromTo(el, exitFrom, { ...exitTo, duration: dur * 0.35, ease: 'power2.in' });
+            // Then enter with new content
+            tl.fromTo(el, enterFrom, { ...enterTo, duration: dur, ease: 'power2.out' });
+            tlRef.current = tl;
+            prevKeyRef.current = activeKey;
+        }
+        return () => {
+            killTimeline();
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeKey]);
     // Cleanup on unmount.

package/dist/transitions/ScreenTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenTransition.js","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScreenTransition.js","sourceRoot":"","sources":["../../src/transitions/ScreenTransition.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joydle/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,9 +28,15 @@
     "./transitions": {
       "types": "./dist/transitions/index.d.ts",
       "import": "./dist/transitions/index.js"
+    },
+    "./fx": {
+      "types": "./dist/fx/index.d.ts",
+      "import": "./dist/fx/index.js"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc",
     "typecheck": "tsc --noEmit",
@@ -45,15 +51,20 @@
   "author": "Joydle <contact@joydle.dev>",
   "homepage": "https://joydle.dev",
   "peerDependencies": {
+    "@joydle/icons": "^0.1.0",
     "gsap": "^3.12",
     "preact": "^10.19"
   },
   "peerDependenciesMeta": {
+    "@joydle/icons": {
+      "optional": true
+    },
     "gsap": {
       "optional": true
     }
   },
   "devDependencies": {
+    "gsap": "^3.12",
     "jsdom": "^28.1.0",
     "preact": "^10.19.0",
     "typescript": "^5.4.0",