wp-typia 0.21.0 → 0.22.0

package/dist-bunli/{cli-pav309dt.js → cli-1w5vkye4.js}

@@ -1,10 +1,10 @@
 // @bun
 import {
   getPackageVersions
-} from "./cli-syg9qpxw.js";
+} from "./cli-39er8888.js";
 import {
   seedProjectMigrations
-} from "./cli-jfj54qej.js";
+} from "./cli-e623rs7g.js";
 import {
   ensureMigrationDirectories,
   isPlainObject,
@@ -59,7 +59,7 @@ import {
   toTitleCase,
   validateBlockSlug,
   validateNamespace
-} from "./cli-hx88xwr4.js";
+} from "./cli-j180bk07.js";
 import {
   createManagedTempRoot
 } from "./cli-t73q5aqz.js";
@@ -5278,6 +5278,17 @@ function buildInteractivityTypesSource(variables, attributes) {
           { name: "maxClicks", typeExpression: "number" }
         ],
         name: `${variables.pascalCase}Context`
+      },
+      {
+        members: [
+          { name: "clicks", typeExpression: "number" },
+          { name: "isAnimating", typeExpression: "boolean" },
+          { name: "isVisible", typeExpression: "boolean" },
+          { name: "progress", typeExpression: "number" },
+          { name: "clampedClicks", typeExpression: "number" },
+          { name: "isComplete", typeExpression: "boolean" }
+        ],
+        name: `${variables.pascalCase}State`
       }
     ],
     typeAliases: [
@@ -12037,6 +12048,41 @@ async function resolveTemplateSource(templateId, cwd, variables, variant) {
   }
 }
 
+// ../wp-typia-project-tools/src/runtime/version-floor.ts
+function parseVersionFloorParts(value) {
+  return value.split(".").map((part, index) => {
+    if (!/^\d+$/u.test(part)) {
+      throw new Error(`parseVersionFloorParts received an invalid version floor "${value}" at segment ${index + 1}.`);
+    }
+    return Number.parseInt(part, 10);
+  });
+}
+function compareVersionFloors(left, right) {
+  const leftParts = parseVersionFloorParts(left);
+  const rightParts = parseVersionFloorParts(right);
+  const length = Math.max(leftParts.length, rightParts.length);
+  for (let index = 0;index < length; index += 1) {
+    const leftValue = leftParts[index] ?? 0;
+    const rightValue = rightParts[index] ?? 0;
+    if (leftValue > rightValue) {
+      return 1;
+    }
+    if (leftValue < rightValue) {
+      return -1;
+    }
+  }
+  return 0;
+}
+function pickHigherVersionFloor(current, candidate) {
+  if (!candidate) {
+    return current;
+  }
+  if (!current) {
+    return candidate;
+  }
+  return compareVersionFloors(current, candidate) >= 0 ? current : candidate;
+}
+
 // ../wp-typia-project-tools/src/runtime/ai-feature-capability.ts
 var AI_FEATURE_DEFINITIONS = {
   wordpressAiClient: {
@@ -12101,39 +12147,6 @@ var DEFAULT_AI_FEATURE_REGISTRY = Object.values(AI_FEATURE_DEFINITIONS).reduce((
   accumulator[definition.id] = definition;
   return accumulator;
 }, {});
-function parseVersionFloorParts(value) {
-  return value.split(".").map((part, index) => {
-    if (!/^\d+$/.test(part)) {
-      throw new Error(`parseVersionFloorParts received an invalid version floor "${value}" at segment ${index + 1}.`);
-    }
-    return Number.parseInt(part, 10);
-  });
-}
-function compareVersionFloors(left, right) {
-  const leftParts = parseVersionFloorParts(left);
-  const rightParts = parseVersionFloorParts(right);
-  const length = Math.max(leftParts.length, rightParts.length);
-  for (let index = 0;index < length; index += 1) {
-    const leftValue = leftParts[index] ?? 0;
-    const rightValue = rightParts[index] ?? 0;
-    if (leftValue > rightValue) {
-      return 1;
-    }
-    if (leftValue < rightValue) {
-      return -1;
-    }
-  }
-  return 0;
-}
-function pickHigherVersionFloor(current, candidate) {
-  if (!candidate) {
-    return current;
-  }
-  if (!current) {
-    return candidate;
-  }
-  return compareVersionFloors(current, candidate) >= 0 ? current : candidate;
-}
 function normalizeSelections(selections) {
   const normalized = new Map;
   for (const selection of selections) {
@@ -12198,35 +12211,8 @@ var REQUIRED_WORKSPACE_ABILITY_COMPATIBILITY = [
     mode: "required"
   }
 ];
-function parseVersionFloorParts2(value) {
-  return value.split(".").map((part, index) => {
-    if (!/^\d+$/u.test(part)) {
-      throw new Error(`parseVersionFloorParts received an invalid version floor "${value}" at segment ${index + 1}.`);
-    }
-    return Number.parseInt(part, 10);
-  });
-}
-function compareVersionFloors2(left, right) {
-  const leftParts = parseVersionFloorParts2(left);
-  const rightParts = parseVersionFloorParts2(right);
-  const length = Math.max(leftParts.length, rightParts.length);
-  for (let index = 0;index < length; index += 1) {
-    const leftValue = leftParts[index] ?? 0;
-    const rightValue = rightParts[index] ?? 0;
-    if (leftValue > rightValue) {
-      return 1;
-    }
-    if (leftValue < rightValue) {
-      return -1;
-    }
-  }
-  return 0;
-}
-function pickHigherVersionFloor2(current, candidate) {
-  if (!candidate) {
-    return current;
-  }
-  return compareVersionFloors2(current, candidate) >= 0 ? current : candidate;
+function pickHigherScaffoldVersionFloor(current, candidate) {
+  return pickHigherVersionFloor(current, candidate) ?? current;
 }
 function pickHigherHeaderVersionFloor(policyValue, currentValue) {
   const normalizedCurrentValue = currentValue.trim();
@@ -12234,7 +12220,7 @@ function pickHigherHeaderVersionFloor(policyValue, currentValue) {
     return policyValue;
   }
   try {
-    return pickHigherVersionFloor2(policyValue, normalizedCurrentValue);
+    return pickHigherScaffoldVersionFloor(policyValue, normalizedCurrentValue);
   } catch {
     return policyValue;
   }
@@ -12255,9 +12241,9 @@ function resolveScaffoldCompatibilityPolicy(selections, {
   baseline = DEFAULT_SCAFFOLD_COMPATIBILITY
 } = {}) {
   const capabilityPlan = resolveAiFeatureCapabilityPlan(selections);
-  const requiresAtLeast = pickHigherVersionFloor2(baseline.requiresAtLeast, capabilityPlan.hardMinimums.wordpress);
-  const requiresPhp = pickHigherVersionFloor2(baseline.requiresPhp, capabilityPlan.hardMinimums.php);
-  const testedUpTo = pickHigherVersionFloor2(baseline.testedUpTo, requiresAtLeast);
+  const requiresAtLeast = pickHigherScaffoldVersionFloor(baseline.requiresAtLeast, capabilityPlan.hardMinimums.wordpress);
+  const requiresPhp = pickHigherScaffoldVersionFloor(baseline.requiresPhp, capabilityPlan.hardMinimums.php);
+  const testedUpTo = pickHigherScaffoldVersionFloor(baseline.testedUpTo, requiresAtLeast);
   return {
     capabilityPlan,
     pluginHeader: {
@@ -14060,6 +14046,7 @@ import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToo
 import { PanelBody, RangeControl, Button, Notice } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import currentManifest from './manifest-document';
+import { {{slugCamelCase}}Store } from './interactivity-store';
 import {
   InspectorFromManifest,
   useEditorFields,
@@ -14140,17 +14127,22 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
 
   const blockProps = useBlockProps({
     className: \`{{cssClassName}} {{cssClassName}}--\${interactiveMode}\`,
-    'data-wp-interactive': '{{slugKebabCase}}',
-    'data-wp-context': JSON.stringify({
-      clicks: clickCount,
-      isAnimating,
-      isVisible,
-      animation,
-      maxClicks,
-    })
+    'data-wp-interactive': {{slugCamelCase}}Store.directive.interactive,
+    'data-wp-context': JSON.stringify(
+      {{slugCamelCase}}Store.createContext({
+        clicks: clickCount,
+        isAnimating,
+        isVisible,
+        animation,
+        maxClicks,
+      })
+    )
   });
   const previewContentStyle = { textAlign: alignmentValue };
   const progressBarStyle = { width: \`\${(clickCount / maxClicks) * 100}%\` };
+  const clicksDirective = {{slugCamelCase}}Store.directive.state('clicks');
+  const isAnimatingDirective = {{slugCamelCase}}Store.directive.state('isAnimating');
+  const progressDirective = {{slugCamelCase}}Store.directive.state('progress') + " + '%'";
 
   const resetCounter = () => {
     updateField('clickCount', 0);
@@ -14247,9 +14239,9 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
         <div
           className={\`{{cssClassName}}__content \${isAnimating ? 'is-animating' : ''}\`}
           style={previewContentStyle}
-          data-wp-on--click={isPreviewing ? 'actions.handleClick' : undefined}
-          data-wp-on--mouseenter={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
-          data-wp-on--mouseleave={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
+          data-wp-on--click={isPreviewing ? {{slugCamelCase}}Store.directive.action('handleClick') : undefined}
+          data-wp-on--mouseenter={isPreviewing && interactiveMode === 'hover' ? {{slugCamelCase}}Store.directive.action('handleMouseEnter') : undefined}
+          data-wp-on--mouseleave={isPreviewing && interactiveMode === 'hover' ? {{slugCamelCase}}Store.directive.action('handleMouseLeave') : undefined}
         >
           <RichText
             tagName="p"
@@ -14278,7 +14270,7 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
               </span>
               <span
                 className="{{cssClassName}}__counter-value"
-                data-wp-text="state.clicks"
+                data-wp-text={clicksDirective}
               >
                 {clickCount}
               </span>
@@ -14290,7 +14282,7 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
               <div
                 className="{{cssClassName}}__progress-bar"
                 style={progressBarStyle}
-                data-wp-style--width="state.progress + '%'"
+                data-wp-style--width={progressDirective}
               />
             </div>
           )}
@@ -14298,7 +14290,7 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
           {animation !== 'none' && (
             <div
               className={\`{{cssClassName}}__animation \${isAnimating ? 'is-active' : ''}\`}
-              data-wp-class--is-active="state.isAnimating"
+              data-wp-class--is-active={isAnimatingDirective}
             >
               {animation}
             </div>
@@ -14311,6 +14303,7 @@ export default function Edit({ attributes, setAttributes, isSelected }: EditProp
 `;
 var INTERACTIVITY_SAVE_TEMPLATE = `import { useBlockProps, RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { {{slugCamelCase}}Store } from './interactivity-store';
 import type { {{pascalCase}}Attributes } from './types';
 
 export default function Save({ attributes }: { attributes: {{pascalCase}}Attributes }) {
@@ -14322,27 +14315,41 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
   const maxClicks = attributes.maxClicks ?? 0;
   const showCounter = attributes.showCounter ?? true;
   const contentStyle = { textAlign: attributes.alignment };
+  const clickActionDirective = {{slugCamelCase}}Store.directive.action('handleClick');
+  const visibilityHiddenDirective = {{slugCamelCase}}Store.directive.negate(
+    {{slugCamelCase}}Store.directive.state('isVisible')
+  );
+  const clicksDirective = {{slugCamelCase}}Store.directive.state('clicks');
+  const clampedClicksDirective = {{slugCamelCase}}Store.directive.state('clampedClicks');
+  const isAnimatingDirective = {{slugCamelCase}}Store.directive.state('isAnimating');
+  const completionHiddenDirective = {{slugCamelCase}}Store.directive.negate(
+    {{slugCamelCase}}Store.directive.state('isComplete')
+  );
+  const resetActionDirective = {{slugCamelCase}}Store.directive.action('reset');
   const blockProps = useBlockProps.save({
     className: \`{{cssClassName}} {{cssClassName}}--\${interactiveMode}\`,
-    'data-wp-interactive': '{{slugKebabCase}}',
-    'data-wp-context': JSON.stringify({
-      clicks: clickCount,
-      isAnimating,
-      isVisible,
-      animation,
-      maxClicks,
-    })
+    'data-wp-interactive': {{slugCamelCase}}Store.directive.interactive,
+    'data-wp-context': JSON.stringify(
+      {{slugCamelCase}}Store.createContext({
+        clicks: clickCount,
+        isAnimating,
+        isVisible,
+        animation,
+        maxClicks,
+      })
+    )
   });
+  const progressDirective = {{slugCamelCase}}Store.directive.state('progress') + " + '%'";
 
   return (
     <div {...blockProps}>
       <div
         className={\`{{cssClassName}}__content \${isAnimating ? 'is-animating' : ''}\`}
         style={contentStyle}
-        data-wp-on--click="actions.handleClick"
-        data-wp-on--mouseenter={interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
-        data-wp-on--mouseleave={interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
-        data-wp-bind--hidden="!state.isVisible"
+        data-wp-on--click={clickActionDirective}
+        data-wp-on--mouseenter={interactiveMode === 'hover' ? {{slugCamelCase}}Store.directive.action('handleMouseEnter') : undefined}
+        data-wp-on--mouseleave={interactiveMode === 'hover' ? {{slugCamelCase}}Store.directive.action('handleMouseLeave') : undefined}
+        data-wp-bind--hidden={visibilityHiddenDirective}
       >
         <RichText.Content
           tagName="p"
@@ -14362,7 +14369,7 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
             </span>
             <span
               className="{{cssClassName}}__counter-value"
-              data-wp-text="state.clicks"
+              data-wp-text={clicksDirective}
             >
               {clickCount}
             </span>
@@ -14378,8 +14385,8 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
               aria-valuemin={0}
               aria-valuemax={maxClicks}
               aria-valuenow={Math.min(clickCount, maxClicks)}
-              data-wp-bind--aria-valuenow="state.clampedClicks"
-              data-wp-style--width="state.progress + '%'"
+              data-wp-bind--aria-valuenow={clampedClicksDirective}
+              data-wp-style--width={progressDirective}
             />
           </div>
         )}
@@ -14387,7 +14394,7 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
         <div
           className={\`{{cssClassName}}__animation \${animation}\`}
           aria-hidden="true"
-          data-wp-class--is-active="state.isAnimating"
+          data-wp-class--is-active={isAnimatingDirective}
         />
 
         {maxClicks > 0 && (
@@ -14396,7 +14403,7 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
             role="status"
             aria-live="polite"
             aria-atomic="true"
-            data-wp-bind--hidden="!state.isComplete"
+            data-wp-bind--hidden={completionHiddenDirective}
           >
             { __( '\uD83C\uDF89 Complete!', '{{textDomain}}' ) }
           </div>
@@ -14404,7 +14411,7 @@ export default function Save({ attributes }: { attributes: {{pascalCase}}Attribu
 
         <button
           className="{{cssClassName}}__reset"
-          data-wp-on--click="actions.reset"
+          data-wp-on--click={resetActionDirective}
           aria-label={ __( 'Reset counter', '{{textDomain}}' ) }
         >
           <span aria-hidden="true">\u21BB</span>
@@ -14454,20 +14461,214 @@ const registration = buildScaffoldBlockRegistration(
 
 registerScaffoldBlockType(registration.name, registration.settings);
 `;
+var INTERACTIVITY_STORE_TEMPLATE = `import type {
+  {{pascalCase}}Context,
+  {{pascalCase}}State,
+} from './types';
+
+type InteractivityActionShape = object;
+type InteractivityCallbackShape = object;
+type InteractivityContextShape = object;
+type InteractivityStateShape = object;
+type InteractivityCallable = Function;
+type InteractivityKey<T extends object> = Extract<keyof T, string>;
+type InteractivityMethodKey<T extends object> = {
+  [Key in InteractivityKey<T>]: T[Key] extends InteractivityCallable ? Key : never;
+}[InteractivityKey<T>];
+
+type InteractivityDirectivePath<
+  Root extends string,
+  Key extends string,
+> = \`\${Root}.\${Key}\`;
+
+type NegatedInteractivityDirectivePath<Path extends string> = \`!\${Path}\`;
+
+export interface TypedInteractivityDirectiveHelpers<
+  State extends InteractivityStateShape,
+  Context extends InteractivityContextShape,
+  Actions extends InteractivityActionShape,
+  Callbacks extends InteractivityCallbackShape,
+  Namespace extends string,
+> {
+  readonly interactive: Namespace;
+  action<Key extends InteractivityMethodKey<Actions>>(
+    key: Key,
+  ): InteractivityDirectivePath<'actions', Key>;
+  callback<Key extends InteractivityMethodKey<Callbacks>>(
+    key: Key,
+  ): InteractivityDirectivePath<'callbacks', Key>;
+  state<Key extends InteractivityKey<State>>(
+    key: Key,
+  ): InteractivityDirectivePath<'state', Key>;
+  context<Key extends InteractivityKey<Context>>(
+    key: Key,
+  ): InteractivityDirectivePath<'context', Key>;
+  negate<Path extends string>(
+    path: Path,
+  ): NegatedInteractivityDirectivePath<Path>;
+}
+
+export interface TypedInteractivityStore<
+  Namespace extends string,
+  State extends InteractivityStateShape,
+  Context extends InteractivityContextShape,
+  Actions extends InteractivityActionShape,
+  Callbacks extends InteractivityCallbackShape,
+> {
+  readonly namespace: Namespace;
+  readonly state: State;
+  readonly context: Context;
+  readonly actions: Actions;
+  readonly callbacks: Callbacks;
+  readonly directive: TypedInteractivityDirectiveHelpers<
+    State,
+    Context,
+    Actions,
+    Callbacks,
+    Namespace
+  >;
+  createContext(value: Context): Context;
+}
+
+export function defineInteractivityStore<
+  Namespace extends string,
+  State extends InteractivityStateShape,
+  Context extends InteractivityContextShape,
+  Actions extends InteractivityActionShape,
+  Callbacks extends InteractivityCallbackShape,
+>(config: {
+  readonly namespace: Namespace;
+  readonly state: State;
+  readonly context: Context;
+  readonly actions: Actions;
+  readonly callbacks: Callbacks;
+}): TypedInteractivityStore<Namespace, State, Context, Actions, Callbacks> {
+  return {
+    namespace: config.namespace,
+    state: config.state,
+    context: config.context,
+    actions: config.actions,
+    callbacks: config.callbacks,
+    directive: {
+      interactive: config.namespace,
+      action<Key extends InteractivityMethodKey<Actions>>(key: Key) {
+        return \`actions.\${key}\` as InteractivityDirectivePath<'actions', Key>;
+      },
+      callback<Key extends InteractivityMethodKey<Callbacks>>(key: Key) {
+        return \`callbacks.\${key}\` as InteractivityDirectivePath<'callbacks', Key>;
+      },
+      state<Key extends InteractivityKey<State>>(key: Key) {
+        return \`state.\${key}\` as InteractivityDirectivePath<'state', Key>;
+      },
+      context<Key extends InteractivityKey<Context>>(key: Key) {
+        return \`context.\${key}\` as InteractivityDirectivePath<'context', Key>;
+      },
+      negate<Path extends string>(path: Path) {
+        return \`!\${path}\` as NegatedInteractivityDirectivePath<Path>;
+      },
+    },
+    createContext(value) {
+      return value;
+    },
+  };
+}
+
+type InteractivityActionHandler = Function;
+
+export interface {{pascalCase}}StoreActions {
+  handleClick: InteractivityActionHandler;
+  handleMouseEnter: InteractivityActionHandler;
+  handleMouseLeave: InteractivityActionHandler;
+  reset: InteractivityActionHandler;
+}
+
+export interface {{pascalCase}}StoreCallbacks {}
+
+export const {{slugCamelCase}}Store = defineInteractivityStore({
+  namespace: '{{slugKebabCase}}',
+  state: {} as {{pascalCase}}State,
+  context: {} as {{pascalCase}}Context,
+  actions: {} as {{pascalCase}}StoreActions,
+  callbacks: {} as {{pascalCase}}StoreCallbacks,
+});
+`;
 var INTERACTIVITY_SCRIPT_TEMPLATE = `/**
  * WordPress Interactivity API implementation for {{title}} block
  */
 import { store, getContext, getElement, withSyncEvent } from '@wordpress/interactivity';
-import type { {{pascalCase}}Context } from './types';
+import {
+  {{slugCamelCase}}Store,
+  type {{pascalCase}}StoreActions,
+} from './interactivity-store';
+import type { {{pascalCase}}Context, {{pascalCase}}State } from './types';
 
 function getBlockContext() {
   return getContext<{{pascalCase}}Context>();
 }
 
-// Store configuration
-store('{{slugKebabCase}}', {
-  // State - reactive data that updates the UI
-  state: {
+const actions: {{pascalCase}}StoreActions = {
+  // Handle block click
+  handleClick: () => {
+    const context = getBlockContext();
+    const { ref } = getElement();
+
+    if (!ref) {
+      return;
+    }
+
+    if (context.maxClicks > 0 && context.clicks >= context.maxClicks) {
+      return;
+    }
+
+    const previousClicks = context.clicks;
+
+    // Increment click counter
+    context.clicks += 1;
+
+    // Trigger animation
+    if (context.animation !== 'none') {
+      context.isAnimating = true;
+      setTimeout(() => {
+        context.isAnimating = false;
+      }, 1000);
+    }
+
+    // Emit custom event
+    ref.dispatchEvent(new CustomEvent('{{slugKebabCase}}:click', {
+      detail: { clicks: context.clicks }
+    }));
+
+    // Check if max clicks reached
+    if (context.maxClicks > 0 && previousClicks < context.maxClicks && context.clicks === context.maxClicks) {
+      ref.dispatchEvent(new CustomEvent('{{slugKebabCase}}:complete', {
+        detail: { totalClicks: context.clicks }
+      }));
+    }
+  },
+
+  // Handle hover events
+  handleMouseEnter: () => {
+    const context = getBlockContext();
+    if (context.animation === 'none') return;
+    context.isAnimating = true;
+  },
+
+  handleMouseLeave: () => {
+    const context = getBlockContext();
+    if (context.animation === 'none') return;
+    context.isAnimating = false;
+  },
+
+  // Reset counter
+  reset: withSyncEvent((event: Event) => {
+    event.stopPropagation();
+    const context = getBlockContext();
+    context.clicks = 0;
+    context.isAnimating = false;
+  })
+};
+
+const state = {
     get clicks() {
       return getBlockContext().clicks;
     },
@@ -14495,70 +14696,14 @@ store('{{slugKebabCase}}', {
       const context = getBlockContext();
       return context.clicks >= context.maxClicks && context.maxClicks > 0;
     }
-  },
-
-  // Actions - user interactions
-  actions: {
-    // Handle block click
-    handleClick: () => {
-      const context = getBlockContext();
-      const { ref } = getElement();
-
-      if (!ref) {
-        return;
-      }
-
-      if (context.maxClicks > 0 && context.clicks >= context.maxClicks) {
-        return;
-      }
-
-      const previousClicks = context.clicks;
-
-      // Increment click counter
-      context.clicks += 1;
+} satisfies {{pascalCase}}State;
 
-      // Trigger animation
-      if (context.animation !== 'none') {
-        context.isAnimating = true;
-        setTimeout(() => {
-          context.isAnimating = false;
-        }, 1000);
-      }
-
-      // Emit custom event
-      ref.dispatchEvent(new CustomEvent('{{slugKebabCase}}:click', {
-        detail: { clicks: context.clicks }
-      }));
-
-      // Check if max clicks reached
-      if (context.maxClicks > 0 && previousClicks < context.maxClicks && context.clicks === context.maxClicks) {
-        ref.dispatchEvent(new CustomEvent('{{slugKebabCase}}:complete', {
-          detail: { totalClicks: context.clicks }
-        }));
-      }
-    },
-
-    // Handle hover events
-    handleMouseEnter: () => {
-      const context = getBlockContext();
-      if (context.animation === 'none') return;
-      context.isAnimating = true;
-    },
-
-    handleMouseLeave: () => {
-      const context = getBlockContext();
-      if (context.animation === 'none') return;
-      context.isAnimating = false;
-    },
-
-    // Reset counter
-    reset: withSyncEvent((event: Event) => {
-      event.stopPropagation();
-      const context = getBlockContext();
-      context.clicks = 0;
-      context.isAnimating = false;
-    })
-  }
+// Store configuration
+store({{slugCamelCase}}Store.namespace, {
+  // State - reactive data that updates the UI
+  state,
+  actions,
+  callbacks: {{slugCamelCase}}Store.callbacks,
 });
 `;
 var INTERACTIVITY_VALIDATORS_TEMPLATE = `import typia from 'typia';
@@ -16371,6 +16516,10 @@ function buildInteractivityCodeArtifacts(variables) {
         relativePath: "src/interactivity.ts",
         template: INTERACTIVITY_SCRIPT_TEMPLATE
       },
+      {
+        relativePath: "src/interactivity-store.ts",
+        template: INTERACTIVITY_STORE_TEMPLATE
+      },
       {
         relativePath: "src/validators.ts",
         template: INTERACTIVITY_VALIDATORS_TEMPLATE
@@ -17133,6 +17282,8 @@ async function resolveOptionalInteractiveExternalLayerId({
   callerCwd,
   externalLayerId,
   externalLayerSource,
+  listExternalTemplateLayers = listSelectableExternalTemplateLayers,
+  resolveExternalTemplateSeed = resolveTemplateSeed,
   selectExternalLayerId
 }) {
   if (!externalLayerSource || externalLayerId || !selectExternalLayerId) {
@@ -17141,9 +17292,9 @@ async function resolveOptionalInteractiveExternalLayerId({
       externalLayerSource
     };
   }
-  const layerSeed = await resolveTemplateSeed(parseTemplateLocator(externalLayerSource), callerCwd);
+  const layerSeed = await resolveExternalTemplateSeed(parseTemplateLocator(externalLayerSource), callerCwd);
   try {
-    const selectableLayers = await listSelectableExternalTemplateLayers(layerSeed.rootDir);
+    const selectableLayers = await listExternalTemplateLayers(layerSeed.rootDir);
     if (selectableLayers.length <= 1) {
       await layerSeed.cleanup?.();
       return {
@@ -17159,7 +17310,6 @@ async function resolveOptionalInteractiveExternalLayerId({
         externalLayerSource: layerSeed.rootDir
       };
     }
-    await layerSeed.cleanup?.();
     throw new Error(`Unknown external layer "${selectedLayerId}". Expected one of: ${selectableLayers.map((layer) => layer.id).join(", ")}`);
   } catch (error) {
     await layerSeed.cleanup?.();
@@ -17169,4 +17319,4 @@ async function resolveOptionalInteractiveExternalLayerId({
 
 export { syncPersistenceRestArtifacts, copyInterpolatedDirectory, listInterpolatedDirectoryOutputs, getPrimaryDevelopmentScript, getOptionalOnboardingSteps, getOptionalOnboardingNote, getOptionalOnboardingShortNote, formatNonEmptyTargetDirectoryError, require_semver2 as require_semver, parseTemplateLocator, resolveExternalTemplateLayers, resolveTemplateSeed, normalizeOptionalCliString, resolveLocalCliPathOption, assertExternalLayerCompositionOptions, assertBuiltInTemplateVariantAllowed, parseAlternateRenderTargets, parseCompoundInnerBlocksPreset, OPTIONAL_WORDPRESS_AI_CLIENT_COMPATIBILITY, REQUIRED_WORKSPACE_ABILITY_COMPATIBILITY, resolveScaffoldCompatibilityPolicy, renderScaffoldCompatibilityConfig, updatePluginHeaderCompatibility, getDefaultAnswers, resolveTemplateId, resolvePackageManagerId, collectScaffoldAnswers, DATA_STORAGE_MODES, PERSISTENCE_POLICIES, isDataStorageMode, isPersistencePolicy, scaffoldProject, resolveOptionalInteractiveExternalLayerId };
 
-//# debugId=EFE0A10933AD252664756E2164756E21
+//# debugId=C53957BD2FAAAD8464756E2164756E21