@teacharium/widget 0.2.2 → 0.3.1

package/dist/main.d.ts

@@ -4,4 +4,5 @@ export * from './teacharium-custom-fields';
 export * from './standard-layout-options';
 export { AudioPlayer } from './components/AudioPlayer';
 export * from './utils/voiceover';
+export * from './utils/actions';
 export declare const hi = "world";

package/dist/teacharium-custom-fields.d.ts

@@ -1,50 +1,66 @@
 import { BaseField } from '@measured/puck';
-export interface ImageMediaField extends BaseField {
+export type TeachariumCustomFieldType = "imageMedia" | "videoMedia" | "audioMedia" | "voiceover" | "action" | "variable" | "numericExpression" | "stringExpression" | "placeholder" | "step" | "condition" | "textStyle" | "frame";
+export type TeachariumCustomField = BaseField & {
+    type: TeachariumCustomFieldType;
+    label?: string;
+    placeholder?: string;
+    description?: string;
+    value?: string;
+};
+export type ImageMediaField = TeachariumCustomField & {
     type: "imageMedia";
     label: string;
-}
-export interface VideoMediaField extends BaseField {
+};
+export type VideoMediaField = TeachariumCustomField & {
     type: "videoMedia";
     label: string;
-}
-export interface AudioMediaField extends BaseField {
+};
+export type AudioMediaField = TeachariumCustomField & {
     type: "audioMedia";
     label: string;
-}
-export interface VoiceoverField extends BaseField {
+};
+export type VoiceoverField = TeachariumCustomField & {
     type: "voiceover";
     label?: string;
-}
-export interface ActionField extends BaseField {
+};
+export type ActionField = TeachariumCustomField & {
     type: "action";
     label: string;
-}
-export interface VariableField extends BaseField {
+};
+export type VariableField = TeachariumCustomField & {
     type: "variable";
     label: string;
-}
-export interface NumericExpressionField extends BaseField {
+};
+export type NumericExpressionField = TeachariumCustomField & {
     type: "numericExpression";
     label: string;
-}
-export interface StringExpressionField extends BaseField {
+};
+export type StringExpressionField = TeachariumCustomField & {
     type: "stringExpression";
     label: string;
-}
-export interface ConditionField extends BaseField {
+};
+export type ConditionField = TeachariumCustomField & {
     type: "condition";
     label: string;
-}
-export interface PlaceholderField extends BaseField {
+};
+export type PlaceholderField = TeachariumCustomField & {
     type: "placeholder";
     label?: string;
     description?: string;
     value?: string;
-}
-export interface StepField extends BaseField {
+};
+export type StepField = TeachariumCustomField & {
     type: "step";
     label: string;
     placeholder?: string;
     description?: string;
-}
-export type TeachariumCustomFields = ImageMediaField | VideoMediaField | AudioMediaField | VoiceoverField | ActionField | VariableField | NumericExpressionField | StringExpressionField | ConditionField | PlaceholderField | StepField;
+};
+export type TextStyleField = TeachariumCustomField & {
+    type: "textStyle";
+    label?: string;
+};
+export type FrameField = TeachariumCustomField & {
+    type: "frame";
+    label?: string;
+};
+export type TeachariumCustomFields = TeachariumCustomField;

package/dist/teacharium-widget-api.d.ts

@@ -3,6 +3,7 @@ export type VoiceType = "alloy" | "ash" | "ballad" | "coral" | "echo" | "fable"
 export interface VoiceoverData {
     enabled: boolean;
     voice: VoiceType;
+    speed?: number;
     showPlayButton: boolean;
     cached?: boolean;
     content?: string;
@@ -17,21 +18,17 @@ export interface BaseEvent {
     emittedBy?: string;
 }
 export type VariableValue = string | number | boolean;
-export interface UseNumberExpression {
-    (expression: string, defaultValue: number): number;
-    (expression: string): number | null;
+export interface UseNumberExpressions {
+    (expressions: string[], defaultValues?: number[]): (number)[];
 }
-export interface UseStringExpression {
-    (expression: string, defaultValue?: string): string;
-}
-export interface UseVariableValue {
-    (name: string | null | undefined): VariableValue | undefined;
+export interface UseStringExpressions {
+    (expressions: (string | undefined)[], defaultValues?: string[]): string[];
 }
 export interface UseVariableValues {
     (names: Array<string | null | undefined>): (VariableValue | undefined)[];
 }
-export interface UseUpdateVariable {
-    (newValue: VariableValue): void;
+export interface UseUpdateVariables {
+    (values: Record<string, VariableValue>): void;
 }
 export interface UseMediaUrl {
     (src: string, expiresIn?: number): {
@@ -69,25 +66,67 @@ export interface UseConditionEvaluationResult {
 export interface UseConditionEvaluation {
     (condition: ConditionValue): UseConditionEvaluationResult;
 }
-export interface ItemOptions {
-    correctVariableName: string;
-    feedbackVariableName?: string;
-    attemptedVariableName?: string;
+export type ItemType = "instructional" | "practice" | "scored";
+export interface CurrentAnswer {
+    humanReadable: string;
+    machineReadable: string | number;
 }
-export interface UseIsItem {
-    (widgetId: string, options: ItemOptions): void;
+export interface ItemStatus {
+    correct: boolean;
+    attempted: boolean;
+    currentAnswer?: CurrentAnswer;
+    maxScore: number;
+    currentScore: number;
 }
 export interface ItemData {
     widgetId: string;
-    correctVariableName: string;
-    feedbackVariableName?: string;
-    attemptedVariableName?: string;
+    widgetName?: string;
+    stepId: string;
+    type: ItemType;
+    status: ItemStatus;
+}
+export interface ItemUpdateApi {
+    updateCorrect: (correct: boolean) => void;
+    updateAttempted: (attempted: boolean) => void;
+    updateAnswer: (answer: CurrentAnswer | undefined) => void;
+    updateStatus: (updates: Partial<ItemStatus>) => void;
+    updateScore: (currentScore: number, maxScore?: number) => void;
+    updateMaxScore: (maxScore: number) => void;
+}
+export interface UseIsItemOptions {
+    stepId: string;
+    type?: ItemType;
+    maxScore?: number;
+    widgetName?: string;
+}
+/**
+ * Hook for widgets to register as items and get the update API.
+ * When used via api.hooks.useIsItem (curried version), widgets can optionally pass configuration.
+ */
+export interface UseIsItem {
+    (options?: {
+        widgetId?: string;
+        options?: Omit<UseIsItemOptions, "stepId">;
+    }): ItemUpdateApi;
+}
+/**
+ * Hook for registering sub-items with custom IDs (e.g., rows in a matrix).
+ * Requires passing a custom widget ID and optional type.
+ */
+export interface UseIsItemWithId {
+    (customWidgetId: string, options?: {
+        type?: ItemType;
+        maxScore?: number;
+        widgetName?: string;
+    }): ItemUpdateApi;
 }
 export interface ItemsContextValue {
     items: Map<string, ItemData>;
-    registerItem: (widgetId: string, options: ItemOptions) => void;
+    registerItem: (widgetId: string, stepId: string, type?: ItemType, maxScore?: number, widgetName?: string) => void;
     unregisterItem: (widgetId: string) => void;
     getItems: () => ItemData[];
+    getItemsByStepId: (stepId: string) => ItemData[];
+    getItemUpdateApi: (widgetId: string) => ItemUpdateApi;
 }
 export interface UseItemsContext {
     (): ItemsContextValue;
@@ -101,6 +140,7 @@ export interface UseLessonEventSubscription {
 export interface TeachariumWidgetApi {
     isEditing: boolean;
     playerMode: "editing" | "preview" | "playbook";
+    stepId: string | undefined;
     events: {
         /**
          * Emit an event with type and params
@@ -111,29 +151,50 @@ export interface TeachariumWidgetApi {
         unsubscribe(eventType: string, listener: EventListener): void;
     };
     React: any;
+    updateVariables: (values: Record<string, VariableValue>) => void;
     hooks: {
-        useNumberExpression: UseNumberExpression;
-        useStringExpression: UseStringExpression;
-        useVariableValue: UseVariableValue;
+        useNumberExpressions: UseNumberExpressions;
+        useStringExpressions: UseStringExpressions;
         useVariableValues: UseVariableValues;
-        useUpdateVariable: (variableName: string) => UseUpdateVariable;
         useMediaUrl: UseMediaUrl;
         useVoiceoverUrl: UseVoiceoverUrl;
         useConditionEvaluation: UseConditionEvaluation;
         useIsItem: UseIsItem;
+        useIsItemWithId: UseIsItemWithId;
         useItemsContext: UseItemsContext;
         useLessonEventEmitter: UseLessonEventEmitter;
         useLessonEventSubscription: UseLessonEventSubscription;
     };
     /**
-     * Create a transient variable that exists only during runtime
-     * Automatically prefixes the variable name with the widget ID
+     * Create a variable that can be either transient (runtime only) or persistent (lesson-wide)
+     * By default, creates a transient variable automatically prefixed with the widget ID
      * Example: addVariable('selectedAnswer', 0) might create 'mcwidget1_selectedAnswer'
-     * @param name - Base name for the variable (will be prefixed with widget ID)
+     *
+     * For lesson-wide variables, pass { scope: "lesson", skipPrefix: true }
+     * Example: addVariable('TotalTime', 0, "number", { scope: "lesson", skipPrefix: true })
+     *
+     * @param name - Base name for the variable (will be prefixed with widget ID unless skipPrefix is true)
      * @param initialValue - Initial value for the variable
      * @param type - Optional type specification (auto-inferred if not provided)
+     * @param options - Optional configuration for the variable
      * @returns The full variable name that was created
      */
-    addVariable: (name: string, initialValue: VariableValue, type?: "string" | "number" | "boolean") => string;
+    addVariable: (name: string, initialValue: VariableValue, type?: "string" | "number" | "boolean", options?: {
+        scope?: "lesson" | "step";
+        skipPrefix?: boolean;
+        description?: string;
+    }) => string;
+    /**
+     * Increment a numeric variable by a specified amount
+     * @param name - Variable name to increment
+     * @param amount - Amount to increment by (default: 1)
+     */
+    incrementVariable: (name: string, amount?: number) => void;
+    /**
+     * Decrement a numeric variable by a specified amount
+     * @param name - Variable name to decrement
+     * @param amount - Amount to decrement by (default: 1)
+     */
+    decrementVariable: (name: string, amount?: number) => void;
 }
 export {};

package/dist/teacharium-widget.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { DefaultComponentProps, Fields, PuckComponent } from '@measured/puck';
 import { TeachariumWidgetApi } from './teacharium-widget-api';
 import { TeachariumCustomFields } from './teacharium-custom-fields';
@@ -12,11 +13,19 @@ export interface TeachariumComponentConfig<T = {}> {
         props: any;
         changed: any;
     }) => Promise<any>;
+    resolveFields?: (data: unknown, context: {
+        fields: Fields<DefaultComponentProps, TeachariumCustomFields>;
+    }) => Fields<DefaultComponentProps, TeachariumCustomFields>;
     render: PuckComponent<T & TeachariumComponentProps>;
 }
 export interface TeachariumWidget<T> {
     name: string;
     category: string;
+    description?: string;
+    aiPrompt?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }> | string;
     config: TeachariumComponentConfig<T>;
 }
 export declare const registerWidget: (widget: TeachariumWidget<any>) => void;

package/dist/teacharium-widget.es.js

@@ -1,10 +1,10 @@
 import * as x from "react";
-import ae from "react";
-import { VolumeX as Q, Loader2 as oe, Pause as se, Play as le, Volume2 as ie } from "lucide-react";
-const pe = (t) => {
-  window.TeachariumComponents = window.TeachariumComponents || {}, window.TeachariumComponents[t.name] = t;
-}, Re = () => Object.values(window.TeachariumComponents || {}), _e = "player", Te = "footer";
-var M = { exports: {} }, O = {};
+import oe from "react";
+import { VolumeX as Q, Loader2 as ae, Pause as se, Play as ce, Volume2 as ie } from "lucide-react";
+const be = (n) => {
+  window.TeachariumComponents = window.TeachariumComponents || {}, window.TeachariumComponents[n.name] = n;
+}, Re = () => Object.values(window.TeachariumComponents || {}), Te = "player", ye = "footer";
+var M = { exports: {} }, k = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -15,28 +15,28 @@ var M = { exports: {} }, O = {};
  * LICENSE file in the root directory of this source tree.
  */
 var K;
-function ce() {
-  if (K) return O;
+function le() {
+  if (K) return k;
   K = 1;
-  var t = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
-  function n(E, l, i) {
-    var o = null;
-    if (i !== void 0 && (o = "" + i), l.key !== void 0 && (o = "" + l.key), "key" in l) {
-      i = {};
-      for (var m in l)
-        m !== "key" && (i[m] = l[m]);
-    } else i = l;
-    return l = i.ref, {
-      $$typeof: t,
-      type: E,
-      key: o,
-      ref: l !== void 0 ? l : null,
-      props: i
+  var n = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+  function t(m, i, l) {
+    var s = null;
+    if (l !== void 0 && (s = "" + l), i.key !== void 0 && (s = "" + i.key), "key" in i) {
+      l = {};
+      for (var E in i)
+        E !== "key" && (l[E] = i[E]);
+    } else l = i;
+    return i = l.ref, {
+      $$typeof: n,
+      type: m,
+      key: s,
+      ref: i !== void 0 ? i : null,
+      props: l
     };
   }
-  return O.Fragment = d, O.jsx = n, O.jsxs = n, O;
+  return k.Fragment = o, k.jsx = t, k.jsxs = t, k;
 }
-var k = {};
+var O = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -49,19 +49,19 @@ var k = {};
 var ee;
 function ue() {
   return ee || (ee = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(e) {
+    function n(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === I ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case T:
+        case y:
           return "Fragment";
-        case $:
+        case W:
           return "Profiler";
         case R:
           return "StrictMode";
-        case y:
+        case _:
           return "Suspense";
         case N:
           return "SuspenseList";
@@ -72,72 +72,72 @@ function ue() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case $:
             return "Portal";
           case S:
             return (e.displayName || "Context") + ".Provider";
           case D:
             return (e._context.displayName || "Context") + ".Consumer";
-          case s:
+          case c:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case L:
-            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
           case j:
             r = e._payload, e = e._init;
             try {
-              return t(e(r));
+              return n(e(r));
             } catch {
             }
         }
       return null;
     }
-    function d(e) {
+    function o(e) {
       return "" + e;
     }
-    function n(e) {
+    function t(e) {
       try {
-        d(e);
+        o(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var a = r.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        var a = r.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return a.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          c
-        ), d(e);
+          u
+        ), o(e);
       }
     }
-    function E(e) {
-      if (e === T) return "<>";
+    function m(e) {
+      if (e === y) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === j)
         return "<...>";
       try {
-        var r = t(e);
+        var r = n(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function l() {
-      var e = g.A;
+    function i() {
+      var e = h.A;
       return e === null ? null : e.getOwner();
     }
-    function i() {
+    function l() {
       return Error("react-stack-top-frame");
     }
-    function o(e) {
+    function s(e) {
       if (G.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, r) {
+    function E(e, r) {
       function a() {
         H || (H = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
@@ -150,18 +150,18 @@ function ue() {
       });
     }
     function w() {
-      var e = t(this.type);
+      var e = n(this.type);
       return z[e] || (z[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function A(e, r, a, c, _, v, V, J) {
-      return a = v.ref, e = {
+    function A(e, r, a, u, T, p, V, J) {
+      return a = p.ref, e = {
         $$typeof: C,
         type: e,
         key: r,
-        props: v,
-        _owner: _
+        props: p,
+        _owner: T
       }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: w
@@ -187,51 +187,51 @@ function ue() {
         value: J
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function b(e, r, a, c, _, v, V, J) {
-      var u = r.children;
-      if (u !== void 0)
-        if (c)
-          if (te(u)) {
-            for (c = 0; c < u.length; c++)
-              P(u[c]);
-            Object.freeze && Object.freeze(u);
+    function v(e, r, a, u, T, p, V, J) {
+      var d = r.children;
+      if (d !== void 0)
+        if (u)
+          if (te(d)) {
+            for (u = 0; u < d.length; u++)
+              P(d[u]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else P(u);
+        else P(d);
       if (G.call(r, "key")) {
-        u = t(e);
-        var h = Object.keys(r).filter(function(ne) {
+        d = n(e);
+        var g = Object.keys(r).filter(function(ne) {
           return ne !== "key";
         });
-        c = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", Z[u + c] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", Z[d + u] || (g = 0 < g.length ? "{" + g.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          c,
           u,
-          h,
-          u
-        ), Z[u + c] = !0);
+          d,
+          g,
+          d
+        ), Z[d + u] = !0);
       }
-      if (u = null, a !== void 0 && (n(a), u = "" + a), o(r) && (n(r.key), u = "" + r.key), "key" in r) {
+      if (d = null, a !== void 0 && (t(a), d = "" + a), s(r) && (t(r.key), d = "" + r.key), "key" in r) {
         a = {};
         for (var q in r)
           q !== "key" && (a[q] = r[q]);
       } else a = r;
-      return u && m(
+      return d && E(
         a,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), A(
         e,
-        u,
-        v,
-        _,
-        l(),
+        d,
+        p,
+        T,
+        i(),
         a,
         V,
         J
@@ -240,48 +240,48 @@ React keys must be passed directly to JSX without using spread:
     function P(e) {
       typeof e == "object" && e !== null && e.$$typeof === C && e._store && (e._store.validated = 1);
     }
-    var p = ae, C = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), $ = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), S = Symbol.for("react.context"), s = Symbol.for("react.forward_ref"), y = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), L = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), Y = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), g = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, te = Array.isArray, U = console.createTask ? console.createTask : function() {
+    var b = oe, C = Symbol.for("react.transitional.element"), $ = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), W = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), S = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), L = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), Y = Symbol.for("react.activity"), I = Symbol.for("react.client.reference"), h = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, te = Array.isArray, U = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
+    b = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var H, z = {}, X = p.react_stack_bottom_frame.bind(
-      p,
-      i
-    )(), B = U(E(i)), Z = {};
-    k.Fragment = T, k.jsx = function(e, r, a, c, _) {
-      var v = 1e4 > g.recentlyCreatedOwnerStacks++;
-      return b(
+    var H, z = {}, X = b.react_stack_bottom_frame.bind(
+      b,
+      l
+    )(), B = U(m(l)), Z = {};
+    O.Fragment = y, O.jsx = function(e, r, a, u, T) {
+      var p = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
         a,
         !1,
-        c,
-        _,
-        v ? Error("react-stack-top-frame") : X,
-        v ? U(E(e)) : B
+        u,
+        T,
+        p ? Error("react-stack-top-frame") : X,
+        p ? U(m(e)) : B
       );
-    }, k.jsxs = function(e, r, a, c, _) {
-      var v = 1e4 > g.recentlyCreatedOwnerStacks++;
-      return b(
+    }, O.jsxs = function(e, r, a, u, T) {
+      var p = 1e4 > h.recentlyCreatedOwnerStacks++;
+      return v(
         e,
         r,
         a,
         !0,
-        c,
-        _,
-        v ? Error("react-stack-top-frame") : X,
-        v ? U(E(e)) : B
+        u,
+        T,
+        p ? Error("react-stack-top-frame") : X,
+        p ? U(m(e)) : B
       );
     };
-  })()), k;
+  })()), O;
 }
 var re;
 function de() {
-  return re || (re = 1, process.env.NODE_ENV === "production" ? M.exports = ce() : M.exports = ue()), M.exports;
+  return re || (re = 1, process.env.NODE_ENV === "production" ? M.exports = le() : M.exports = ue()), M.exports;
 }
 var f = de();
 const fe = {
@@ -300,28 +300,28 @@ const fe = {
   //       { label: "Partial", value: "partial" },
   //     ],
   //   },
-}, me = ({ margin: t, children: d }) => {
-  const n = {};
-  return t && (n.padding = `${t}px`), /* @__PURE__ */ f.jsx("div", { style: n, children: d });
-}, ye = (t) => {
-  const d = t.render;
+}, me = ({ margin: n, children: o }) => {
+  const t = {};
+  return n && (t.padding = `${n}px`), /* @__PURE__ */ f.jsx("div", { style: t, children: o });
+}, _e = (n) => {
+  const o = n.render;
   return {
-    ...t,
-    render: (n) => /* @__PURE__ */ f.jsx(me, { ...n, children: /* @__PURE__ */ f.jsx(d, { ...n }) }),
+    ...n,
+    render: (t) => /* @__PURE__ */ f.jsx(me, { ...t, children: /* @__PURE__ */ f.jsx(o, { ...t }) }),
     fields: {
-      ...t.fields,
+      ...n.fields,
       ...fe
     }
   };
-}, F = (...t) => t.filter(Boolean).join(" "), ge = ({
-  audioUrl: t,
-  className: d,
-  size: n = "sm",
-  onPlay: E,
-  onPause: l,
-  onError: i
+}, F = (...n) => n.filter(Boolean).join(" "), he = ({
+  audioUrl: n,
+  className: o,
+  size: t = "sm",
+  onPlay: m,
+  onPause: i,
+  onError: l
 }) => {
-  const o = x.useRef(null), [m, w] = x.useState(!1), [A, b] = x.useState(!1), [P, p] = x.useState(null), [C, W] = x.useState(!1), T = {
+  const s = x.useRef(null), [E, w] = x.useState(!1), [A, v] = x.useState(!1), [P, b] = x.useState(null), [C, $] = x.useState(!1), y = {
     sm: "h-6 w-6",
     md: "h-8 w-8",
     lg: "h-10 w-10"
@@ -329,40 +329,40 @@ const fe = {
     sm: 12,
     md: 16,
     lg: 20
-  }, $ = async () => {
-    if (o.current)
+  }, W = async () => {
+    if (s.current)
       try {
-        b(!0), p(null), m ? o.current.pause() : await o.current.play();
-      } catch (s) {
-        const y = s instanceof Error ? s.message : "Failed to play audio";
-        p(y), i?.(y);
+        v(!0), b(null), E ? s.current.pause() : await s.current.play();
+      } catch (c) {
+        const _ = c instanceof Error ? c.message : "Failed to play audio";
+        b(_), l?.(_);
       } finally {
-        b(!1);
+        v(!1);
       }
   }, D = () => {
-    o.current && (o.current.muted = !o.current.muted, W(o.current.muted));
+    s.current && (s.current.muted = !s.current.muted, $(s.current.muted));
   };
   x.useEffect(() => {
-    const s = o.current;
-    if (!s) return;
-    const y = () => {
-      w(!0), E?.();
+    const c = s.current;
+    if (!c) return;
+    const _ = () => {
+      w(!0), m?.();
     }, N = () => {
-      w(!1), l?.();
+      w(!1), i?.();
     }, L = () => {
-      w(!1), l?.();
+      w(!1), i?.();
     }, j = () => {
-      b(!0);
+      v(!0);
     }, Y = () => {
-      b(!1);
+      v(!1);
     }, I = () => {
-      const g = "Failed to load audio";
-      p(g), b(!1), i?.(g);
+      const h = "Failed to load audio";
+      b(h), v(!1), l?.(h);
     };
-    return s.addEventListener("play", y), s.addEventListener("pause", N), s.addEventListener("ended", L), s.addEventListener("loadstart", j), s.addEventListener("canplay", Y), s.addEventListener("error", I), () => {
-      s.removeEventListener("play", y), s.removeEventListener("pause", N), s.removeEventListener("ended", L), s.removeEventListener("loadstart", j), s.removeEventListener("canplay", Y), s.removeEventListener("error", I);
+    return c.addEventListener("play", _), c.addEventListener("pause", N), c.addEventListener("ended", L), c.addEventListener("loadstart", j), c.addEventListener("canplay", Y), c.addEventListener("error", I), () => {
+      c.removeEventListener("play", _), c.removeEventListener("pause", N), c.removeEventListener("ended", L), c.removeEventListener("loadstart", j), c.removeEventListener("canplay", Y), c.removeEventListener("error", I);
     };
-  }, [E, l, i]);
+  }, [m, i, l]);
   const S = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background bg-transparent hover:bg-gray-100";
   return P ? /* @__PURE__ */ f.jsx(
     "button",
@@ -370,55 +370,87 @@ const fe = {
       type: "button",
       className: F(
         S,
-        T[n],
+        y[t],
         "text-red-500",
-        d
+        o
       ),
       disabled: !0,
-      children: /* @__PURE__ */ f.jsx(Q, { size: R[n] })
+      children: /* @__PURE__ */ f.jsx(Q, { size: R[t] })
     }
-  ) : /* @__PURE__ */ f.jsxs("div", { className: F("flex items-center gap-1", d), children: [
-    /* @__PURE__ */ f.jsx("audio", { ref: o, src: t, preload: "metadata" }),
+  ) : /* @__PURE__ */ f.jsxs("div", { className: F("flex items-center gap-1", o), children: [
+    /* @__PURE__ */ f.jsx("audio", { ref: s, src: n, preload: "metadata" }),
     /* @__PURE__ */ f.jsx(
       "button",
       {
         type: "button",
-        className: F(S, T[n]),
-        onClick: $,
+        className: F(S, y[t]),
+        onClick: W,
         disabled: A,
-        children: A ? /* @__PURE__ */ f.jsx(oe, { size: R[n], className: "animate-spin" }) : m ? /* @__PURE__ */ f.jsx(se, { size: R[n] }) : /* @__PURE__ */ f.jsx(le, { size: R[n] })
+        children: A ? /* @__PURE__ */ f.jsx(ae, { size: R[t], className: "animate-spin" }) : E ? /* @__PURE__ */ f.jsx(se, { size: R[t] }) : /* @__PURE__ */ f.jsx(ce, { size: R[t] })
       }
     ),
-    n !== "sm" && /* @__PURE__ */ f.jsx(
+    t !== "sm" && /* @__PURE__ */ f.jsx(
       "button",
       {
         type: "button",
-        className: F(S, T[n]),
+        className: F(S, y[t]),
         onClick: D,
-        children: C ? /* @__PURE__ */ f.jsx(Q, { size: R[n] }) : /* @__PURE__ */ f.jsx(ie, { size: R[n] })
+        children: C ? /* @__PURE__ */ f.jsx(Q, { size: R[t] }) : /* @__PURE__ */ f.jsx(ie, { size: R[t] })
       }
     )
   ] });
 }, Ee = "SHA-256";
-async function he(t) {
-  const d = globalThis.crypto?.subtle;
-  if (!d)
+async function ge(n) {
+  const o = globalThis.crypto?.subtle;
+  if (!o)
     throw new Error("Web Crypto is not available to compute voiceover hashes");
-  const E = new TextEncoder().encode(t), l = await d.digest(Ee, E), i = new Uint8Array(l);
-  let o = "";
-  for (let m = 0; m < i.length; m += 1)
-    o += i[m].toString(16).padStart(2, "0");
-  return o;
+  const m = new TextEncoder().encode(n), i = await o.digest(Ee, m), l = new Uint8Array(i);
+  let s = "";
+  for (let E = 0; E < l.length; E += 1)
+    s += l[E].toString(16).padStart(2, "0");
+  return s;
+}
+function xe(n, o) {
+  !o || o.length === 0 || o.forEach((t) => {
+    if (!t.actionType) {
+      console.warn("Skipping action with no actionType:", t);
+      return;
+    }
+    try {
+      n.events.emit({
+        type: t.actionType,
+        params: t.parameters || {}
+      });
+    } catch (m) {
+      console.error(`Error executing action ${t.actionType}:`, m);
+    }
+  });
+}
+function we(n, o) {
+  if (!o || !o.actionType) {
+    console.warn("Cannot execute action with no actionType:", o);
+    return;
+  }
+  try {
+    n.events.emit({
+      type: o.actionType,
+      params: o.parameters || {}
+    });
+  } catch (t) {
+    console.error(`Error executing action ${o.actionType}:`, t);
+  }
 }
-const xe = "world";
+const Se = "world";
 export {
-  ge as AudioPlayer,
-  Te as EVENT_SOURCE_FOOTER,
-  _e as EVENT_SOURCE_PLAYER,
+  he as AudioPlayer,
+  ye as EVENT_SOURCE_FOOTER,
+  Te as EVENT_SOURCE_PLAYER,
   me as LayoutContainer,
-  ye as addStandardLayoutOptions,
-  he as getVoiceoverHash,
+  _e as addStandardLayoutOptions,
+  we as executeAction,
+  xe as executeActions,
+  ge as getVoiceoverHash,
   Re as getWidgets,
-  xe as hi,
-  pe as registerWidget
+  Se as hi,
+  be as registerWidget
 };

package/dist/utils/actions.d.ts

@@ -0,0 +1,39 @@
+import { TeachariumWidgetApi } from '../teacharium-widget-api';
+/**
+ * Action configuration type
+ */
+export interface ActionConfiguration {
+    actionType: string;
+    parameters: Record<string, unknown>;
+}
+/**
+ * Execute multiple actions in sequence
+ *
+ * @param api - The TeachariumWidgetApi instance
+ * @param actions - Array of action configurations to execute
+ *
+ * @example
+ * ```typescript
+ * executeActions(api, [
+ *   { actionType: "setVariable", parameters: { variableName: "score", value: 10 } },
+ *   { actionType: "showFeedback", parameters: { message: "Great!", variant: "correct" } },
+ *   { actionType: "nextStep", parameters: {} }
+ * ]);
+ * ```
+ */
+export declare function executeActions(api: TeachariumWidgetApi, actions: ActionConfiguration[]): void;
+/**
+ * Execute a single action
+ *
+ * @param api - The TeachariumWidgetApi instance
+ * @param action - Action configuration to execute
+ *
+ * @example
+ * ```typescript
+ * executeAction(api, {
+ *   actionType: "nextStep",
+ *   parameters: {}
+ * });
+ * ```
+ */
+export declare function executeAction(api: TeachariumWidgetApi, action: ActionConfiguration): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teacharium/widget",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "files": [
     "dist"
@@ -11,8 +11,8 @@
     "@measured/puck": "^0.20.2",
     "@next/eslint-plugin-next": "^15.5.4",
     "lucide-react": "^0.511.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react": "19.1.2",
+    "react-dom": "19.1.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
@@ -32,6 +32,7 @@
     "dev": "tsc -b && vite build --watch",
     "build:watch": "tsc -b && vite build --watch",
     "build": "tsc -b && vite build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit"
   }
 }