Parity react <-> vue. Validation refactor, DX improvements

.gitignore

@@ -10,9 +10,10 @@
 
 coverage/
 dist/
+dist-storybook/
 node_modules/
 
 .pnp.cjs
 .pnp.loader.mjs
 .yarnrc.yml
-*storybook.log
+*storybook.log

.yarnrc.yml.dist

@@ -1,4 +1,4 @@
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
 
 nodeLinker: node-modules
 

AGENTS.md

@@ -0,0 +1,145 @@
+# AGENTS.md
+
+## Goals
+- Avoid clarification loops by proposing a concrete interpretation when details
+  are missing.
+- Default to the language of the user's initial message unless they explicitly
+  request a different language.
+- Match the tone and formality of the user's initial message unless they
+  explicitly ask for a change.
+- Treat a language switch in the user's message as an explicit request to
+  respond in that language.
+- If a message is mixed-language, reply in the dominant language unless the
+  user specifies otherwise.
+- Run `make eslint` before handoff or commit preparation only when changed
+  files include code covered by eslint rules (for example `*.js`, `*.ts`,
+  and similar source files). Do not run `make eslint` for markdown-only
+  changes (for example `*.md`).
+- Getter/helper functions must be side-effect free. Side effects are allowed
+  only by prior agreement and only when there are strong, explicit reasons.
+
+## Reporting
+- Keep handoff reports natural and outcome-focused: describe what was done.
+- Do not proactively list skipped optional steps/checks (for example, not
+  running eslint for markdown-only changes) unless the user explicitly asks.
+- Always mention blockers, failed required checks, or other omissions that can
+  affect correctness, safety, or reproducibility.
+
+## Purpose
+This file defines practical instructions for working in the
+`modulify/m3-web` repository, with a focus on test execution and commit
+workflow.
+
+## Repository Structure
+- This project is a Yarn Workspaces monorepo.
+- Root workspace: `@modulify/m3-web`.
+- Workspace folders: `m3-foundation`, `m3-react`, `m3-vue`.
+- Root-level test command is `yarn test` (`vitest run`).
+- Vitest workspace targets are declared in `vitest.workspace.ts`:
+  `m3-react`, `m3-vue`.
+
+## Local Environment Prerequisites
+- Yarn version is `4.6.0` (see `packageManager` in `package.json`).
+- Local `.yarnrc.yml` is generated from `.yarnrc.yml.dist` using:
+```bash
+make .yarnrc.yml
+```
+- Install dependencies with:
+```bash
+make node_modules
+# or
+yarn install
+```
+
+## Running Tests
+
+### Local Path
+- Generate local Yarn config:
+```bash
+make .yarnrc.yml
+```
+- Install dependencies:
+```bash
+make node_modules
+# or
+yarn install
+```
+- Run all tests:
+```bash
+make test
+# or
+yarn test
+```
+
+### Passing Vitest CLI Arguments via Makefile
+- Run tests by name pattern:
+```bash
+make test cli="-t M3Button"
+```
+- Run tests only for a specific workspace path:
+```bash
+make test cli="m3-react"
+```
+
+### Coverage
+- Run tests with coverage:
+```bash
+make test-coverage
+# or
+yarn test --coverage
+```
+
+## Related Commands
+- Build all workspaces:
+```bash
+make build
+```
+- Run eslint:
+```bash
+make eslint
+```
+- Show available recipes:
+```bash
+make help
+```
+
+## Important Project Rules
+- Commit messages follow Conventional Commits.
+- Commitlint configuration is in `.commitlintrc.json` with:
+  `header-max-length=200`, `body-max-line-length=200`,
+  `footer-max-line-length=200`, `subject-case=never`.
+- Getter/helper functions must be side-effect free. Side effects are allowed
+  only by prior agreement and only when there are strong, explicit reasons.
+
+## Commit Workflow
+- Default commit message language is English (unless explicitly requested
+  otherwise).
+- Commit style is Conventional Commits.
+- Write commit subjects as historical facts (not intentions).
+- Start commit subject description with an uppercase letter.
+- Keep commit subject description concise.
+- Move long details to commit body; lists in body are allowed for enumerations.
+- Use past/perfective wording; prefer passive voice for changelog-friendly phrasing.
+Examples: `Added ...`, `Removed ...`, `Refactored ...`, `Fixed ...`.
+- Respect commitlint limits from `.commitlintrc.json`:
+  `header-max-length=200`, `body-max-line-length=200`,
+  `footer-max-line-length=200`.
+- For workspace commits, use scope equal to the workspace directory name:
+  `m3-foundation`, `m3-react`, `m3-vue`.
+- Split commits by logical change. Workspace-local changes should stay in
+  their workspace scope.
+- Changes in `yarn.lock` must always be committed separately from all other files.
+- Commit message for `yarn.lock`-only commit must be exactly:
+`chore: Updated yarn.lock`.
+- Exception for intentional dependency updates:
+if commit purpose is dependency update (`yarn up`, `yarn add`, `yarn remove`, etc.),
+after rebase conflict resolution rerun the original dependency command and recreate separate
+`chore: Updated yarn.lock` commit.
+- Exception: global workspace-level changes can be combined in one commit.
+Global examples: eslint rule updates, shared dependency updates, repository-level infra/config changes.
+- For commit tasks, use the local skill:
+`skills/commit-workflow/SKILL.md`.
+- For `yarn.lock` merge/rebase conflict resolution, use the local skill:
+`skills/yarn-lock-conflict-resolution/SKILL.md`.
+- For coverage deficit analysis and recovery strategy, use the local skill:
+`skills/coverage-recovery/SKILL.md`.

Makefile

@@ -46,6 +46,26 @@ eslint: node_modules ## Runs eslint
 	$(TARGET_HEADER)
 	$(YARN) eslint
 
+.PHONY: tsc
+tsc: node_modules ## Runs type checks in all workspaces
+	$(TARGET_HEADER)
+	$(YARN) tsc
+
+.PHONY: tsc-foundation
+tsc-foundation: node_modules ## Runs type checks in @modulify/m3-foundation
+	$(TARGET_HEADER)
+	$(YARN) workspace @modulify/m3-foundation tsc
+
+.PHONY: tsc-react
+tsc-react: node_modules ## Runs type checks in @modulify/m3-react
+	$(TARGET_HEADER)
+	$(YARN) workspace @modulify/m3-react tsc
+
+.PHONY: tsc-vue
+tsc-vue: node_modules ## Runs type checks in @modulify/m3-vue
+	$(TARGET_HEADER)
+	$(YARN) workspace @modulify/m3-vue tsc
+
 .PHONY: test
 test: node_modules ## Runs autotests
 	$(TARGET_HEADER)
@@ -82,4 +102,4 @@ $(call computable,CC_BLUE,$(shell tput -Txterm setaf 4 2>/dev/null))
 $(call computable,CC_MAGENTA,$(shell tput -Txterm setaf 5 2>/dev/null))
 $(call computable,CC_CYAN,$(shell tput -Txterm setaf 6 2>/dev/null))
 $(call computable,CC_WHITE,$(shell tput -Txterm setaf 7 2>/dev/null))
-$(call computable,CC_END,$(shell tput -Txterm sgr0 2>/dev/null))
+$(call computable,CC_END,$(shell tput -Txterm sgr0 2>/dev/null))

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   node: &node
-    image: node:20
+    image: node:24
     user: node
     volumes:
       - ./:/project
@@ -10,6 +10,8 @@ services:
     <<: *node
     command: 'yarn storybook'
     working_dir: /project/m3-react
+    environment:
+      STORYBOOK_ALLOWED_HOSTS: '.modulify.test'
     labels:
       traefik.port: 6006
       traefik.enable: 'true'
@@ -22,10 +24,12 @@ services:
     <<: *node
     command: 'yarn storybook'
     working_dir: /project/m3-vue
+    environment:
+      STORYBOOK_ALLOWED_HOSTS: '.modulify.test'
     labels:
       traefik.port: 6006
       traefik.enable: 'true'
       traefik.http.routers.m3-vue-modulify.rule: 'HostRegexp(`m3-vue.modulify.{[^.]+}`)'
       traefik.http.routers.m3-vue-modulify.priority: 1
       traefik.http.routers.m3-vue-modulify.service: m3-vue-modulify
-      traefik.http.services.m3-vue-modulify.loadbalancer.server.port: '6006'
+      traefik.http.services.m3-vue-modulify.loadbalancer.server.port: '6006'

m3-foundation/assets/stylesheets/basics/layout.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $m3-screen-medium: 600px;
 $m3-screen-expanded: 840px;
 $m3-screen-large: 1200px;
@@ -20,16 +22,16 @@ $screen-max: (
 );
 
 @function get-screen-min ($keyOrValue) {
-  @if map-has-key($screen-min, $keyOrValue) {
-    @return map-get($screen-min, $keyOrValue);
+  @if map.has-key($screen-min, $keyOrValue) {
+    @return map.get($screen-min, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }
 }
 
 @function get-screen-max ($keyOrValue) {
-  @if map-has-key($screen-max, $keyOrValue) {
-    @return map-get($screen-max, $keyOrValue);
+  @if map.has-key($screen-max, $keyOrValue) {
+    @return map.get($screen-max, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }

m3-foundation/assets/stylesheets/basics/motion.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 // Duration
 
 // Short durations
@@ -50,8 +52,8 @@ $m3-sys-motion-duration-map: (
 );
 
 @function duration($type) {
-  @if map-has-key($m3-sys-motion-duration-map, $type) {
-    @return map-get($m3-sys-motion-duration-map, $type);
+  @if map.has-key($m3-sys-motion-duration-map, $type) {
+    @return map.get($m3-sys-motion-duration-map, $type);
   } @else {
     @warn "Unknown duration `#{$type}`.";
     @return null;
@@ -80,8 +82,8 @@ $m3-sys-motion-easing-map: (
 );
 
 @function easing($key) {
-  @if map-has-key($m3-sys-motion-easing-map, $key) {
-    @return map-get($m3-sys-motion-easing-map, $key);
+  @if map.has-key($m3-sys-motion-easing-map, $key) {
+    @return map.get($m3-sys-motion-easing-map, $key);
   } @else {
     @warn "Unknown key `#{$key}` in easing map.";
     @return null;
@@ -114,4 +116,4 @@ $m3-sys-motion-easing-map: (
 
 @function timing-standard-decelerate($property, $duration: 'medium1') {
   @return #{$property} + ' ' + #{timing($duration, 'standard-decelerate')}
-}
+}

m3-foundation/assets/stylesheets/basics/shape.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $m3-sys-shape-corner-extra-small: 4px;
 $m3-sys-shape-corner-small: 8px;
 $m3-sys-shape-corner-medium: 12px;
@@ -11,8 +13,8 @@ $m3-sys-shape-corner-map: (
 );
 
 @function get-corner($keyOrValue) {
-  @if map-has-key($m3-sys-shape-corner-map, $keyOrValue) {
-    @return map-get($m3-sys-shape-corner-map, $keyOrValue);
+  @if map.has-key($m3-sys-shape-corner-map, $keyOrValue) {
+    @return map.get($m3-sys-shape-corner-map, $keyOrValue);
   } @else {
     @return $keyOrValue;
   }
@@ -62,4 +64,4 @@ $m3-sys-shape-corner-map: (
   *::after {
     box-sizing: border-box;
   }
-}
+}

m3-foundation/assets/stylesheets/components/index.scss

@@ -1,22 +1,22 @@
-@import 'badge';
-@import 'button';
-@import 'card';
-@import 'checkbox';
-@import 'dialog';
-@import 'fab-button';
-@import 'icon';
-@import 'icon-button';
-@import 'menu';
-@import 'navigation';
-@import 'plane-tooltip';
-@import 'popper';
-@import 'rich-tooltip';
-@import 'ripple';
-@import 'scrim';
-@import 'scroll-box';
-@import 'scroll-rail';
-@import 'select';
-@import 'side-sheet';
-@import 'slider';
-@import 'switch';
-@import 'text-field';
+@use 'badge';
+@use 'button';
+@use 'card';
+@use 'checkbox';
+@use 'dialog';
+@use 'fab-button';
+@use 'icon';
+@use 'icon-button';
+@use 'menu';
+@use 'navigation';
+@use 'plane-tooltip';
+@use 'popper';
+@use 'rich-tooltip';
+@use 'ripple';
+@use 'scrim';
+@use 'scroll-box';
+@use 'scroll-rail';
+@use 'select';
+@use 'side-sheet';
+@use 'slider';
+@use 'switch';
+@use 'text-field';

m3-foundation/assets/stylesheets/components/navigation/index.scss

@@ -3,7 +3,7 @@
 @use '../../basics/shape' as m3-shape;
 @use '../../basics/typography' as m3-typography;
 
-@import './variables';
+@use './variables' as *;
 
 @mixin m3-navigation-drawer {
   width: $m3-navigation-drawer-width;
@@ -372,4 +372,4 @@
   @include m3-layout.screen-from('large') {
     padding-left: $m3-navigation-drawer-width;
   }
-}
+}

m3-foundation/assets/stylesheets/components/scrim/index.scss

@@ -1,4 +1,4 @@
-@import "../../basics/palette";
+@use '../../basics/palette' as *;
 
 .m3-scrim {
   display: flex;
@@ -9,4 +9,4 @@
   position: fixed;
   left: 0;
   top: 0;
-}
+}