@realnation/builder-shared-sdk 2.0.0 → 2.2.0

package/dist/interaction/index.d.ts

@@ -48,16 +48,32 @@ export interface InteractionStyle {
 export type StyleKeyCase = 'camel' | 'kebab';
 /** Rewrites the compound property names; transition / transform / opacity are already valid CSS. */
 export declare function toKebabStyle(style: InteractionStyle): InteractionStyle;
+/** Whether the operator configured any second appearance at all. Untouched keys are absent. */
+export declare function hasSelectedAppearance(property: InteractionProperty | null | undefined): boolean;
+export interface InteractionEnabledOptions {
+    /**
+     * The caller decides when the element is selected, so the trigger has nothing
+     * to decide for it. Inferred from passing an explicit `active` to style().
+     */
+    selfDriven?: boolean;
+}
 /**
  * Whether the element has an interaction state at all.
  *
- * The trigger is the section's master switch, because it answers the first
- * question: does this element react to anything? Easing only describes what
- * the change looks like once something does trigger it. `none` is the default,
- * so an element nobody configured behaves exactly as it did before this
- * feature existed. Every entry point checks this first.
+ * For elements the platform drives, the trigger is the master switch: it
+ * answers the first question, does this element react to anything? Easing only
+ * describes what the change looks like once something triggers it.
+ *
+ * For an element whose owner supplies its own `active` — personality-test's
+ * options, where "selected" means the answer the player picked — the trigger
+ * has nothing left to decide, and making the operator pick an arbitrary one
+ * just to switch the section on would be a riddle. There the switch is simply
+ * whether a second appearance was configured.
+ *
+ * Either way an element nobody configured behaves exactly as it did before
+ * this feature existed. Every entry point checks this first.
  */
-export declare function isInteractionEnabled(property: InteractionProperty | null | undefined): boolean;
+export declare function isInteractionEnabled(property: InteractionProperty | null | undefined, options?: InteractionEnabledOptions): boolean;
 export declare function interactionTriggerOf(property: InteractionProperty | null | undefined): InteractionTrigger;
 export declare function interactionDurationOf(property: InteractionProperty | null | undefined): number;
 /**
@@ -76,6 +92,8 @@ export interface InteractionStyleOptions {
     instant?: boolean;
     /** Key style of the returned object. Defaults to camelCase. */
     keys?: StyleKeyCase;
+    /** See isInteractionEnabled. Set by style() when the caller supplies `active`. */
+    selfDriven?: boolean;
 }
 /**
  * The style to merge onto an element for a given state.

package/dist/interaction/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChF,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAiD,CAAC;AAEhH,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAO7C,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAItE;AAOD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE9F;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAGzG;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAE9F;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG5F;AAED,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAsClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interaction/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChF,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAiD,CAAC;AAEhH,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAO7C,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAItE;AAeD,+FAA+F;AAC/F,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAG/F;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,OAAO,GAAE,yBAA8B,GACtC,OAAO,CAGT;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAGzG;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAE9F;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAG5F;AAED,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAsClB"}

package/dist/interaction/index.js

@@ -39,16 +39,38 @@ const num = (value, fallback) => {
     const n = Number(value);
     return Number.isFinite(n) ? n : fallback;
 };
+const SELECTED_APPEARANCE_KEYS = [
+    INTERACTION_KEYS.bgColor,
+    INTERACTION_KEYS.borderColor,
+    INTERACTION_KEYS.rotation,
+    INTERACTION_KEYS.scale,
+    INTERACTION_KEYS.opacity,
+];
+/** Whether the operator configured any second appearance at all. Untouched keys are absent. */
+export function hasSelectedAppearance(property) {
+    if (!property)
+        return false;
+    return SELECTED_APPEARANCE_KEYS.some((k) => property[k] != null && property[k] !== '');
+}
 /**
  * Whether the element has an interaction state at all.
  *
- * The trigger is the section's master switch, because it answers the first
- * question: does this element react to anything? Easing only describes what
- * the change looks like once something does trigger it. `none` is the default,
- * so an element nobody configured behaves exactly as it did before this
- * feature existed. Every entry point checks this first.
+ * For elements the platform drives, the trigger is the master switch: it
+ * answers the first question, does this element react to anything? Easing only
+ * describes what the change looks like once something triggers it.
+ *
+ * For an element whose owner supplies its own `active` — personality-test's
+ * options, where "selected" means the answer the player picked — the trigger
+ * has nothing left to decide, and making the operator pick an arbitrary one
+ * just to switch the section on would be a riddle. There the switch is simply
+ * whether a second appearance was configured.
+ *
+ * Either way an element nobody configured behaves exactly as it did before
+ * this feature existed. Every entry point checks this first.
  */
-export function isInteractionEnabled(property) {
+export function isInteractionEnabled(property, options = {}) {
+    if (options.selfDriven)
+        return hasSelectedAppearance(property);
     return interactionTriggerOf(property) !== 'none';
 }
 export function interactionTriggerOf(property) {
@@ -78,7 +100,7 @@ export function interactionPeriodOf(property) {
  * an unset colour must inherit the normal appearance rather than reset it.
  */
 export function interactionStyle(property, active, options = {}) {
-    if (!isInteractionEnabled(property))
+    if (!isInteractionEnabled(property, { selfDriven: options.selfDriven }))
         return {};
     const bag = property;
     // An instant change is still expressible: set the duration to zero. Easing

package/dist/interaction/vue.d.ts

@@ -19,6 +19,17 @@ export interface UseInteractionStateOptions {
      */
     keys?: StyleKeyCase;
 }
+export interface InteractionBindOptions {
+    /**
+     * Makes Click behave like a radio group instead of an independent toggle:
+     * picking one clears the others, and clicking the picked one keeps it picked.
+     *
+     * Single-choice answers need this. Without it a player who picks A and then B
+     * leaves both looking chosen, which is worse than no feedback at all.
+     * Ignored by the other triggers, where a transient state has no siblings.
+     */
+    group?: string;
+}
 export interface InteractionStateApi {
     /**
      * The style to merge onto an element.
@@ -28,7 +39,7 @@ export interface InteractionStateApi {
      */
     style(property: InteractionProperty | null | undefined, key: string, active?: boolean): InteractionStyle;
     /** Event handlers to v-bind. Empty unless the trigger is Hover / Press or Click. */
-    bind(property: InteractionProperty | null | undefined, key: string): Record<string, () => void>;
+    bind(property: InteractionProperty | null | undefined, key: string, options?: InteractionBindOptions): Record<string, () => void>;
     /**
      * Restarts the timed triggers for exactly these elements.
      *

package/dist/interaction/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAChG;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,CA8EjG"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/interaction/vue.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtF,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IACzG,oFAAoF;IACpF,IAAI,CACF,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACxC,oEAAoE;IACpE,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3C;AAUD,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA+B,GAAG,mBAAmB,CAqGjG"}

package/dist/interaction/vue.js

@@ -35,27 +35,52 @@ export function useInteractionState(options = {}) {
     // for its first frame; one boolean cannot say both things.
     const instant = reactive({});
     const timers = new Map();
+    // Which group each key belongs to, so a radio click knows whom to clear.
+    const groups = new Map();
     // Guards the deferred On Appear callback: by the time the frame lands the
     // player may already have navigated on, and the element is gone.
     let generation = 0;
     const stop = () => {
         timers.forEach((handle) => clearTimer(handle));
         timers.clear();
+        groups.clear();
         generation += 1;
     };
     const api = {
         style(property, key, forced) {
             const on = forced ?? active[key] ?? false;
-            return interactionStyle(property, on, { instant: instant[key] === true, keys: options.keys });
+            // Passing `active` at all is the declaration: this caller owns the timing,
+            // so the configured trigger is not what decides whether the state exists.
+            return interactionStyle(property, on, {
+                instant: instant[key] === true,
+                keys: options.keys,
+                selfDriven: forced !== undefined,
+            });
         },
-        bind(property, key) {
+        bind(property, key, bindOptions = {}) {
             if (!isInteractionEnabled(property))
                 return {};
             const trigger = interactionTriggerOf(property);
             if (trigger === 'click') {
+                const group = bindOptions.group;
+                if (group)
+                    groups.set(key, group);
                 // Deliberately not stopping propagation: the element may also carry a
-                // link or a node connection, and the visual state is only a layer on top.
-                return { onClick: () => { active[key] = !active[key]; } };
+                // link, a node connection, or the game's own answer handler, and the
+                // visual state is only a layer on top of whatever else happens.
+                return {
+                    onClick: () => {
+                        if (!group) {
+                            active[key] = !active[key];
+                            return;
+                        }
+                        groups.forEach((g, k) => {
+                            if (g === group && k !== key)
+                                active[k] = false;
+                        });
+                        active[key] = true;
+                    },
+                };
             }
             if (trigger !== 'hover')
                 return {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realnation/builder-shared-sdk",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "type": "module",
   "private": false,
   "exports": {