@realnation/builder-shared-sdk 1.2.1 → 2.0.0

package/dist/interaction/index.d.ts

@@ -23,24 +23,39 @@ export declare const INTERACTION_KEYS: {
     readonly scale: "selected-scale";
     readonly opacity: "selected-opacity";
 };
-export type InteractionTrigger = 'hover' | 'click' | 'appear' | 'loop';
+/** `none` is the section's off switch: the element has no interaction state at all. */
+export type InteractionTrigger = 'none' | 'hover' | 'click' | 'appear' | 'loop';
 export declare const INTERACTION_TRIGGERS: readonly InteractionTrigger[];
 /** Anything the Builder stores for one element. Values arrive untyped from the API. */
 export type InteractionProperty = Record<string, unknown>;
-/** The CSS properties this feature is allowed to touch, in camelCase for Vue's :style. */
+/**
+ * The CSS properties this feature is allowed to touch.
+ *
+ * camelCase by default, which is what a Vue `:style` binding expects. Hosts
+ * that build their style objects out of literal CSS property names can ask for
+ * kebab-case instead: mixing the two on one element leaves the winner decided
+ * by object key order, which is not a thing to leave to chance.
+ */
 export interface InteractionStyle {
     transition?: string;
     transform?: string;
     backgroundColor?: string;
     borderColor?: string;
     opacity?: string;
+    /** Present instead of the camelCase names when kebab-case keys are requested. */
+    [cssProperty: string]: string | undefined;
 }
+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 element has an interaction state at all.
  *
- * Easing is the section's master switch: `none` (the default) means the
- * element behaves exactly as it did before this feature existed. Every entry
- * point checks this first so unconfigured elements stay untouched.
+ * 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.
  */
 export declare function isInteractionEnabled(property: InteractionProperty | null | undefined): boolean;
 export declare function interactionTriggerOf(property: InteractionProperty | null | undefined): InteractionTrigger;
@@ -59,6 +74,8 @@ export interface InteractionStyleOptions {
      * easing towards normal immediately and the starting point is never seen.
      */
     instant?: boolean;
+    /** Key style of the returned object. Defaults to camelCase. */
+    keys?: StyleKeyCase;
 }
 /**
  * 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,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvE,eAAO,MAAM,oBAAoB,EAAE,SAAS,kBAAkB,EAAyC,CAAC;AAExG,uFAAuF;AACvF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1D,0FAA0F;AAC1F,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;CAClB;AAOD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAG9F;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;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,mBAAmB,GAAG,IAAI,GAAG,SAAS,EAChD,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,uBAA4B,GACpC,gBAAgB,CAkClB"}
+{"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"}

package/dist/interaction/index.js

@@ -23,7 +23,18 @@ export const INTERACTION_KEYS = {
     scale: 'selected-scale',
     opacity: 'selected-opacity',
 };
-export const INTERACTION_TRIGGERS = ['hover', 'click', 'appear', 'loop'];
+export const INTERACTION_TRIGGERS = ['none', 'hover', 'click', 'appear', 'loop'];
+const KEBAB = {
+    backgroundColor: 'background-color',
+    borderColor: 'border-color',
+};
+/** Rewrites the compound property names; transition / transform / opacity are already valid CSS. */
+export function toKebabStyle(style) {
+    const out = {};
+    for (const [k, v] of Object.entries(style))
+        out[KEBAB[k] ?? k] = v;
+    return out;
+}
 const num = (value, fallback) => {
     const n = Number(value);
     return Number.isFinite(n) ? n : fallback;
@@ -31,18 +42,18 @@ const num = (value, fallback) => {
 /**
  * Whether the element has an interaction state at all.
  *
- * Easing is the section's master switch: `none` (the default) means the
- * element behaves exactly as it did before this feature existed. Every entry
- * point checks this first so unconfigured elements stay untouched.
+ * 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.
  */
 export function isInteractionEnabled(property) {
-    if (!property)
-        return false;
-    return String(property[INTERACTION_KEYS.easing] ?? 'none') !== 'none';
+    return interactionTriggerOf(property) !== 'none';
 }
 export function interactionTriggerOf(property) {
-    const raw = String(property?.[INTERACTION_KEYS.trigger] ?? 'hover');
-    return INTERACTION_TRIGGERS.includes(raw) ? raw : 'hover';
+    const raw = String(property?.[INTERACTION_KEYS.trigger] ?? 'none');
+    return INTERACTION_TRIGGERS.includes(raw) ? raw : 'none';
 }
 export function interactionDurationOf(property) {
     return num(property?.[INTERACTION_KEYS.duration], 400);
@@ -70,7 +81,9 @@ export function interactionStyle(property, active, options = {}) {
     if (!isInteractionEnabled(property))
         return {};
     const bag = property;
-    const easing = String(bag[INTERACTION_KEYS.easing]);
+    // An instant change is still expressible: set the duration to zero. Easing
+    // only decides how the time is spent, so it never needs an "off" of its own.
+    const easing = String(bag[INTERACTION_KEYS.easing] ?? 'ease-out');
     const duration = interactionDurationOf(bag);
     const style = {};
     if (options.instant) {
@@ -81,6 +94,8 @@ export function interactionStyle(property, active, options = {}) {
             .map((prop) => `${prop} ${duration}ms ${easing}`)
             .join(', ');
     }
+    // The normal state only ever carries `transition`, whose name is the same in
+    // both conventions, so this early return needs no conversion.
     if (!active)
         return style;
     const bg = bag[INTERACTION_KEYS.bgColor];
@@ -101,5 +116,5 @@ export function interactionStyle(property, active, options = {}) {
     const opacity = bag[INTERACTION_KEYS.opacity];
     if (opacity != null)
         style.opacity = String(num(opacity, 100) / 100);
-    return style;
+    return options.keys === 'kebab' ? toKebabStyle(style) : style;
 }

package/dist/interaction/vue.d.ts

@@ -1,4 +1,4 @@
-import type { InteractionProperty, InteractionStyle } from './index.js';
+import type { InteractionProperty, InteractionStyle, StyleKeyCase } from './index.js';
 /** One element to drive: a stable key plus the properties the Builder stored for it. */
 export interface InteractionEntry {
     key: string;
@@ -10,6 +10,14 @@ export interface UseInteractionStateOptions {
     clearTimer?: (handle: unknown) => void;
     /** Schedules the frame after next. Defaults to double rAF, or a macrotask. */
     nextFrame?: (fn: () => void) => void;
+    /**
+     * Key style for every style() call. Defaults to camelCase.
+     *
+     * Set 'kebab' when the host merges these into a style object it builds out of
+     * literal CSS property names, so the same property never appears twice under
+     * two spellings.
+     */
+    keys?: StyleKeyCase;
 }
 export interface InteractionStateApi {
     /**

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,MAAM,YAAY,CAAC;AAExE,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;CACtC;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,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"}

package/dist/interaction/vue.js

@@ -46,7 +46,7 @@ export function useInteractionState(options = {}) {
     const api = {
         style(property, key, forced) {
             const on = forced ?? active[key] ?? false;
-            return interactionStyle(property, on, { instant: instant[key] === true });
+            return interactionStyle(property, on, { instant: instant[key] === true, keys: options.keys });
         },
         bind(property, key) {
             if (!isInteractionEnabled(property))

package/package.json

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