Alpine.js: мини-мастерская и шесть интерфейсов

Версии: Alpine.js3.17.5, Persist3.17.5, Bootstrap CSS5.3.8.
Библиотеки находятся в vendor, лицензии сохранены рядом.

Запуск мастерских
1. Распакуйте архив целиком в отдельную папку.
2. В этой папке запустите один из серверов:
   php -S 127.0.0.1:8000
   или python -m http.server 8000 --bind 127.0.0.1
3. Откройте http://127.0.0.1:8000/index.html — шесть интерфейсов.
   http://127.0.0.1:8000/lab.html — конструктор карточки.

Автономные примеры
В папке examples лежат шесть HTML с исходным состоянием каждого сценария.
Они содержат стили и библиотеки внутри и открываются без интернета.
Кнопка «Скачать HTML» внутри мастерской сохраняет текущий вариант выбранного сценария.
Скачанный из мини-мастерской файл также содержит библиотеку, состояние и проверки.
Сброс скачанного файла возвращает сохранённый при экспорте вариант.

Карта файлов
index.html — разметка шести интерфейсов.
models.js — данные, расчёты и проверки.
ui.js — регистрация компонента Alpine и действия интерфейса.
ui.css — адаптивное оформление.
example-export.js — создание HTML выбранного сценария.
lab.html, lab.css, lab.js — мини-мастерская карточки.
export-vendor.js — тексты зависимостей для автономного экспорта.
embed.js, embed.css — интеграция iframe со статьёй WordPress; для отдельного запуска не обязательны.

Сценарии
calculator — тариф, скидка и опция поддержки.
rows — строки заявки со стабильными ключами.
wizard — три шага, проверка и локальное завершение.
editor — отдельные сохранённые и редактируемые данные.
filters — диалог условий, применение, чипы и пустая выдача.
preferences — плотность, порядок и тема с Persist.

Данные демонстрационные. Реальных заказов, платежей и отправки форм нет.
Настройки хранятся в браузере под собственным ключом aen-alpine-interface-prefs-v1;
автономный экспорт использует отдельный ключ. При запрете storage применяется память вкладки.
Проверка на клиенте не заменяет серверную проверку и проверку прав.

Источники: https://alpinejs.dev/ и https://github.com/alpinejs/alpine
Статья: https://ae-nekrasov.ru/development/alpine-js-interfejsy-html-masterskaya-6-primerov/
