@wp-typia/project-tools 0.16.10 → 0.16.12

package/dist/runtime/built-in-block-code-templates/interactivity.js

@@ -0,0 +1,547 @@
+export const INTERACTIVITY_EDIT_TEMPLATE = `import type { BlockEditProps } from '@wp-typia/block-types/blocks/registration';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
+import { PanelBody, RangeControl, Button, Notice } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import currentManifest from './manifest-document';
+import {
+  InspectorFromManifest,
+  useEditorFields,
+  useTypedAttributeUpdater,
+} from '@wp-typia/block-runtime/inspector';
+import type { {{pascalCase}}Attributes } from './types';
+import {
+  sanitize{{pascalCase}}Attributes,
+  validate{{pascalCase}}Attributes,
+} from './validators';
+import { useTypiaValidation } from './hooks';
+
+type EditProps = BlockEditProps<{{pascalCase}}Attributes>;
+
+const actionButtonRowStyle = { display: 'flex', gap: '8px', marginTop: '16px' };
+const validationListStyle = { margin: 0, paddingLeft: '1em' };
+
+export default function Edit({ attributes, setAttributes, isSelected }: EditProps) {
+  const [isPreviewing, setIsPreviewing] = useState(false);
+  const editorFields = useEditorFields(currentManifest, {
+    manual: ['content', 'clickCount', 'maxClicks'],
+    labels: {
+      alignment: __('Alignment', '{{textDomain}}'),
+      animation: __('Animation', '{{textDomain}}'),
+      interactiveMode: __('Interactive Mode', '{{textDomain}}'),
+      isVisible: __('Visible', '{{textDomain}}'),
+      showCounter: __('Show Counter', '{{textDomain}}'),
+    },
+  });
+  const { errorMessages, isValid } = useTypiaValidation(
+    attributes,
+    validate{{pascalCase}}Attributes,
+  );
+  const validateEditorUpdate = (nextAttributes: {{pascalCase}}Attributes) => {
+    try {
+      return {
+        data: sanitize{{pascalCase}}Attributes(nextAttributes),
+        errors: [],
+        isValid: true as const,
+      };
+    } catch {
+      return validate{{pascalCase}}Attributes(nextAttributes);
+    }
+  };
+  const { updateField } = useTypedAttributeUpdater(
+    attributes,
+    setAttributes,
+    validateEditorUpdate
+  );
+  const alignmentValue = editorFields.getStringValue(
+    attributes,
+    'alignment',
+    'left'
+  ) as NonNullable<{{pascalCase}}Attributes['alignment']>;
+  const clickCount = attributes.clickCount ?? 0;
+  const isVisible = editorFields.getBooleanValue(
+    attributes,
+    'isVisible',
+    true
+  );
+  const isAnimating = attributes.isAnimating ?? false;
+  const maxClicks = attributes.maxClicks ?? 0;
+  const showCounter = editorFields.getBooleanValue(
+    attributes,
+    'showCounter',
+    true
+  );
+  const interactiveMode = editorFields.getStringValue(
+    attributes,
+    'interactiveMode',
+    'click'
+  ) as NonNullable<{{pascalCase}}Attributes['interactiveMode']>;
+  const animation = editorFields.getStringValue(
+    attributes,
+    'animation',
+    'none'
+  ) as NonNullable<{{pascalCase}}Attributes['animation']>;
+
+  const blockProps = useBlockProps({
+    className: \`{{cssClassName}} {{cssClassName}}--\${interactiveMode}\`,
+    'data-wp-interactive': '{{slugKebabCase}}',
+    'data-wp-context': JSON.stringify({
+      clicks: clickCount,
+      isAnimating,
+      isVisible,
+      animation,
+      maxClicks,
+    })
+  });
+  const previewContentStyle = { textAlign: alignmentValue };
+  const progressBarStyle = { width: \`\${(clickCount / maxClicks) * 100}%\` };
+
+  const resetCounter = () => {
+    updateField('clickCount', 0);
+    updateField('isAnimating', false);
+  };
+
+  const testAnimation = () => {
+    updateField('isAnimating', true);
+    setTimeout(() => {
+      updateField('isAnimating', false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={alignmentValue}
+          onChange={(value) => updateField('alignment', (value || alignmentValue) as NonNullable<{{pascalCase}}Attributes['alignment']>)}
+        />
+      </BlockControls>
+
+      <InspectorControls>
+        <InspectorFromManifest
+          attributes={attributes}
+          fieldLookup={editorFields}
+          onChange={updateField}
+          paths={['alignment', 'interactiveMode', 'animation', 'showCounter', 'isVisible']}
+          title={__('Interactive Settings', '{{textDomain}}')}
+        />
+
+        <PanelBody title={__('Counter Settings', '{{textDomain}}')}>
+          <RangeControl
+            label={__('Max Clicks', '{{textDomain}}')}
+            value={maxClicks}
+            onChange={(value) => updateField('maxClicks', value ?? maxClicks)}
+            min={0}
+            max={100}
+            help={__('Set to 0 for unlimited clicks', '{{textDomain}}')}
+          />
+
+          <div style={actionButtonRowStyle}>
+            <Button
+              variant="secondary"
+              onClick={resetCounter}
+              isSmall
+            >
+              {__('Reset Counter', '{{textDomain}}')}
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={testAnimation}
+              isSmall
+            >
+              {__('Test Animation', '{{textDomain}}')}
+            </Button>
+          </div>
+        </PanelBody>
+
+        {!isValid && (
+          <PanelBody title={__('Validation Errors', '{{textDomain}}')} initialOpen>
+            {errorMessages.map((error, index) => (
+              <Notice key={index} status="error" isDismissible={false}>
+                {error}
+              </Notice>
+            ))}
+          </PanelBody>
+        )}
+
+        {isSelected && (
+          <PanelBody title={__('Preview', '{{textDomain}}')}>
+            <Button
+              variant={isPreviewing ? 'primary' : 'secondary'}
+              onClick={() => setIsPreviewing(!isPreviewing)}
+              aria-pressed={isPreviewing}
+              isSmall
+            >
+              {isPreviewing
+                ? __('Disable Preview Mode', '{{textDomain}}')
+                : __('Enable Preview Mode', '{{textDomain}}')}
+            </Button>
+
+            {clickCount > 0 && (
+              <Notice status="info" isDismissible={false}>
+                {__('Current clicks:', '{{textDomain}}')} {clickCount}
+                {maxClicks > 0 && \` / \${maxClicks}\`}
+              </Notice>
+            )}
+          </PanelBody>
+        )}
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <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}
+        >
+          <RichText
+            tagName="p"
+            value={attributes.content}
+            onChange={(value) => updateField('content', value)}
+            placeholder={__( {{titleJson}} + ' – click me to interact!', '{{textDomain}}')}
+          />
+
+          {!isValid && (
+            <Notice status="error" isDismissible={false}>
+              <p>
+                <strong>{__('Validation Errors', '{{textDomain}}')}</strong>
+              </p>
+              <ul style={validationListStyle}>
+                {errorMessages.map((error, index) => (
+                  <li key={index}>{error}</li>
+                ))}
+              </ul>
+            </Notice>
+          )}
+
+          {showCounter && (
+            <div className="{{cssClassName}}__counter">
+              <span className="{{cssClassName}}__counter-label">
+                {__('Clicks:', '{{textDomain}}')}
+              </span>
+              <span
+                className="{{cssClassName}}__counter-value"
+                data-wp-text="state.clicks"
+              >
+                {clickCount}
+              </span>
+            </div>
+          )}
+
+          {maxClicks > 0 && (
+            <div className="{{cssClassName}}__progress">
+              <div
+                className="{{cssClassName}}__progress-bar"
+                style={progressBarStyle}
+                data-wp-style--width="state.progress + '%'"
+              />
+            </div>
+          )}
+
+          {animation !== 'none' && (
+            <div
+              className={\`{{cssClassName}}__animation \${isAnimating ? 'is-active' : ''}\`}
+              data-wp-class--is-active="state.isAnimating"
+            >
+              {animation}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+`;
+export const INTERACTIVITY_SAVE_TEMPLATE = `import { useBlockProps, RichText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import type { {{pascalCase}}Attributes } from './types';
+
+export default function Save({ attributes }: { attributes: {{pascalCase}}Attributes }) {
+  const clickCount = attributes.clickCount ?? 0;
+  const interactiveMode = attributes.interactiveMode ?? 'click';
+  const animation = attributes.animation ?? 'none';
+  const isAnimating = attributes.isAnimating ?? false;
+  const isVisible = attributes.isVisible ?? true;
+  const maxClicks = attributes.maxClicks ?? 0;
+  const showCounter = attributes.showCounter ?? true;
+  const contentStyle = { textAlign: attributes.alignment };
+  const blockProps = useBlockProps.save({
+    className: \`{{cssClassName}} {{cssClassName}}--\${interactiveMode}\`,
+    'data-wp-interactive': '{{slugKebabCase}}',
+    'data-wp-context': JSON.stringify({
+      clicks: clickCount,
+      isAnimating,
+      isVisible,
+      animation,
+      maxClicks,
+    })
+  });
+
+  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"
+      >
+        <RichText.Content
+          tagName="p"
+          value={attributes.content}
+          className="{{cssClassName}}__text"
+        />
+
+        {showCounter && (
+          <div
+            className="{{cssClassName}}__counter"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <span className="{{cssClassName}}__counter-label">
+              { __( 'Clicks:', '{{textDomain}}' ) }
+            </span>
+            <span
+              className="{{cssClassName}}__counter-value"
+              data-wp-text="state.clicks"
+            >
+              {clickCount}
+            </span>
+          </div>
+        )}
+
+        {maxClicks > 0 && (
+          <div className="{{cssClassName}}__progress">
+            <div
+              className="{{cssClassName}}__progress-bar"
+              role="progressbar"
+              aria-label={ __( 'Click progress', '{{textDomain}}' ) }
+              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 + '%'"
+            />
+          </div>
+        )}
+
+        <div
+          className={\`{{cssClassName}}__animation \${animation}\`}
+          aria-hidden="true"
+          data-wp-class--is-active="state.isAnimating"
+        />
+
+        {maxClicks > 0 && (
+          <div
+            className="{{cssClassName}}__completion"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            data-wp-bind--hidden="!state.isComplete"
+          >
+            { __( '🎉 Complete!', '{{textDomain}}' ) }
+          </div>
+        )}
+
+        <button
+          className="{{cssClassName}}__reset"
+          data-wp-on--click="actions.reset"
+          aria-label={ __( 'Reset counter', '{{textDomain}}' ) }
+        >
+          <span aria-hidden="true">↻</span>
+          <span className="screen-reader-text">
+            { __( 'Reset counter', '{{textDomain}}' ) }
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+`;
+export const INTERACTIVITY_INDEX_TEMPLATE = `import {
+  registerScaffoldBlockType,
+  type BlockConfiguration,
+} from '@wp-typia/block-types/blocks/registration';
+import type { BlockSupports } from '@wp-typia/block-types/blocks/supports';
+import {
+  buildScaffoldBlockRegistration,
+  parseScaffoldBlockMetadata,
+} from '@wp-typia/block-runtime/blocks';
+
+import Edit from './edit';
+import Save from './save';
+import metadata from './block-metadata';
+import './editor.scss';
+import './style.scss';
+
+import type { {{pascalCase}}Attributes } from './types';
+
+const scaffoldSupports = {
+  html: false,
+  align: true,
+  anchor: true,
+  className: true,
+  interactivity: true,
+} satisfies BlockSupports;
+
+const registration = buildScaffoldBlockRegistration(
+  parseScaffoldBlockMetadata<BlockConfiguration<{{pascalCase}}Attributes>>(metadata),
+  {
+    supports: scaffoldSupports,
+    edit: Edit,
+    save: Save,
+  }
+);
+
+registerScaffoldBlockType(registration.name, registration.settings);
+`;
+export const INTERACTIVITY_SCRIPT_TEMPLATE = `/**
+ * WordPress Interactivity API implementation for {{title}} block
+ */
+import { store, getContext, getElement, withSyncEvent } from '@wordpress/interactivity';
+import type { {{pascalCase}}Context } from './types';
+
+function getBlockContext() {
+  return getContext<{{pascalCase}}Context>();
+}
+
+// Store configuration
+store('{{slugKebabCase}}', {
+  // State - reactive data that updates the UI
+  state: {
+    get clicks() {
+      return getBlockContext().clicks;
+    },
+    get isAnimating() {
+      return getBlockContext().isAnimating;
+    },
+    get isVisible() {
+      return getBlockContext().isVisible;
+    },
+    get progress() {
+      const context = getBlockContext();
+      const clampedClicks =
+        context.maxClicks > 0
+          ? Math.min(context.clicks, context.maxClicks)
+          : context.clicks;
+      return context.maxClicks > 0 ? (clampedClicks / context.maxClicks) * 100 : 0;
+    },
+    get clampedClicks() {
+      const context = getBlockContext();
+      return context.maxClicks > 0
+        ? Math.min(context.clicks, context.maxClicks)
+        : context.clicks;
+    },
+    get isComplete() {
+      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;
+
+      // 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;
+    })
+  }
+});
+`;
+export const INTERACTIVITY_VALIDATORS_TEMPLATE = `import typia from 'typia';
+import currentManifest from "./manifest-defaults-document";
+import { {{pascalCase}}Attributes, {{pascalCase}}ValidationResult } from "./types";
+import { createTemplateValidatorToolkit } from "./validator-toolkit";
+
+const scaffoldValidators = createTemplateValidatorToolkit<{{pascalCase}}Attributes>({
+  assert: typia.createAssert<{{pascalCase}}Attributes>(),
+  clone: typia.misc.createClone<{{pascalCase}}Attributes>() as (
+    value: {{pascalCase}}Attributes,
+  ) => {{pascalCase}}Attributes,
+  is: typia.createIs<{{pascalCase}}Attributes>(),
+  manifest: currentManifest,
+  prune: typia.misc.createPrune<{{pascalCase}}Attributes>(),
+  random: typia.createRandom<{{pascalCase}}Attributes>() as (
+    ...args: unknown[]
+  ) => {{pascalCase}}Attributes,
+  validate: typia.createValidate<{{pascalCase}}Attributes>(),
+});
+
+export const validate{{pascalCase}}Attributes =
+  scaffoldValidators.validateAttributes as (
+    attributes: unknown,
+  ) => {{pascalCase}}ValidationResult;
+
+export const validators = scaffoldValidators.validators;
+
+export const sanitize{{pascalCase}}Attributes =
+  scaffoldValidators.sanitizeAttributes as (
+    attributes: Partial<{{pascalCase}}Attributes>,
+  ) => {{pascalCase}}Attributes;
+
+/**
+ * Runtime type guard for checking if an object is {{pascalCase}}Attributes.
+ */
+export const is{{pascalCase}}Attributes = (obj: unknown): obj is {{pascalCase}}Attributes => {
+  return validators.is(obj);
+};
+
+export const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;
+`;

package/dist/runtime/built-in-block-code-templates/persistence.d.ts

@@ -0,0 +1,5 @@
+export declare const PERSISTENCE_EDIT_TEMPLATE = "import type { BlockEditProps } from '@wp-typia/block-types/blocks/registration';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tAlignmentToolbar,\n\tBlockControls,\n\tInspectorControls,\n\tRichText,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport {\n\tNotice,\n\tPanelBody,\n\tTextControl,\n} from '@wordpress/components';\nimport currentManifest from './manifest-document';\nimport {\n\tInspectorFromManifest,\n\tuseEditorFields,\n\tuseTypedAttributeUpdater,\n} from '@wp-typia/block-runtime/inspector';\nimport type { {{pascalCase}}Attributes } from './types';\nimport {\n\tsanitize{{pascalCase}}Attributes,\n\tvalidate{{pascalCase}}Attributes,\n} from './validators';\nimport { useTypiaValidation } from './hooks';\n\ntype EditProps = BlockEditProps< {{pascalCase}}Attributes >;\n\nexport default function Edit( {\n\tattributes,\n\tsetAttributes,\n}: EditProps ) {\n\tconst editorFields = useEditorFields(\n\t\tcurrentManifest,\n\t\t{\n\t\t\tmanual: [ 'content', 'resourceKey' ],\n\t\t\tlabels: {\n\t\t\t\tbuttonLabel: __( 'Button Label', '{{textDomain}}' ),\n\t\t\t\tresourceKey: __( 'Resource Key', '{{textDomain}}' ),\n\t\t\t\tshowCount: __( 'Show Count', '{{textDomain}}' ),\n\t\t\t},\n\t\t}\n\t);\n\tconst { errorMessages, isValid } = useTypiaValidation(\n\t\tattributes,\n\t\tvalidate{{pascalCase}}Attributes\n\t);\n\tconst validateEditorUpdate = (\n\t\tnextAttributes: {{pascalCase}}Attributes\n\t) => {\n\t\ttry {\n\t\t\treturn {\n\t\t\t\tdata: sanitize{{pascalCase}}Attributes( nextAttributes ),\n\t\t\t\terrors: [],\n\t\t\t\tisValid: true as const,\n\t\t\t};\n\t\t} catch {\n\t\t\treturn validate{{pascalCase}}Attributes( nextAttributes );\n\t\t}\n\t};\n\tconst { updateField } = useTypedAttributeUpdater(\n\t\tattributes,\n\t\tsetAttributes,\n\t\tvalidateEditorUpdate\n\t);\n\tconst alignmentValue = editorFields.getStringValue(\n\t\tattributes,\n\t\t'alignment',\n\t\t'left'\n\t);\n\tconst persistencePolicy = '{{persistencePolicy}}';\n\tconst persistencePolicyDescription = __(\n\t\t{{persistencePolicyDescriptionJson}},\n\t\t'{{textDomain}}'\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<AlignmentToolbar\n\t\t\t\t\tvalue={ alignmentValue }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tupdateField(\n\t\t\t\t\t\t\t'alignment',\n\t\t\t\t\t\t\t( value || alignmentValue ) as NonNullable< {{pascalCase}}Attributes[ 'alignment' ] >\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<InspectorFromManifest\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tfieldLookup={ editorFields }\n\t\t\t\t\tonChange={ updateField }\n\t\t\t\t\tpaths={ [ 'alignment', 'isVisible', 'showCount', 'buttonLabel' ] }\n\t\t\t\t\ttitle={ __( 'Persistence Settings', '{{textDomain}}' ) }\n\t\t\t\t>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Resource Key', '{{textDomain}}' ) }\n\t\t\t\t\t\tvalue={ attributes.resourceKey ?? '' }\n\t\t\t\t\t\tonChange={ ( value ) => updateField( 'resourceKey', value ) }\n\t\t\t\t\t\thelp={ __( 'Stable persisted identifier used by the storage-backed counter endpoint.', '{{textDomain}}' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<Notice status=\"info\" isDismissible={ false }>\n\t\t\t\t\t\t{ __( 'Storage mode: {{dataStorageMode}}', '{{textDomain}}' ) }\n\t\t\t\t\t</Notice>\n\t\t\t\t\t<Notice status=\"info\" isDismissible={ false }>\n\t\t\t\t\t\t{ __( 'Persistence policy: {{persistencePolicy}}', '{{textDomain}}' ) }\n\t\t\t\t\t\t<br />\n\t\t\t\t\t\t{ persistencePolicyDescription }\n\t\t\t\t\t</Notice>\n\t\t\t\t\t<Notice status=\"info\" isDismissible={ false }>\n\t\t\t\t\t\t{ __( 'Render mode: dynamic. `render.php` bootstraps durable post context, while fresh session-only write data is loaded from the dedicated `/bootstrap` endpoint after hydration.', '{{textDomain}}' ) }\n\t\t\t\t\t</Notice>\n\t\t\t\t</InspectorFromManifest>\n\t\t\t\t{ ! isValid && (\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'Validation Errors', '{{textDomain}}' ) }\n\t\t\t\t\t\tinitialOpen\n\t\t\t\t\t>\n\t\t\t\t\t\t{ errorMessages.map( ( error, index ) => (\n\t\t\t\t\t\t\t<Notice key={ index } status=\"error\" isDismissible={ false }>\n\t\t\t\t\t\t\t\t{ error }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</PanelBody>\n\t\t\t\t) }\n\t\t\t</InspectorControls>\n\t\t\t<div\n\t\t\t\t{ ...useBlockProps( {\n\t\t\t\t\tclassName: '{{cssClassName}}',\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\ttextAlign:\n\t\t\t\t\t\t\talignmentValue as NonNullable< {{pascalCase}}Attributes[ 'alignment' ] >,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<RichText\n\t\t\t\t\ttagName=\"p\"\n\t\t\t\t\tvalue={ attributes.content }\n\t\t\t\t\tonChange={ ( value ) => updateField( 'content', value ) }\n\t\t\t\t\tplaceholder={ __( {{titleJson}} + ' persistence block', '{{textDomain}}' ) }\n\t\t\t\t/>\n\t\t\t\t<p className=\"{{cssClassName}}__meta\">\n\t\t\t\t\t{ __( 'Resource key:', '{{textDomain}}' ) } { attributes.resourceKey || '\u2014' }\n\t\t\t\t</p>\n\t\t\t\t<p className=\"{{cssClassName}}__meta\">\n\t\t\t\t\t{ __( 'Storage mode:', '{{textDomain}}' ) } {{dataStorageMode}}\n\t\t\t\t</p>\n\t\t\t\t<p className=\"{{cssClassName}}__meta\">\n\t\t\t\t\t{ __( 'Persistence policy:', '{{textDomain}}' ) } {{persistencePolicy}}\n\t\t\t\t</p>\n\t\t\t\t{ ! isValid && (\n\t\t\t\t\t<Notice status=\"error\" isDismissible={ false }>\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t{ errorMessages.map( ( error, index ) => <li key={ index }>{ error }</li> ) }\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</Notice>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n";
+export declare const PERSISTENCE_INDEX_TEMPLATE = "import {\n\tregisterScaffoldBlockType,\n\ttype BlockConfiguration,\n} from '@wp-typia/block-types/blocks/registration';\nimport {\n\tbuildScaffoldBlockRegistration,\n\tparseScaffoldBlockMetadata,\n} from '@wp-typia/block-runtime/blocks';\n\nimport Edit from './edit';\nimport Save from './save';\nimport metadata from './block-metadata';\nimport './style.scss';\n\nimport type { {{pascalCase}}Attributes } from './types';\n\nconst registration = buildScaffoldBlockRegistration(\n\tparseScaffoldBlockMetadata<BlockConfiguration< {{pascalCase}}Attributes >>( metadata ),\n\t{\n\t\tedit: Edit,\n\t\tsave: Save,\n\t}\n);\n\nregisterScaffoldBlockType(registration.name, registration.settings);\n";
+export declare const PERSISTENCE_SAVE_TEMPLATE = "export default function Save() {\n\t// This block is intentionally server-rendered. PHP bootstraps post context,\n\t// storage-backed state, and write-policy data before the frontend hydrates.\n\treturn null;\n}\n";
+export declare const PERSISTENCE_VALIDATORS_TEMPLATE = "import typia from 'typia';\nimport currentManifest from './manifest-defaults-document';\nimport type {\n\t{{pascalCase}}Attributes,\n\t{{pascalCase}}ValidationResult,\n} from './types';\nimport { generateResourceKey } from '@wp-typia/block-runtime/identifiers';\nimport { createTemplateValidatorToolkit } from './validator-toolkit';\n\nconst scaffoldValidators = createTemplateValidatorToolkit< {{pascalCase}}Attributes >( {\n\tassert: typia.createAssert< {{pascalCase}}Attributes >(),\n\tclone: typia.misc.createClone< {{pascalCase}}Attributes >() as (\n\t\tvalue: {{pascalCase}}Attributes,\n\t) => {{pascalCase}}Attributes,\n\tis: typia.createIs< {{pascalCase}}Attributes >(),\n\tmanifest: currentManifest,\n\tprune: typia.misc.createPrune< {{pascalCase}}Attributes >(),\n\trandom: typia.createRandom< {{pascalCase}}Attributes >() as (\n\t\t...args: unknown[]\n\t) => {{pascalCase}}Attributes,\n\tfinalize: ( normalized ) => ( {\n\t\t...normalized,\n\t\tresourceKey:\n\t\t\tnormalized.resourceKey && normalized.resourceKey.length > 0\n\t\t\t\t? normalized.resourceKey\n\t\t\t\t: generateResourceKey( '{{slugKebabCase}}' ),\n\t} ),\n\tvalidate: typia.createValidate< {{pascalCase}}Attributes >(),\n} );\n\nexport const validators = scaffoldValidators.validators;\n\nexport const validate{{pascalCase}}Attributes =\n\tscaffoldValidators.validateAttributes as (\n\t\tattributes: unknown\n\t) => {{pascalCase}}ValidationResult;\n\nexport const sanitize{{pascalCase}}Attributes =\n\tscaffoldValidators.sanitizeAttributes as (\n\t\tattributes: Partial< {{pascalCase}}Attributes >\n\t) => {{pascalCase}}Attributes;\n\nexport const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;\n";
+export declare const PERSISTENCE_INTERACTIVITY_TEMPLATE = "import { getContext, store } from '@wordpress/interactivity';\nimport { generatePublicWriteRequestId } from '@wp-typia/block-runtime/identifiers';\n\nimport { fetchBootstrap, fetchState, writeState } from './api';\nimport type {\n\t{{pascalCase}}ClientState,\n\t{{pascalCase}}Context,\n\t{{pascalCase}}State,\n} from './types';\nimport type {\n\t{{pascalCase}}WriteStateRequest,\n} from './api-types';\n\nfunction hasExpiredPublicWriteToken(\n\texpiresAt?: number\n): boolean {\n\treturn (\n\t\ttypeof expiresAt === 'number' &&\n\t\texpiresAt > 0 &&\n\t\tDate.now() >= expiresAt * 1000\n\t);\n}\n\nfunction getWriteBlockedMessage(\n\tcontext: {{pascalCase}}Context\n): string {\n\treturn context.persistencePolicy === 'authenticated'\n\t\t? 'Sign in to persist this counter.'\n\t\t: 'Public writes are temporarily unavailable.';\n}\n\nconst BOOTSTRAP_MAX_ATTEMPTS = 3;\nconst BOOTSTRAP_RETRY_DELAYS_MS = [ 250, 500 ];\n\nasync function waitForBootstrapRetry( delayMs: number ): Promise< void > {\n\tawait new Promise( ( resolve ) => {\n\t\tsetTimeout( resolve, delayMs );\n\t} );\n}\n\nfunction getClientState(\n\tcontext: {{pascalCase}}Context\n): {{pascalCase}}ClientState {\n\tif ( context.client ) {\n\t\treturn context.client;\n\t}\n\n\tcontext.client = {\n\t\tbootstrapError: '',\n\t\twriteExpiry: 0,\n\t\twriteNonce: '',\n\t\twriteToken: '',\n\t};\n\n\treturn context.client;\n}\n\nfunction clearBootstrapError(\n\tcontext: {{pascalCase}}Context,\n\tclientState: {{pascalCase}}ClientState\n): void {\n\tif ( context.error === clientState.bootstrapError ) {\n\t\tcontext.error = '';\n\t}\n\tclientState.bootstrapError = '';\n}\n\nfunction setBootstrapError(\n\tcontext: {{pascalCase}}Context,\n\tclientState: {{pascalCase}}ClientState,\n\tmessage: string\n): void {\n\tclientState.bootstrapError = message;\n\tcontext.error = message;\n}\n\nconst { actions, state } = store( '{{slugKebabCase}}', {\n\tstate: {\n\t\tisHydrated: false,\n\t} as {{pascalCase}}State,\n\n\tactions: {\n\t\tasync loadState() {\n\t\t\tconst context = getContext< {{pascalCase}}Context >();\n\t\t\tif ( context.postId <= 0 || ! context.resourceKey ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontext.isLoading = true;\n\t\t\tcontext.error = '';\n\n\t\t\ttry {\n\t\t\t\tconst result = await fetchState( {\n\t\t\t\t\tpostId: context.postId,\n\t\t\t\t\tresourceKey: context.resourceKey,\n\t\t\t\t}, {\n\t\t\t\t\ttransportTarget: 'frontend',\n\t\t\t\t} );\n\t\t\t\tif ( ! result.isValid || ! result.data ) {\n\t\t\t\t\tcontext.error = result.errors[ 0 ]?.expected ?? 'Unable to load counter';\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tcontext.count = result.data.count;\n\t\t\t} catch ( error ) {\n\t\t\t\tcontext.error =\n\t\t\t\t\terror instanceof Error ? error.message : 'Unknown loading error';\n\t\t\t} finally {\n\t\t\t\tcontext.isLoading = false;\n\t\t\t}\n\t\t},\n\t\tasync loadBootstrap() {\n\t\t\tconst context = getContext< {{pascalCase}}Context >();\n\t\t\tconst clientState = getClientState( context );\n\t\t\tif ( context.postId <= 0 || ! context.resourceKey ) {\n\t\t\t\tcontext.bootstrapReady = true;\n\t\t\t\tcontext.canWrite = false;\n\t\t\t\tclientState.bootstrapError = '';\n\t\t\t\tclientState.writeExpiry = 0;\n\t\t\t\tclientState.writeNonce = '';\n\t\t\t\tclientState.writeToken = '';\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontext.isBootstrapping = true;\n\n\t\t\tlet bootstrapSucceeded = false;\n\t\t\tlet lastBootstrapError =\n\t\t\t\t'Unable to initialize write access';\n\t\t\tconst includePublicWriteCredentials = {{isPublicPersistencePolicy}};\n\t\t\tconst includeRestNonce = {{isAuthenticatedPersistencePolicy}};\n\n\t\t\tfor ( let attempt = 1; attempt <= BOOTSTRAP_MAX_ATTEMPTS; attempt += 1 ) {\n\t\t\t\ttry {\n\t\t\t\t\tconst result = await fetchBootstrap( {\n\t\t\t\t\t\tpostId: context.postId,\n\t\t\t\t\t\tresourceKey: context.resourceKey,\n\t\t\t\t\t}, {\n\t\t\t\t\t\ttransportTarget: 'frontend',\n\t\t\t\t\t} );\n\t\t\t\t\tif ( ! result.isValid || ! result.data ) {\n\t\t\t\t\t\tlastBootstrapError =\n\t\t\t\t\t\t\tresult.errors[ 0 ]?.expected ??\n\t\t\t\t\t\t\t'Unable to initialize write access';\n\t\t\t\t\t\tif ( attempt < BOOTSTRAP_MAX_ATTEMPTS ) {\n\t\t\t\t\t\t\tawait waitForBootstrapRetry(\n\t\t\t\t\t\t\t\tBOOTSTRAP_RETRY_DELAYS_MS[ attempt - 1 ] ?? 750\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\n\t\t\t\t\tclientState.writeExpiry =\n\t\t\t\t\t\tincludePublicWriteCredentials &&\n\t\t\t\t\t\t'publicWriteExpiresAt' in result.data &&\n\t\t\t\t\t\ttypeof result.data.publicWriteExpiresAt === 'number' &&\n\t\t\t\t\t\tresult.data.publicWriteExpiresAt > 0\n\t\t\t\t\t\t\t? result.data.publicWriteExpiresAt\n\t\t\t\t\t\t\t: 0;\n\t\t\t\t\tclientState.writeToken =\n\t\t\t\t\t\tincludePublicWriteCredentials &&\n\t\t\t\t\t\t'publicWriteToken' in result.data &&\n\t\t\t\t\t\ttypeof result.data.publicWriteToken === 'string' &&\n\t\t\t\t\t\tresult.data.publicWriteToken.length > 0\n\t\t\t\t\t\t\t? result.data.publicWriteToken\n\t\t\t\t\t\t\t: '';\n\t\t\t\t\tclientState.writeNonce =\n\t\t\t\t\t\tincludeRestNonce &&\n\t\t\t\t\t\t'restNonce' in result.data &&\n\t\t\t\t\t\ttypeof result.data.restNonce === 'string' &&\n\t\t\t\t\t\tresult.data.restNonce.length > 0\n\t\t\t\t\t\t\t? result.data.restNonce\n\t\t\t\t\t\t\t: '';\n\t\t\t\t\tcontext.bootstrapReady = true;\n\t\t\t\t\tcontext.canWrite =\n\t\t\t\t\t\tresult.data.canWrite === true &&\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\tcontext.persistencePolicy === 'authenticated'\n\t\t\t\t\t\t\t\t? clientState.writeNonce.length > 0\n\t\t\t\t\t\t\t\t: clientState.writeToken.length > 0 &&\n\t\t\t\t\t\t\t\t\t! hasExpiredPublicWriteToken( clientState.writeExpiry )\n\t\t\t\t\t\t);\n\t\t\t\t\tclearBootstrapError( context, clientState );\n\t\t\t\t\tbootstrapSucceeded = true;\n\t\t\t\t\tbreak;\n\t\t\t\t} catch ( error ) {\n\t\t\t\t\tlastBootstrapError =\n\t\t\t\t\t\terror instanceof Error ? error.message : 'Unknown bootstrap error';\n\t\t\t\t\tif ( attempt < BOOTSTRAP_MAX_ATTEMPTS ) {\n\t\t\t\t\t\tawait waitForBootstrapRetry(\n\t\t\t\t\t\t\tBOOTSTRAP_RETRY_DELAYS_MS[ attempt - 1 ] ?? 750\n\t\t\t\t\t\t);\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( ! bootstrapSucceeded ) {\n\t\t\t\tcontext.bootstrapReady = false;\n\t\t\t\tcontext.canWrite = false;\n\t\t\t\tclientState.writeExpiry = 0;\n\t\t\t\tclientState.writeNonce = '';\n\t\t\t\tclientState.writeToken = '';\n\t\t\t\tsetBootstrapError( context, clientState, lastBootstrapError );\n\t\t\t}\n\t\t\tcontext.isBootstrapping = false;\n\t\t},\n\t\tasync increment() {\n\t\t\tconst context = getContext< {{pascalCase}}Context >();\n\t\t\tconst clientState = getClientState( context );\n\t\t\tif ( context.postId <= 0 || ! context.resourceKey ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( ! context.bootstrapReady ) {\n\t\t\t\tawait actions.loadBootstrap();\n\t\t\t}\n\t\t\tif ( ! context.bootstrapReady ) {\n\t\t\t\tcontext.error = 'Write access is still initializing.';\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tcontext.persistencePolicy === 'public' &&\n\t\t\t\thasExpiredPublicWriteToken( clientState.writeExpiry )\n\t\t\t) {\n\t\t\t\tawait actions.loadBootstrap();\n\t\t\t}\n\t\t\tif (\n\t\t\t\tcontext.persistencePolicy === 'public' &&\n\t\t\t\thasExpiredPublicWriteToken( clientState.writeExpiry )\n\t\t\t) {\n\t\t\t\tcontext.canWrite = false;\n\t\t\t\tcontext.error = getWriteBlockedMessage( context );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( ! context.canWrite ) {\n\t\t\t\tcontext.error = getWriteBlockedMessage( context );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcontext.isSaving = true;\n\t\t\tcontext.error = '';\n\n\t\t\ttry {\n\t\t\t\tconst request = {\n\t\t\t\t\tdelta: 1,\n\t\t\t\t\tpostId: context.postId,\n\t\t\t\t\tresourceKey: context.resourceKey,\n\t\t\t\t} as {{pascalCase}}WriteStateRequest;\n\t\t\t\tif ( {{isPublicPersistencePolicy}} ) {\n\t\t\t\t\trequest.publicWriteRequestId =\n\t\t\t\t\t\tgeneratePublicWriteRequestId() as {{pascalCase}}WriteStateRequest[ 'publicWriteRequestId' ];\n\t\t\t\t\tif ( clientState.writeToken.length > 0 ) {\n\t\t\t\t\t\trequest.publicWriteToken =\n\t\t\t\t\t\t\tclientState.writeToken as {{pascalCase}}WriteStateRequest[ 'publicWriteToken' ];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst result = await writeState( request, {\n\t\t\t\t\trestNonce:\n\t\t\t\t\t\tclientState.writeNonce.length > 0\n\t\t\t\t\t\t\t? clientState.writeNonce\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\ttransportTarget: 'frontend',\n\t\t\t\t} );\n\t\t\t\tif ( ! result.isValid || ! result.data ) {\n\t\t\t\t\tcontext.error = result.errors[ 0 ]?.expected ?? 'Unable to update counter';\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tcontext.count = result.data.count;\n\t\t\t\tcontext.storage = result.data.storage;\n\t\t\t} catch ( error ) {\n\t\t\t\tcontext.error =\n\t\t\t\t\terror instanceof Error ? error.message : 'Unknown update error';\n\t\t\t} finally {\n\t\t\t\tcontext.isSaving = false;\n\t\t\t}\n\t\t},\n\t},\n\n\tcallbacks: {\n\t\tinit() {\n\t\t\tconst context = getContext< {{pascalCase}}Context >();\n\t\t\tcontext.client = {\n\t\t\t\tbootstrapError: '',\n\t\t\t\twriteExpiry: 0,\n\t\t\t\twriteNonce: '',\n\t\t\t\twriteToken: '',\n\t\t\t};\n\t\t\tcontext.bootstrapReady = false;\n\t\t\tcontext.canWrite = false;\n\t\t\tcontext.count = 0;\n\t\t\tcontext.error = '';\n\t\t\tcontext.isBootstrapping = false;\n\t\t\tcontext.isLoading = false;\n\t\t\tcontext.isSaving = false;\n\t\t},\n\t\tmounted() {\n\t\t\tstate.isHydrated = true;\n\t\t\tif ( typeof document !== 'undefined' ) {\n\t\t\t\tdocument.documentElement.dataset[ '{{slugCamelCase}}Hydrated' ] = 'true';\n\t\t\t}\n\t\t\tvoid Promise.allSettled( [\n\t\t\t\tactions.loadState(),\n\t\t\t\tactions.loadBootstrap(),\n\t\t\t] );\n\t\t},\n\t},\n} );\n";